双击编辑之jQuery Editable插件 - okajax.com - Ajax中国

在不少大程序，包括discuz上经常看到，双击页面的一段文本，竟然可以直接编辑，挺神奇一个功能，今天介绍一个jquery插件，实现这个功能只在瞬间。jQuery editable plugin它能够将任意不可编辑的标签（span、div、p...等）转换成可编辑的text input、password、textarea、下拉列表（select）等标签。

首先用下面代码，在页面中引入jquery和jquery.editable（注意路径的使用）

<SCRIPT language="javascript" type="text/javascript" src="files/jquery.min.js"></SCRIPT> 
<script language="javascript" type="text/javascript" src="files/jquery.editable-1.3.3.js"></script> 

 然后用$取得你要实现双机编辑的块，例如下面代码中的$("#note")，即为id为note的div。然后设置下面几个参数

1、editby：触发事件，例如双机、单击等。

2、type：双机后可编辑区域变成哪种表单，例如textarea、input、select等。

3、editclass：第二条所说的表单所采用的样式。

4、onsubmit：当鼠标单击可编辑区域以外的地方时，将数据提交到服务器的ajax函数。

$(function(){$(document).ready(function(){  
    $("#note").editable({editBy:"dblclick",type:"textarea",editClass:'note_area',onSubmit:onSub});});  
 

 下面有一个例子，后台使用的asp+access方便演示。

jquery.editable

我测试时使用的jquery1.3版本，因此jquery1.3版本以上可用。