中国第一Ajax站长门户:www.okajax.com   虚拟主机 域名注册 云主机

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

我要投稿 会员登陆 RSS订阅 本站推荐:
您的位置主页 > Ajax技术 > Ajax框架学习 > jquery.js > 双击编辑之jQuery Editable插件

双击编辑之jQuery Editable插件

2012-02-01    文章来源:互联网    浏览次数:

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

首先用下面代码,在页面中引入jquery和jquery.editable(注意路径的使用)

  1. <SCRIPT language="javascript" type="text/javascript" src="files/jquery.min.js"></SCRIPT> 
  2. <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函数。

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

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

jquery.editable

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

文章评论(查看全部)

看不清楚?单击换一张。
loading.. 评论加载中....
关于我们 - 广告服务 - 版权隐私 - 免责声明 - RSS地图 - 网站地图 - 使用帮助 - 返回顶部