MTAppjQuery P7

MTAppTabs

編集画面の複数フィールドを jQuery UI のタブ表示にまとめる。{ basename: タブ名 } で指定（カスタムは cf_ 接頭辞）。MTAppFieldSort と対象を重ねないこと。

記事・ウェブページ編集画面の複数のフィールドを、タブ切り替え表示にまとめる静的メソッドです。指定したフィールドを1つのタブコンテナに移動し、jQuery UI のタブとして表示します。関連する項目をタブでまとめて、編集画面を整理したいときに使います。

構文

$.MTAppTabs(options);

静的メソッド（$.MTAppTabs）です。

パラメータ

options {Object} — basename が必須です。

プロパティ	型	既定値	説明
`basename`	Object	`null`	必須。タブにするフィールドの指定。`{ basename: 'タブ名' }` の連想配列。カスタムフィールドは basename の先頭に `cf_` を付ける
`pointer`	string	`''`	タブコンテナを挿入する起点ノードのセレクタ（例 `#title-field`）
`pointerBasename`	string	`''`	`pointer` を指定しない場合の起点ノードの basename（例 `title`）
`insert`	string	`'after'`	起点ノードの前（`'before'`）か後ろ（`'after'`）に挿入するか
`pointer_basename`	string	—	非推奨。`pointerBasename` のエイリアス

戻り値

なし（undefined）。

使用例

タイトル・カスタム・キーワードをタブに

$.MTAppTabs({
    basename: { title: 'タイトル', cf_test_tabs: 'カスタム', keywords: 'キーワード' },
    pointerBasename: 'title',
    insert: 'before'
});

任意のセレクタを起点にする

$.MTAppTabs({
    basename: { cf_spec: '仕様', cf_note: '備考' },
    pointer: '#customfield_spec-field'
});

user.js での記述例

user.js（「デザイン → user.js を編集」）に書く場合は、mtappVars.screen_id で画面を判定して呼び出します。

(function ($) {
    if (typeof mtappVars !== 'object') return;
    if (mtappVars.screen_id === 'edit-entry') {
        $.MTAppTabs({
            basename: { title: 'タイトル', cf_test_tabs: 'カスタム', keywords: 'キーワード' },
            pointerBasename: 'title',
            insert: 'before'
        });
    }
})(jQuery);

生成される HTML

起点ノードの前後に div.mtapp-tabs-container を挿入し、その中にタブナビ（ul.mtapp-tabs-navi）と各フィールドを移動して jQuery UI タブ化します。

<div class="mtapp-tabs-container">
    <ul class="mtapp-tabs-navi">
        <li><a href="#title-field">タイトル</a></li>
        <!-- … -->
    </ul>
    <div id="title-field" class="field …">…</div>
    <!-- 各フィールド -->
</div>

補足

対象フィールドはタブコンテナへ移動され、sort-enabled／hidden クラスが外れ、各フィールドの見出し（div.field-header）は隠れます（タブのラベルが見出しの役割を果たすため）。
<body> に mtapp-tabs クラスが付きます。
タブのラベルは要素のテキストとして挿入されるため、basename の値に HTML が含まれても解釈されません（HTML インジェクションを起こしません）。
basename が未指定、または起点ノードが見つからない場合は何もしません。
MTAppFieldSort と同じフィールドを対象にしないでください。 両方で同じフィールドを指定すると、後から実行した方が勝ち、タブから抜けたり並べ替えが効かなかったりします。