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

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

基本的使用方法如下:

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

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

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

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

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

 
$(document).ready(function() {
    $('.edit').editable('http://www.example.com/save.php', {
        indicator : 'Saving...',
        tooltip   : 'Click to edit...'
    });
    $('.edit_area').editable('http://www.example.com/save.php', {
        type      : 'textarea',
        cancel    : 'Cancel',
        submit    : 'OK',
        indicator : '<img src="img/indicator.gif">',
        tooltip   : 'Click to edit...'
    });
});
 

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

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

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

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

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

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

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

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

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

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

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

 
<?php
 /* http://www.example.com/json.php */
 $array['E'] =  'Letter E';
 $array['F'] =  'Letter F';
 $array['G'] =  'Letter G';
 $array['selected'] =  'F';
 print json_encode($array);
?>
 

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

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

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

 
$('.editable').editable('http://www.example.com/save.php', {
    cssclass : 'someclass'
});

$('.editable').editable('http://www.example.com/save.php', {
    loadurl : 'http://www.example.com/json.php',
    type    : 'select',
    submit  : 'OK',
    style   : 'display: inline'
});  
 

或者:

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

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

 
$('.editable').editable(function(value, settings) {
    console.log(this);
    console.log(value);
    console.log(settings);
    return(value);
 }, {
    type    : 'textarea',
    submit  : 'OK',
});
 

处理回调: 

 
$('.editable').editable('http://www.example.com/save.php', {
    type     : 'textarea',
    submit   : 'OK',
    callback : function(value, settings) {
        console.log(this);
        console.log(value);
        console.log(settings);
    }
});
 

使用附加参数:

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

直接从URL获取显示内容:

$(".editable").editable("http://www.example.com/save.php";, {
    loadurl : "http://www.example.com/load.php"

});

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

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

  1. Jeditable 点击编辑文字插件

    Jeditable - jQuery就地编辑插件使用   jeditable是一个jquery插件,它的优点是可以就地编辑,并且提交到服务器处理,是一个不可多得的就地编辑插件.(注: 就地编辑,也有称 ...

  2. (转)jQuery Validation Plugin客户端表单证验插件

    jQuery Validation Plugin客户端表单验证插件 官方文档:http://jqueryvalidation.org/documentation/ 官方demo:http://jque ...

  3. Eclipse安装插件支持jQuery智能提示

    Eclipse安装插件支持jQuery智能提示 最近工作中用到jQuery插件,需要安装eclipse插件才能支持jQuery智能提示,在网上搜索了一下,常用的有三个插件支持jQuery的智能提示:1 ...

  4. jQuery为开发插件提拱了两个方法:jQuery.fn.extend(); jQuery.extend();

    jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); jQuery.fn jQuery.fn = jQuery.prototype ...

  5. jQuery时间轴插件:jQuery Timelinr

    前言 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚动.支持键盘方向键.经过扩展后可以支持鼠标滚轮事件. ...

  6. 从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件

    一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些许秘籍. 本文是介绍两个最常用的jQuery插件. 分别用 ...

  7. jQuery学习之路(8)- 表单验证插件-Validation

    ▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...

  8. 图片放大功能插件及jquery.extend函数理解

    前端时间,产品提出社区评论中的图片需要有放大功能.感觉可以共用,所以就想整合一个插件,过程中也借鉴了一些例子. 分析下自己的代码思路: var scaleImg = function(opts) { ...

  9. [译] EXTENDING JQUERY &ndash; 2.2 A simple plugin

    2.2 一个简单的插件示例 jQuery 插件能做任何事情,这个已经由浩如烟海的各类第三方插件如证明.小到只影响一个元素,大到改变多个元素的外观和行为,jQuery 的各种功能等你来扩展. 2.2.1 ...

随机推荐

  1. 如何安装 第三方 Go 离线包? (GOPATH、 go install)

    有时候 go get 比较慢,可以考虑用迅雷等下载工具下载下来,然后再本地安装, 如:code.google.com/p/go.net/websocket,如何安装这些离线包? 先在你的 GOPATH ...

  2. ASP.NET(转自wiki)

    ASP.NET是由微软在.NET Framework框架中所提供,开发Web应用程序的类库,封装在System.Web.dll文件中,显露出System.Web名字空间,并提供ASP.NET网页处理. ...

  3. [python]获取文件夹下所有文件名

    #---picknames.py---import os filenames = os.listdir(os.getcwd()) for name in filenames: print(name)

  4. Bootstrap~多级导航(级联导航)的实现

    回到目录 在bootstrap官方来说,导航最多就是两级,两级以上是无法实现的,大叔找了一些第三方的资料,终于找到一个不错的插件,使用上和效果上都还不错,现在和大家分享一下 插件地址:http://v ...

  5. JavaWeb---总结(八)HttpServletResponse对象(二)

    一.HttpServletResponse常见应用--生成验证码 1.1.生成随机图片用作验证码 生成图片主要用到了一个BufferedImage类, 生成随机图片范例: 1 package gacl ...

  6. [CareerCup] 15.6 Entity Relationship Diagram 实体关系图

    15.6 Draw an entity-relationship diagram for a database with companies, people, and professionals (p ...

  7. ViewPager图片轮转带点的

    布局页面设置: <?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:and ...

  8. Angular 使用

    tks: 使用: http://developer.51cto.com/art/201302/380661.htm http://www.infoq.com/cn/news/2013/02/angul ...

  9. 【Linux C中文函数手册】之 内存和字符串函数

    内存和字符串函数 1) bcmp 比较内存内容 相关函数 bcmp,strcasecmp,strcmp,strcoll,strncmp,strncasecmp表头文件 #include<stri ...

  10. .Net 中资源的使用方式

    近期要在小丸工具箱中添加一个启动画面,画面中需要使用一个GIF动图.经过学习和实验,总结了几个读取资源的方式,罗列如下. 一.使用外部资源 Image img = Image.FromFile(&qu ...