当前位置: 代码迷 >> Web前端 >> jQuery插件之jquery editable plugin-点击编者文字插件
  详细解决方案

jQuery插件之jquery editable plugin-点击编者文字插件

热度:610   发布时间:2012-11-23 22:54:33.0
jQuery插件之jquery editable plugin--点击编辑文字插件

这是一个真正可定制的jQuery editable plugin。当前它能够将任意不可编辑的标签(span、div、p...等)转换成可编辑的text input、password、textarea、下拉列表(drop-down list)等标签。你可以利用它的editableFactory对象来扩展添加自己所需的input type。

??? 先引入插件的js文件,在页面放置要编辑的文字:

??? <div class="d">编辑的文字</div>

??? 接着就是实现功能了

??? $(".d").editable();

??? 很简单吧!要实现更多的效果就要给这个插件带入些参数了,若不带参数,是使用插件默认的。

??? 你可以象下面这样使用:
??? $(selector).editable('disable')
??? $(selector).editable('enable')
??? $(selector).editable('destroy')

??? 上面的三个实例我想不说明你也知道是什么意思了,不明白可以自己亲自试试看,关键我们看看下面的用法
???? $(selector).editable(options)

??? 这个options就稍有点复杂,使用是以下面的形式:
???? $(selector).editable({
??? ? ?? type:
???????? editBy:
???????? submitBy:
??? ? ?? submit:
??? ? ?? ...
??? ? })

我只说几个用的多一点的参数,其他的可以自己看官网。type :可以是 'text','password',textarea','select'

??? 比如:
???? $(selector).editable({type:textarea})??

??? 若type是select,就要另外给select指定option了
???? $(".d").editable({
???????? type:select,
???????? options:{'选项1':'值1','选21':'21','选项3':'值3'}
???? });

?

editBy :可以是'click','dblclick','change','blur',就是说是单击的时候编辑还是双击的时候编辑,...

editClass :编辑的时候的样式

submitBy :提交的方式,可以是 'blur','dblclick','change','click'

onSubmit :提交的时候执行的函数

说了这么多,大家能关心的是既然可以编辑文字,那怎么把编辑后的结果保存呢??这个就要用到onSubmit了,我们可以在onSubmit的时候调用一个函数,执行ajax请求把结果保存到数据库。

?

1 楼 aaronhugo 2011-04-26  
这个还真是好东西哈,学习哈。
  相关解决方案