$.fn.MTAppInlineEdit() - MTAppjQuery で簡単に Inline Edit にする

MTAppjQuery プラグインに同梱されている jQuery プラグインのうち、今日は「$.fn.MTAppInlineEdit()」について説明します。バージョン 0.09 で追加しました。

MT5 から、自分で追加したフィールドの class 属性に「.mt-edit-field」を付けると、Inline Edit とという状態になります。これは、「編集」ボタンを押すとテキストフィールドが現れ、編集できるようになるやつで、ブログ記事のベースネーム欄の様な感じになります。

MTDDC 2010.2.5 Tokyo - Brand new API

$.fn.MTAppInlineEdit() を利用すると、これとほぼ同様の動作を実現できます。

$.fn.MTAppInlineEdit() と $.fn.mtEditInput() の違い

MT5 標準の $.fn.mtEditInput() は、値が保存されていないときは、そのままフィールドを表示し、値が保存されると「編集」ボタンになります。また、対象となるのは input 要素に限定されていますね。

一方、$.fn.MTAppInlineEdit() は、上記の標準の機能の他に、値が保存されていなくても編集ボタンにしておくことができます。

また、対象となる要素も input に限らず textarea でも大丈夫です。

使い方

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

$('セレクタ').MTAppInlineEdit({
 edit:'編集', // 必須
 always:1 // 任意
});

edit （必須）

ボタンに表示されるテキストを設定します。

always （任意）

1 を設定すると、フォームに値が保存されていない場合でも、編集ボタンにします。

以上です。

これと似た機能が $.MTAppCustomize() の edit オプションでも可能です。そちらも合わせてご覧ください。