$.MTAppMultiCheckbox() の使い方 - MTAppjQuery でマルチチェックボックスも簡単に作成

MTAppjQuery プラグインに同梱されている jQuery プラグインのうち、今日は「$.MTAppMultiCheckbox()」について説明します。...

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

MTAppjQuery プラグインに同梱されている jQuery プラグインのうち、今日は「$.MTAppMultiCheckbox()」について説明します。

$.MTAppMultiCheckbox() とは

$.MTAppMultiCheckbox() とは、ブログ記事の作成・編集画面内のテキストフィールドをマルチチェックボックスにする jQuery プラグインです。「jQuery Multi-checkbox」を Movable Type 5 の管理画面用に特化したものとなります。

運用上、決まったタグしか入れて欲しくないときなどにも威力を発揮するかもしれませんね。

マルチチェックボックスにできるフィールドは、次の二つです。

  • テキストフィールド( input type="text" )
  • テキスト(複数行)( textarea )

使い方

基本的な書き方は次のようになります。

$.MTAppMultiCheckbox({
 basename: 'tags',
 label: 'Moveble Type,TypePad,MTOS,VOX',
 custom: 0,
 debug: 0
});

各オプションの設定は以下のとおりです。

basename(必須)

マルチチェックボックスにするフィールドのベースネームを設定します。デフォルトのフィールドでは、以下のベースネームのフィールドをマルチチェックボックスにすることができます。

  • title : タイトル
  • tags : タグ
  • keywords : キーワード
  • excerpt : 概要

テキストタイプのカスタムフィールドもマルチチェックボックスにすることができます。カスタムフィールドのベースネームは、カスタムフィールドの編集画面で確認できます。

もし Firebug などで直接ソースで確認する場合は、そのフィールドの一番親の div 要素の id 属性から確認できます。以下の例で言えば「price」がベースネームになります。

<div id="customfield_price-field" class="field field-top-label ">
 省略
</div>

label

チェックボックスのラベルをカンマ区切りで設定します。このラベルが、カンマ区切りで元のテキストフィールドに保存されます。

custom

マルチチェックボックスにするフィールドがカスタムフィールドの場合のみ 1 を設定します。

debug

1 を設定すると、元のテキストフィールドが表示されます。制作中に、どのような値が保存されるかを確認する際にお使いください。

サンプル

例えば、「タグ」欄を「Moveble Type,TypePad,MTOS,VOX」という4つのチェックボックスにしたい場合は、以下のように書きます。

$.MTAppMultiCheckbox({
 basename: 'tags',
 label: 'Moveble Type,TypePad,MTOS,VOX',
 custom: 0,
 debug: 0
});

MTAppMultiCheckbox-01.png

ちなにみ、このラベル名やツールチップのヒントは、$.MTAppCustomize() でカスタマイズしたものです。

なお、これに debug:1 を設定すると、次のように元のテキストフィールドが表示されます。

MTAppMultiCheckbox-02.png

以上です。

Published 2010-07-06
Updated 2019-06-25

⚡️ 話題の一冊 ⚡️

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