Jeditable - jQuery就地编辑插件使用

 

jeditable是一个jquery插件,它的优点是可以就地编辑,并且提交到服务器处理,是一个不可多得的就地编辑插件。(注: 就地编辑,也有称即时编辑?一般的流程是这样的,当用户点击网页上的文字时,该文字就会出现在一个编辑框中,用户对文字进行修改完成后点击提交按钮,新的文本将发送到服务器上,然后表单消失,显示最新编辑的文本。),你可以通过这个演示页面来亲自体验下。

官网:http://www.appelsiini.net/projects/jeditable

基本的使用方法如下:

首先编辑一个 html 文件,包含这么一段:

  1. <div class="edit" id="div_1">Dolor</div>
  2. <div class="edit_area" id="div_2">Lorem ipsum dolor sit amet, consectetuer
  3. adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
  4. magna aliquam erat volutpat.</div>

然后我们使用如下的 JS 代码来实现即时编辑(要先引入 Jeditable 插件):

  1. $(document).ready(function() {
  2. $('.edit').editable('http://www.example.com/save.php');
  3. });

实现不同内容的编辑以及更多的定制项:

 
  1. $(document).ready(function() {
  2. $('.edit').editable('http://www.example.com/save.php', {
  3. indicator : 'Saving...',
  4. tooltip : 'Click to edit...'
  5. });
  6. $('.edit_area').editable('http://www.example.com/save.php', {
  7. type : 'textarea',
  8. cancel : 'Cancel',
  9. submit : 'OK',
  10. indicator : '<img src="img/indicator.gif">',
  11. tooltip : 'Click to edit...'
  12. });
  13. });
 

上面的定制项包括按钮的文本,提示信息以及提交时的 loading 图片显示等等。

那么当用户点击了确定按钮时,发送到服务器上的是什么数据呢?

数据内容包含了编辑框的 ID 以及新的内容:id=elements_id&value=user_edited_content

你也可以使用下面的方法来修改默认的参数名:

  1. $(document).ready(function() {
  2. $('.edit').editable('http://www.example.com/save.php', {
  3. id : 'elementid',
  4. name : 'newvalue'
  5. });
  6. });

修改后传递的数据变成:elementid=elements_id&newvalue=user_edited_content

如果单行文本框不注意满足你的要求,可以使用 textarea 多行文本编辑框: 

 
  1. $(document).ready(function() {
  2. $('.edit_area').editable('http://www.example.com/save.php', {
  3. loadurl : 'http://www.example.com/load.php',
  4. type : 'textarea',
  5. submit : 'OK'
  6. });
  7. });
 

另外 Jeditable 还支持下拉选择框哦:

  1. $('.editable').editable('http://www.example.com/save.php', {
  2. data : " {'E':'Letter E','F':'Letter F','G':'Letter G', 'selected':'F'}",
  3. type : 'select',
  4. submit : 'OK'
  5. });

或者你也可以从服务器获取下拉选择的数据内容:

 
  1. <?php
  2. /* http://www.example.com/json.php */
  3. $array['E'] = 'Letter E';
  4. $array['F'] = 'Letter F';
  5. $array['G'] = 'Letter G';
  6. $array['selected'] = 'F';
  7. print json_encode($array);
  8. ?>
 

然后通过 loadurl 指定这个服务器输出数据的 URL 地址:

  1. $('.editable').editable('http://www.example.com/save.php', {
  2. loadurl : 'http://www.example.com/json.php',
  3. type : 'select',
  4. submit : 'OK'
  5. });

如果你希望给组件设定不同的样式,可以这样:

 
  1. $('.editable').editable('http://www.example.com/save.php', {
  2. cssclass : 'someclass'
  3. });
  4.  
  5. $('.editable').editable('http://www.example.com/save.php', {
  6. loadurl : 'http://www.example.com/json.php',
  7. type : 'select',
  8. submit : 'OK',
  9. style : 'display: inline'
  10. });  
 

或者:

  1. $('.editable').editable('http://www.example.com/save.php', {
  2. loadurl : 'http://www.example.com/json.php',
  3. type : 'select',
  4. submit : 'OK',
  5. style : 'inherit'
  6. });

最后来点高级的内容,如果你希望使用一个 JS 函数而不是 URL 来处理提交,可以这样:

 
  1. $('.editable').editable(function(value, settings) {
  2. console.log(this);
  3. console.log(value);
  4. console.log(settings);
  5. return(value);
  6. }, {
  7. type : 'textarea',
  8. submit : 'OK',
  9. });
 

处理回调: 

 
  1. $('.editable').editable('http://www.example.com/save.php', {
  2. type : 'textarea',
  3. submit : 'OK',
  4. callback : function(value, settings) {
  5. console.log(this);
  6. console.log(value);
  7. console.log(settings);
  8. }
  9. });
 

使用附加参数:

  1. $(".editable").editable("http://www.example.com/save.php";, {
  2. submitdata : {foo: "bar"};
  3. });
 

直接从URL获取显示内容:

  1. $(".editable").editable("http://www.example.com/save.php";, {
  2. loadurl : "http://www.example.com/load.php"
  3.  
  4. });

英文原文:http://www.appelsiini.net/projects/jeditable

 

作   者:孟晨

Jeditable 点击编辑文字插件的更多相关文章

  1. jQuery插件之jquery editable plugin--点击编辑文字插件

    jeditable是一个jquery插件,它的优点是可以就地编辑,并且提交到服务器处理,是一个不可多得的就地编辑插件.(注: 就地编辑,也有称即时编辑?一般的流程是这样的,当用户点击网页上的文字时,该 ...

  2. 关于div文字点击编辑的插件

    (function(w,i){ w.inputOut = new i(); })( window, function(){ var inputOut = function(){ this.into = ...

  3. 【C#/WPF】TextBlock/TextBox/Label编辑文字的问题

    标题有点描述不清,就当是为了方便自己用时易于搜索到. 总之需求是:显示用户信息(文字)时,允许用户编辑自己的信息. 效果图如下: 点击[编辑]按钮前: 点击[编辑]按钮后,允许编辑: 别吐槽为甚性别还 ...

  4. 点击复制文字到剪贴板兼容性安卓ios

    一般那种活动H5分享可能会用到点击复制文字到剪贴板,很简单的功能 于是搜了一搜:js复制文字到剪贴板,可用结果大致分为两类: 一类是js原生方法,这种方法兼容性不好,不兼容ios: https://d ...

  5. 鼠标点击输入框文字消失 value placeholder 以及JQ实现效果 (仿京东的输入框效果)

    鼠标点击输入框文字消失 value实现方法  placeholder实现方法     以及JQ实现placeholder效果 <input type="text" value ...

  6. 点击按钮文字变成input框,点击保存变成文字

    <!DOCTYPE html><html lang="en"> <head> <meta http-equiv="Content ...

  7. jquery - 通过点击切换文字内容

    今天要写一个简单的显示/隐藏效果,本以为是挺简单的事儿,没想到还真因为基本功不扎实遇到了问题,这里跟大家分享一下. 百度了很多方法,精简能用的干货实在太少,最后还是通过去查jq的官方api才找到了解决 ...

  8. ASP.NET - GridView实现点击编辑列

    加载: 点击编辑: 数据库设计: 前端代码: DataKeyNames="ID"  设置点击“编辑”选项的时候,要获取的值,一般获取ID主键,便于修改数据. AutoGenerat ...

  9. SpannableString可以被点击的文字

    1 TextView tv= (TextView) findViewById(R.id.textview_z); String text="一段可以被点击点击的文字,文字可以变成图片&quo ...

随机推荐

  1. 使用Sublime Text 2编辑和运行node-webkit应用程序

    开发工具目录结构 --E:\develop\ ----node-webkit-v0.9.2-win-ia32 ----Sublime Text 2.0.2 x64 为Sublime text2构建Bu ...

  2. PB数据库相关

    ---------------------------------------------------------------- 数据库画板: 一张表定义了主键或者唯一索引,则能够在Results视窗 ...

  3. 垂死或涅槃重生 -- Delphi XE5 我们将宣布感情的回归

    Delphi 在很大程度上是一个被遗忘我的工具. 无论是在使用RapidSql , 我还没有收到Embarcadero 本公司发行参与邀请Delphi XE5该公告将. 可能有人会问,为什么Embar ...

  4. Path相关评论的方法(一)

    以前的主要是关于Canvas的translate(平移) .scale(缩放) .rotate(旋转) .skew(错切).接下来几篇主要讲下android里的Path(封装了贝塞尔曲线)&  ...

  5. Linux日志清除

    因为数据要求.经常需要抓住和筛选过滤数据,大概花了7 8个月.改变了机旁数据.重新开始,发现"No space left on device" 解决方法: 直接删除日志(简单粗暴) ...

  6. 悼念传奇,约翰询问&#183;纳什和他的妻子艾丽西亚致敬,创建一个传奇,爱数学

    约翰·阅读·纳什的传记.我渴望录制通道 我一直相信数字,无论逻辑方程使我们认为.但这种追求一生的后,我问自己:"这是什么逻辑?谁决定的理由?"我的探索让我从物理到形而上,最后到了妄 ...

  7. cocos2d触摸事件处理机制(2.x和3.x变化)

    2.x的触摸事件的版本号 触摸事件处理有2种子.以下单点触摸的样本.(另一种多点触摸屏). 创建cocos2d 该项目. 1. 重写下面虚函数. bool ccTouchBegan(cocos2d:: ...

  8. JavaScript向select下拉框中加入和删除元素

    JavaScript向select下拉框中加入和删除元素 1.说明 a   利用append()方法向下拉框中加入元素 b   利用remove()方法移除下拉框中最后一个元素 2.设计源代码 < ...

  9. statickeyword于C和C++用法

    一.C语言statickeyword两个使用 1).一个功能修改内部使用的变量,函数内的静态变量.这些变量的寿命比功能不再,它是具有一定的函数"状态",使用静态变量的作用通常是不可 ...

  10. repeater操作

    protected void rpRole_ItemDataBound(object sender, RepeaterItemEventArgs e) { if (e.Item.ItemType == ...