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. oracle 隐藏过长字段

    case                    when length(m.topic)>20 then substr(m.topic,0,20)||'...'                  ...

  2. json返回数据时提示字符串超出长度

    JavaScriptSerializer json = new JavaScriptSerializer(); json.MaxJsonLength = Int32.MaxValue; return ...

  3. [LintCode] Segment Tree Build II 建立线段树之二

    The structure of Segment Tree is a binary tree which each node has two attributes startand end denot ...

  4. hdu Largest Rectangle in a Histogram

    这道题目是一道动态规划的题目,动态规划的点不在面积上,而在每个矩形可左右扩展的坐标上.找出每个矩形最左边和最右边比它高的矩形的下标,最后求面积即可: #include"stdio.h&quo ...

  5. 哈希-4 Values whose Sum is 0 分类: POJ 哈希 2015-08-07 09:51 3人阅读 评论(0) 收藏

    4 Values whose Sum is 0 Time Limit: 15000MS Memory Limit: 228000K Total Submissions: 17875 Accepted: ...

  6. Ubuntu 12.04下PostgreSQL-9.1安装与配置详解(在线安装)

    说明:       我是用root用户在终端登陆的,如果是非root用户,那在命令前需要加上"sudo",你懂的... 第一步:在Ubuntu下安装Postgresql       ...

  7. CF 369C . Valera and Elections tree dfs 好题

    C. Valera and Elections   The city Valera lives in is going to hold elections to the city Parliament ...

  8. sql server Geometry 类型操作 笔记

    sqlGeometry 类型为sql server 2008之后的版本 新加的一种CLR扩展数据类型,为广大sql server开发人员存储几何类型及空间运算提供极大的便利,下面说明geometry类 ...

  9. Hadoop之Hive UDAF TopN函数实现

    public class GenericUDAFTopNRow extends AbstractGenericUDAFResolver { @Overridepublic GenericUDAFEva ...

  10. [Asp.net MVC]Asp.net MVC5系列——Razor语法

    Razor视图引擎是Asp.net MVC3中新扩展的内容,并且也是它的默认视图引擎.还有另外一种Web Forms视图引擎.通过前面的文章可知在Asp.net mvc5中创建视图,默认使用的是Raz ...