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

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

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

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

mtapp-inlineedit.png

inline-edit-slide.png

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 オプションでも可能です。そちらも合わせてご覧ください。

MTAppjQuery について

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

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

MTAppjQuery の詳細を見る

Iamge Description

Recent Entries

Pickup Categories

Movable Type

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

Craft CMS

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