skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

高機能な文字書き換えjavascript「class.editInPlace.js」

｜ ｜ ｜ ｜ ｜ ｜ ｜

WEB2.0と言われる昨今、サイト上で文字を書き換えられるケースが増えています。
class.editInPlace.jsはEditInPlaceと呼ばれる文字を書き換えられるjavascriptを公開しています。

使用方法
class.editInPlace.jsのzipファイルをダウンロードします。
<script type="text/javascript" src="http://yourdomain/mootools.js"></script>
<script type="text/javascript" src="http://ypourdomain/class.editInPlace.js"></script>
<link rel="stylesheet" href="http://yourdomain/web.css" type="text/css">
<script type="text/javascript">
window.addEvent('domready',function(){
new editInPlace($$('要素名'));
});
</script>
上記のように記述すると、指定した要素が書き換え可能になります。
オプション
　・maxlength:10, //文字数
　・tip:'書き換え可能' //ツールチップの文字（falseで非表示）
　・type:'textarea' //CSSのクラス名
　・hover_css_class:'othercsshover' //hover時CSSのクラス名
　・select_items:[{text:'土'},{text:'水'},{text:'火'}] //書き換え時に選択肢を付ける
全部書くと以下の様になります。
<script type="text/javascript">
window.addEvent('domready',function(){
new editInPlace($$('要素名'),{
maxlength:10,
tip:'書き換え可能'
hover_css_class:'othercsshover',
type:'select',
select_items:[
{text:'土'},
{text:'水'},
{text:'火'}
]
});
});
</script>
高機能な文字書き換えjavascript「class.editInPlace.js」サンプル

記事作成：2007年11月10日

前の記事：Movable Typeでアンケートを作成できるプラグイン「Polls」
次の記事：タグを簡単にフォームに挿入するjavascript「jTagging」