`
hudeyong926
  • 浏览: 2035026 次
  • 来自: 武汉
社区版块
存档分类
最新评论

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

 

  • 大小: 12.4 KB
分享到:
评论
1 楼 aaronhugo 2011-04-26  
这个还真是好东西哈,学习哈。

相关推荐

    JEditTable,jquery Ajax编辑工具

    在提供的压缩包中,`jquery editable plugin--点击编辑文字插件`可能包含了一个简单的示例,演示了如何使用JEditTable创建一个可编辑的表格。这个例子通常包括HTML结构、CSS样式和初始化JEditTable的JavaScript代码...

    editable-jquery-plugin:一个有趣的小 jQuery 插件,可让您编辑元素的内容或样式

    可编辑的 jquery 插件 一个有趣的小 jQuery 插件,可让您编辑元素的内容或样式。 文档:可编辑,jQuery 插件 作者:弗兰克·M·泰勒 依赖项:jQuery 1.8.3.min.js 要求:浏览器启用 contenteditable 和 scoped ...

    240多个jQuery UI插件

    - **jQuery Plugin - Another In-Place Editor**: 另一种就地编辑插件。 - **Table Editor**: 表格单元格编辑插件。 - **tEditable - in-place table editing for jQuery**: 在表格中实现就地编辑。 #### 多媒体...

    docpag-editable-blog

    2. **增加插件**:通过 `docpad-plugin-*` 搜索并安装需要的插件,增强功能。 3. **定制布局**:修改 _layouts 文件夹中的模板文件,调整页面结构。 4. **配置元数据**:在文章头部添加自定义元数据字段,实现更多元...

    105-plugin-BadassEditableInputs

    Badass Editable Inputs 是一个 jQuery 插件,它可以让你添加一个超酷的模式和输入表单,而不会让它看起来像一个输入表单。 入门: 首先下载 .js 和 .css 文件并将其复制到您的目录中。 如果您还没有,请从您的 ...

    jQuery列表 欢迎下载

    - **jQueryeditable**: 与Jeditable类似,但提供更多配置选项。 - **jQueryDisableTextSelectPlugin**: 防止文本被选中,常用于防止用户复制网页内容。 - **TableEditor**: 用于表格内数据编辑的插件。 - **...

    bootstrap plugins and jquery plugins

    首先,我们来看 `bootstrap-editable`,这是一个在 Bootstrap 框架下的可编辑元素插件。它允许用户直接在页面上编辑文本、链接等元素,提高了用户与网站的交互性。这个插件通常用于数据表或者信息展示区域,用户可以...

    jquery grid plungin demo

    本篇将深入探讨"jquery grid plugin demo",通过代码示例解析其核心功能与应用场景。 jQuery Grid是一款基于jQuery的表格插件,它允许开发者创建具有分页、排序、搜索和过滤功能的数据网格。这个插件通常被称为...

    25种精品JQuery时间控件

    12. **x-editable datetime**:用于在页面上直接编辑日期和时间的插件,支持即时更新,可自定义显示格式。 13. **Moment.js with Picker**:结合了强大的Moment.js库,提供了简单易用的时间选择器,支持复杂日期...

    ACE Admin官方文档(最新)

    网页图标全采用FontAwesome,除Bootstrap,jQuery UI使用到的第三方插件有: jQuery 2.0.3 jQuery UI 1.10.3 (Custom Build) Twitter Bootstrap 3.0.0 FontAwesome 3.2.1 Google "Open Sans" Font jQuery Flot ...

    Bootstrap ACE后台管理界面模板(扁平化)

    网页图标全采用FontAwesome,除Bootstrap,jQuery UI使用到的第三方插件有: jQuery 2.0.3 jQuery UI 1.10.3 (Custom Build) Twitter Bootstrap 3.0.0 FontAwesome 3.2.1 Google "Open Sans" Font jQuery Flot ...

Global site tag (gtag.js) - Google Analytics