クリックした部分を直接編集させるjQuery。
世にいくつかあるんだけれど、自分的にしっくりこなかったので随分前に書いたヤツを今頃出してみる。
サンプルjquery-editable-text使い方は
スクリプト部
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-editable-text.js"></script>
$(function() {
$("#data1").editableText();
}
こんだけ。
<div id="data1" class="box">あいうえお<br/>
あいうえお<br/>
あいうえお<br/>
</div>
divで囲んだ部分をクリックすると編集出来る。
jQuery-UIのエフェクトを食えるようにしているので、jQuery-UIをロードしていれば
$("#data1").editableText({
effect: [ "highlight", {}, 1000 ]
});
こんな感じで編集に入る際のエフェクトを設定できる。
編集の前後で、関数をフックさせる事も可能。非同期で何かやりたい場合等に便利。
$("#data2").editableText({
before: function(data) {
alert("before: " + data);
return "hoge<br>fuga";
},
after: function(data) {
alert("after: " + data);
return "HOGE<br>FUGA";
}
});
beforeは、エディットに入る前に叩かれ、返した値が編集テキストとして表示される。
afterは、編集後叩かれ、返した値が、画面に表示される。
編集モードの時に表示されるボタンのラベルを変えたい場合は
label: "submit"
こんな感じで。
編集状態に入るきっかけを、ボタン等他のものに変えたい場合、
$("#data3").editableText({
trigger: "#edit-3"
});
triggerの値として、そのきっかけとなるエレメントのIDを指定。
編集状態のテキストボックス、ボタンのスタイルは
editable-text-but
editable-text
上記2つのクラス名で定義してあるので、よろしくどうぞ。
PR
