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请求把结果保存到数据库

时间: 2024-08-31 09:19:40

jquery editable plugin--点击编辑文字插件的相关文章

jquery 文本框点击时文字消失,失去焦点时文字出现

js实现代码:  代码如下 复制代码 <input type="text" value="不推荐这么做" onfocus="if(this.value == '不推荐这么做') this.value = ''" onblur="if(this.value == '') this.value = '不推荐这么做'" /> 我是非常反对把 javascript 写在 html 标签里的,这和 style 写在 html

jQuery Validation Plugin验证插件手动验证_jquery

jquery.validate是jquery旗下的一个验证框架,借助jquery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法,并且对国际化也有很好的支持. 正常的验证模式如下: <form id="ff" action="xxx"> ... <input type="submit" value="提交"> </form> [java] view plaincopy在

jQuery多媒体插件jQuery Media Plugin使用详解_jquery

jQuery Media Plugin是一款基于jQuery的网页媒体播放器插件,它支持大部分的网络多媒体播放器和多媒体格式,比如:Flash, Windows Media Player, Real Player, Quicktime, MP3,Silverlight, PDF.它根据当前的脚本配置,自动将a标签替换成div,并生成object, embed甚至是iframe代码,至于生成object还是embed,jQuery Media会根据当前平台自动判别,因此兼容性方面非常出色.下面这段

jQuery实现点击按钮文字变成input框点击保存变成文字_jquery

废话不多说,直接给大家贴代码了. 具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset="utf-8"> <title>点击按钮文字变成inpu

jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据_jquery

废话不多说了,直接给大家贴代码了. 关键代码如下所示: /// 最近一次使用编辑行 一切正常 ///<summary> ///初始化数据容器 ///</summary> function InitGrid(){ var lastIndex; $("#grid").datagrid({ url:'', loadMsg:'数据加载中,请稍后......', border:false, fitColumns:true, remoteSort:false, onDblC

使用JS或jQuery模拟鼠标点击a标签事件代码

 这篇文章主要介绍了使用JS或jQuery模拟鼠标点击a标签事件代码,需要的朋友可以参考下 代码如下: <a id="alink" href="abc.aspx" style="visibility: hidden;">下一步</a>  $("#alink").click(); // 触发了a标签的点击事件,但是没有触发页面跳转  document.getElementById("alink&

win7系统在office编辑文字输入法快捷键不能切换怎么办

  现在win7纯净版系统都会安装office办公软件,大家可以编辑文字和排列文档,有时候在office编辑文字发现输入法快捷键不能切换,尝试多次还是一样没有效果,就算重启电脑也还是无法解决,怎么办呢?到底是哪里出现问题了呢?带着这个疑问,下面小编以雨林木风win7纯净版系统为例,向大家介绍具体的方法. 1.在word中先打开一个word文件,然后我们点击右上角W图标,然后我们在打开界面点击"文件"菜单下面的"文件-选项"; 2.(如果是其它版本我们可以尝试点击of

java-下面是两张图片,就是点击编辑改变css样式,怎样实现,还要再dialog上点击,实现删除

问题描述 下面是两张图片,就是点击编辑改变css样式,怎样实现,还要再dialog上点击,实现删除 # 解决方案 你下面的标签用div容器float布局,div relative定位,那个xx按钮absolute定位,默认隐藏.点击编辑的时候新增一个样式给div容器,这个样式控制xx的显示. 大概demo如下,居于jquery的,那个xx的样式你自己调整了 <script type="text/javascript" src="http://ajax.aspnetcdn

javascript-JS 点击编辑按钮,显示input边框,可编辑,点击保存按钮,输入框消失,不可编辑

问题描述 JS 点击编辑按钮,显示input边框,可编辑,点击保存按钮,输入框消失,不可编辑 就类似编辑资料的,都是输入框,点击编辑可以编辑输入框内的内容,点击保存输入框消失 解决方案 自己做个样式不显示控件input的边框就好了,默认readonly不允许编辑.点击编辑的时候加上边框样式,去掉readonly属性 <style>.readonly input{border:none}</style> <div id="dvInput" class=&qu