什么是即时编辑？一般的流程是这样的，当用户点击网页上的文字时，该文字就会出现在一个编辑框中，用户对文字进行修改完成后点击提交按钮，新的文本将发送到服务器上，然后表单消失，显示最新编辑的文本。

你可以通过这个演示页面来亲自体验下。

基本的使用方法如下：

首先编辑一个 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"};  });

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

直接从URL获取显示内容：

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

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