博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery editable plugin--点击编辑文字插件
阅读量:6893 次
发布时间:2019-06-27

本文共 1047 字,大约阅读时间需要 3 分钟。

这是一个真正可定制的 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请求把结果保存到。

转载地址:http://wcudl.baihongyu.com/

你可能感兴趣的文章
定时拍照功能
查看>>
[Unity3d]SecurityException报错解决办法
查看>>
SCVMM创建Linux虚拟机模版
查看>>
添加 Pool Member - 每天5分钟玩转 OpenStack(123)
查看>>
NSDECODER v1.0
查看>>
游侠原创:vmware下android-x86-4.4-RC1体验
查看>>
OpenMNS--管理网络的绝好工具
查看>>
ORACLE LINUX 6.1安装过程
查看>>
iPhone/Mac Objective-C内存管理原理
查看>>
整理Silverlight资源列表(三)-SL实际运用案例
查看>>
02-BGP选路原则和属性详解--weight
查看>>
7.[数据结构和算法分析笔记]词典 Dictionary
查看>>
CCNP精粹系列之八----帧中继全网拓扑试验配置
查看>>
Lync升级S4B秘籍,So Easy!!!
查看>>
SpringBoot整合mybatis、shiro、redis实现基于数据库的细粒度动态权限管理系统实例...
查看>>
android用户界面-组件Widget-进度条ProgressBar
查看>>
猜字谜小游戏编程
查看>>
【OneNote Mobile】 如何处理便签内容的格式?
查看>>
Algeco Scotsman将召开2016年第三季度业绩电话会议
查看>>
新加坡IMDA计划进行Li-Fi测试
查看>>