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

$.MTAppMultiCheckbox() の使い方 - 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

以上です。

MTAppjQuery について

Movable Type の管理画面をフロントエンドの知識だけで簡単にカスタマイズすることができます。

クライアントの満足度を高めるためにぜひお使いください。

MTAppjQuery の詳細を見る

Iamge Description

Recent Entries

Pickup Categories

Movable Type

CMSとして国内5万サイト以上に導入されている Movable Type に関する記事です。

Craft CMS

CMS 業界で注目の Craft CMS に関する記事です。Craft CMS はチーム全体をハッピーにしてくれる素晴らしい CMS です。