MTAppjQueryを使ってMTEntriesが使えるドロップダウンリストのカスタムフィールドを疑似的に作る

Movable Type ユーザーコミュニティの MTQ に「カスタムフィールド作成(編集)画面のMTタグ使用について」という投稿を見つけました。 MTAppjQuery プラグインを利用すれば疑似的に実現することができるので、その方法を紹介します。 MTAppjQuery プラグインのインストールはこちらのページ(ちょっと古いです(>_<))をご覧ください。最新の情報はドキュメントも...

この記事は弊社 bit part 合同会社が提供している Movable Type プラグイン「MTAppjQuery」の利用を前提としております。MTAppjQuery って何?という方は弊社の「MTAppjQuery」の製品ページをご覧ください。

Movable Type ユーザーコミュニティの MTQ に「カスタムフィールド作成(編集)画面のMTタグ使用について」という投稿を見つけました。

MTAppjQuery プラグインを利用すれば疑似的に実現することができるので、その方法を紹介します。

MTAppjQuery プラグインのインストールはこちらのページ(ちょっと古いです(>_<))をご覧ください。最新の情報はドキュメントも販売しております。

さて、本題です。

今回の内容を実現するためには、1行テキストのカスタムフィールドを作成し、それを MTAppjQuery の「MTAppMultiForm」というメソッドを使って実現します。

カスタムフィールドの作成

今回は、「entrydropdown」というベースネームの1行テキストフィールドを作成しました。

user.js の作成

MTAppjQuery がインストールできたら、テンプレートの一覧画面の右側のウィジェットにある「user.jsとuser.cssをインストール」をクリックします。

すると、インデックステンプレートに user.js と user.css が作成されます。今回は user.css は利用しませんので削除してしまって構いません。

次に、user.js の編集画面を開き、以下の内容を書いて保存します。

(function($){
<mt:SetVarBlock name="entrydropdown_item">
<mt:Entries lastn="0">
'<mt:EntryTitle escape="javascript">(ID:<mt:EntryID>)'<mt:EntriesFooter><mt:Else>,</mt:EntriesFooter>
</mt:Entries>
</mt:SetVarBlock>
$('#customfield_entrydropdown').MTAppMultiForm({
type: 'select',
items: [<mt:Var name="entrydropdown_item" compress="3">]
});
})(jQuery);

少し解説します。

$(foo).MTAppMultiForm()

MTAppMultiForm() を使うと、テキストフォームをチェックボックス、ラジオボタン、ドロップダウンリスト、複数選択セレクトボックスに変更できます。type、items 等のオプションを指定して利用します。

MTEntries で取り出した値を渡す

変数 entrydropdown_item に、MTEntries で取り出した値を入れます。その値を、MTAppMultiForm の items オプションに渡します。渡すときに、compress="3" のモディファイを付けて、余分な改行や余白を取り払います(compress モディファイアは MTAppjQuery の機能です)。

デモ

Published 2013-09-12
Updated 2019-06-25

「MTAppjQuery」カテゴリの記事一覧