$("foo").MTAppFancyListing() | MTAppjQuery v1 ドキュメント

Last modified date : 2019/01/31

使い方

fancybox の読み込み

初めに、jQuery プラグインの fancybox（http://fancybox.net/）を管理画面に読み込みます。fancybox は MTAppjQuery の以下のディレクトリに同梱されています。

mt-static/plugins/MTAppjQuery/lib/fancybox/jquery.fancybox-1.3.4.js
mt-static/plugins/MTAppjQuery/lib/fancybox/jquery.fancybox-1.3.4.css

MTAppjQuery の設定画面（ツール > プラグイン > MTAppjQuery > 設定タブ）を開き、「変数 js_include に追加（の直前）」のテキストエリアに次の HTML を入力し、設定を保存します。URL 部分は上記２つのファイルを読み込むように、ご自分の環境に書き換えてください。

<link rel="stylesheet" href="http://yourhost/mt-static/plugins/MTAppjQuery/lib/fancybox/jquery.fancybox-1.3.4.css">
<script type="text/javascript" src="http://yourhost/mt-static/plugins/MTAppjQuery/lib/fancybox/jquery.fancybox-1.3.4.js"></script>

これで管理画面に fancybox が読み込まれます。

iframe に読み込む HTML を作成

次に、インデックステンプレートを作成します。ここでは、次のようなインデックステンプレートを作成します。

テンプレート名 : fancylisting
出力ファイル名 : fancylisting.html

テンプレートの内容は次の通りです。

<mt:Ignore>=== 設定 ===</mt:Ignore>
<mt:SetVar name="mt-static-url" value="http://mt.bit-part.net/MT-5.2.3/mt/mt-static/" />
<mt:SetVarBlock name="table_header">
<tr>
    <th class="col head cb">&nbsp;</th>
    <th class="col head panel-label primary"><span class="col-label">タイトル</span></th>
</tr>
</mt:SetVarBlock>
<mt:SetVarBlock name="table_content_first">
<tr class="panel-item">
    <td class="col cb"><input type="radio" value="" name="entry" class="select checkbox" id="id_0"></td>
    <td class="col panel-label"><label>値をクリア</label></td>
</tr>
</mt:SetVarBlock>
<mt:SetVarTemplate name="table_content">
<tr class="panel-item">
    <td class="col cb"><input type="radio" value="<$mt:EntryID$>" name="entry" class="select checkbox" id="id_<$mt:EntryID$>"></td>
    <td class="col panel-label"><label><$mt:EntryTitle$></label></td>
</tr>
</mt:SetVarTemplate>
<mt:SetVarBlock name="table_action_bar">
<div class="actions-bar" style="margin:20px 0;">
    <button class="continue action primary button" title="OK (s)" accesskey="s" type="submit" onclick="parent.jQuery.fancybox.close();">OK</button>
    <button class="cancel action button" title="キャンセル (x)" accesskey="x" type="submit">キャンセル</button>
</div>
</mt:SetVarBlock>
<mt:Ignore>=== /設定 ===</mt:Ignore>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title><$mt:BlogName$></title>
    <link rel="stylesheet" href="<mt:Var name="mt-static-url" />css/main.css" type="text/css" />
    <style type="text/css">
    tr.panel-item:hover {
        background-color: #e1e4dd;
        cursor: pointer;
    }
    </style>
    <script type="text/javascript" src="<mt:Var name="mt-static-url" />jquery/jquery.min.js"></script>
</head>
<body class="dialog dialog-screen">
<div id="container">
    <div id="content">
        <div style="margin-top:1px;" id="content-body">
            <div class="panel" id="author-panel">
                <h1 class="title panel" style="font-size:150%;"><$mt:BlogName$></h1>
                <div class="selector listing list-data list-multi" id="selector">
                    <input type="checkbox" id="cancel_check" style="display:none;" />
                    <mt:Var name="table_action_bar" />
                    <table class="legacy listing-table list-heading">
                        <thead><mt:Var name="table_header" /></thead>
                        <tfoot><mt:Var name="table_header" /></tfoot>
                        <tbody>
                            <mt:Var name="table_content_first" />
                            <mt:Entries lastn="0" sort_order="ascend">
                            <mt:Var name="table_content" />
                            </mt:Entries>
                        </tbody>
                    </table>
                    <mt:Var name="table_action_bar" />
            <!-- /#author-panel -->
            </div>
        <!-- /#content-body -->
        </div>
    <!-- /#content -->
    </div>
<!-- /#container -->
</div>
<script type="text/javascript">
// <![CDATA[
(function($){
    $('td.panel-label').click(function(){
        var cb = $(this).prev().find('input');
        if (cb.is(':checked')) {
            cb.removeAttr('checked');
        } else {
            cb.attr('checked','checked');
        }
    });
    $('button.cancel').click(function(){
        $('#cancel_check').attr('checked','checked');
        parent.jQuery.fancybox.close();
    });
})(jQuery);
// ]]>
</script>
</body>
</html>

このテンプレートを利用すると下図のような HTML が生成されます。

なお、テンプレート上部の「== 設定 ==」部分をカスタマイズすれば、この表の列を増やしたり表示する内容を変更したりすることができます。

この HTML を fancybox で読み込むことでポップアップウィンドウのようにし、ラジオボタンにチェックを付け、OK をクリックすると、MTAppFancyListing を適用させた元のフィールドに値が入力されます。

ここで入力される値は、上記テンプレート中の変数 table_content で設定しているラジオボタンの value の値となります。サンプルではブログ記事の ID が入力されます。

変数 table_content の内容を次のように変更すれば、元のフィールドにはブログ記事のタイトルが挿入されるようになります。

<mt:SetVarTemplate name="table_content">
<tr class="panel-item">
    <td class="col cb"><input type="radio" value="<$mt:EntryID$>" name="entry" class="select checkbox" id="id_<$mt:EntryID$>"></td>
    <td class="col panel-label"><label><$mt:EntryTitle$></label></td>
</tr>
</mt:SetVarTemplate>

この HTML を利用して MTAppFancyListing を適用させるためには、次のコードを user.js に記述します。

$("foo").MTAppFancyListing(
    url: '/',
    text: '一覧から選択',
    type: 'button',
    setting: null
);

foo には MTAppFancyListing を適用させたい input:text のセレクタを設定します。
オプション設定は下記の通りです。url は必須です。

オプション

url（Type : String, Default : '/'）

fancybox で iframe に読み込むページのURLを指定します。

$('#customfield_mtappfancylisting').MTAppFancyListing({
  url: 'http://yourhost/foo.html'
});

text（Type : String, Default : '一覧から選択'）

ボタンに表示するテキストを指定します。
初期値は「一覧から選択」です。

type（Type : String, Default : 'button'）

fancybox を起動する方法を設定します。設定できる値は下記の 'button'、'focus'、'input' のいずれかです。

button（ボタンをクリックして起動）
focus（元のフィールドにフォーカスすると起動）
input（入力可能のままの元のフィールド + ボタンをクリックして起動）

初期値は「button」です。

setting（Type : PlaneObject, Default : null）

setting オプションにオブジェクトを設定すると、fancybox にオリジナルの設定を適用させることができます。

ただし、その場合は fancybox で読み込むコンテンツの作成や、オーバーレイ表示されたコンテンツを閉じたときのイベント設定など、高度なカスタマイズが必要となります。

サンプル

キーワード欄に MTAppFancyListing を適用させ、上記のテンプレートを読み込み、一覧で選択したブログ記事の ID が元のフィールドに挿入されるようにするには、以下のコードになります。

$('#keywords').MTAppFancyListing({
  url: '<mt:Link template="fancylisting">',
  text: 'ブログ記事を選択'
});

そして、例えばこの MTAppFancyListing でセットされたブログ記事 ID を利用して、次のようなテンプレートで任意のページナビゲーションを作るなども可能です。

<mt:EntryKeywords setvar="kw" />
<mt:Entries id="$kw">
  <a href="<mt:EntryPermalink />">次のページ：<mt:EntryTitle escape="html" /></a>
</mt:Entries>