その場でデータを編集。BootstrapやjQuery UIに対応した「X-editable」 // MOONGIFT Archived

X-editableはBoostrapやjQuery/jQuery UIで使えるIn-place Editorです。

表示されている内容を編集する際にその場ですぐに編集できるようにするのがIn-place Editorです。それをBootstrap、jQuery UIなどに対応させたのがX-editableになります。

こんな感じでポップアップで編集できます。

エラー表示にも対応。

カレンダーでの入力。

選択式も可能です。

インラインで編集もできます。

こちらはjQuery UI版。

この場合も選択式などが使えます。

X-editableは単純な文字列入力の他に、選択やテキストエリアでの入力にも対応しています。入力チェックも可能で、エラーの際にそのまま表示を残せます。純粋なjQueryにも対応しているのでWebサービスに組み込んでみるのはいかがでしょう。

X-editableはJavaScript/jQuery製のオープンソース・ソフトウェア（MIT License）です。

MOONGIFTはこう見る

In-place Editorの仕組みはユーザビリティを高くする他、編集項目を必要なものだけに限ることができるのでより手軽に編集を可能にします。ただしサーバサイドにとっては入力の必須チェックにおいて注意が必要です。

また、パスワード入力やその他を選んだ時にある項目を必須にするといったようなフローが必要な場合はやり方を考える必要があります。また、入力の一部だけで対応してもそれほど便利さを感じませんので、統一されたインタフェースとしての提供をお勧めします。