橋本商会

クリックするとinputタグになるのはいいけど、textareaにはできないの？という質問が来たので、実装した。

デモ

こういうところをクリックすると


編集できるようになって


枠外をクリックすると保存される


edit-in-place（その場編集）プラグインはいくつか存在するけど、jQuery.editableは最も使いやすいAPIを出していると思います。
他のは・・あまりカッコよく書けない。

clickしたら編集し、編集終了後の値をコールバックで取得するのはこう書ける。
click以外にもmouseover, dblclick, clickholdなどトリガーは色々設定できる。

$("span#edit").editable("click", function(e){

  alert(e.value);

});

値をチェックして、条件に合わなかったら元の値に戻すこともできる（validatorがわり）

$("span#zip").editable("click", function(e){

  if( !e.value.match(/^\d{3}\-\d{4}$/) ){

    e.target.html(e.old_value);

    alert(e.value + " is not valid zip-code");

  }

});

編集するテキスト以外のDOM要素をトリガーにする事もできる。この場合は横に「編集ボタン」があってそれを押したら編集モードになる。編集中はトリガーになった要素はhide()される。

var option = {trigger : $("input#btn_edit"), action : "click"};

$("span#edit").editable(option, function(e){

  alert(e.value);

});

今回追加したtextarea版はこうやる。type: “textarea”を指定すればtextareaになり、その中は複数行の編集ができる。

var option = {type : "textarea", action : "click"};

$("p#license").editable(option, function(e){

  alert(e.value);

});

のgithub pagesを作ってみた

jQuery.editable


30分ぐらいで作れるので楽しい。

けっこう増えてきた http://shokai.github.com

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が使える。