jQuery.editableというプラグインを作った。

デモページ

触ってみればわかるが、edit in place(その場編集)ができる。クリックやマウス長押しでテキストを編集開始して、Enterキーを押すか入力フォーム外をクリックすると編集が終了する。編集完了時にあらかじめ登録しておいたcallback関数が呼ばれて入力値が渡される。
似たようなのが他にもいくつかあるけど、callback指定できて簡単に使えるものが無かったので作った。

 

■使い方

読み込んで

<script src='jquery.editable.js' type='text/javascript'></script>
jQueryのセレクタからeditable関数に編集方法（click, dblclick, clickhold, mouseoverなど）とコールバック関数を登録する。
$('span#edit').editable('click', function(e){ alert(e.value); });
e.valueで編集後の値が取れる。e.old_valueで編集前の値が取れるので、e.valueが気に入らなかったら元に戻したりできる。
githubのREADMEを見るとわかりやすい。テキストそのものをクリックだけではなく、横のボタンを押したら編集モードに入るのも作れるようにしてある。

 

■jQuery pluginの作り方

初めてjQuery pluginを作った。
(function($){

  $.fn.editable = function(/* 適当な引数 */){

    /* 適当に処理 */

    return this;

  };

})(jQuery)
と書くと、 $.editable に関数が登録できる。
登録した関数内のthisはjQueryのセレクタで取ったDOM要素が入る。
最後にreturn thisしておくとjQueryのmethod chainが使える。