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

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

使用方法
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」サンプル

sponsors

「高機能な文字書き換えjavascript「class.editInPlace.js」」をシェアする

記事作成:
記事URL:

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