ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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

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

X-editable :: In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery

X-editable Demo

vitalets/x-editable

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2