使い方

$("foo").MTAppLineBreakField({
  inputClass: 'text full',
  sortable: true
});

foo には、textarea のセレクタを指定します。

内容を入力してエンターを押すかプラスボタンをクリックするとフィールドが増え、フィールドの内容を空にしてフォーカスを外すと、そのフィールドごと削除されます。
また、左の十字アイコン部分で、ドラッグアンドドロップによる並べ替えができます。

実際のデータは、MTAppLineBreakField を適用させたテキストエリアに改行区切りで保存されます。

オプション

inputClass（Type : String, Default : 'text full'）

input:text に付けるクラス名を設定します。複数のクラス名を付ける場合は半角スペースで区切ります。
例えば、inputClass: 'text num' とすれば、数字入力用の大きさになります。

sortable（Type : Boolean, Default : true）

ドラッグアンドドロップでのソートを無効にする場合は false を設定します。

サンプル

user.js に以下のコードを記述すると、概要欄のテキストエリアが、フィールド数が増減可能でドラッグアンドドロップで並べ替えもできる1行テキストフィールドなります。

$('#excerpt').MTAppLineBreakField();

実際のデータは、テキストエリアに改行区切りで保存されるので、split モディファイアを利用して、以下のように取り出すことができます（ split モディファイアは、MTAppjQuery をインストールすると使えるようになるグローバルモディファイアです）。

<mt:EntryExcerpt split="
" setvar="excerpt_array">
<mt:Loop name="excerpt_array">
<mt:If name="__first__"><ul></mt:If>
  <li><mt:Var name="__value__"></li>
<mt:If name="__last__"></ul></mt:If>
</mt:Loop>

出力された HTML は次のとおりです。

<ul>
  <li>バッジョ</li>
  <li>クライフ</li>
  <li>ジーコ</li>
</ul>

また、user.js に以下のようなコードを記述すれば、幅の狭いテキスト入力フォームで、ドラッグアンドドロップによる並べ替え機能が無効になります。

$('#excerpt').MTAppLineBreakField({
  inputClass: 'text min',
  sortable: false
});