Jeditable - 即时编辑jQuery插件
官网:http://www.appelsiini.net/projects/jeditable
示例:http://www.appelsiini.net/projects/jeditable/default.html
什么是即时编辑？一般的流程是这样的，当用户点击网页上的文字时，该文字就会出现在一个编辑框中，用户对文字进行修改完成后点击提交按钮，新的文本将发送到服务器上，然后表单消失，显示最新编辑的文本。
基本的使用方法如下：
首先编辑一个 html 文件，包含这么一段：
1
2 <div class="edit" id="div_1">Dolor</div>
3
4 <div class="edit_area" id="div_2">Lorem ipsum dolor sit amet, consectetuer
5
6 adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
7
8 magna aliquam erat volutpat.</div>
然后我们使用如下的 JS 代码来实现即时编辑（要先引入 Jeditable 插件）：
1 $(document).ready(function() {
2
3 $('.edit').editable('http://www.example.com/save.php');
4
5 });
实现不同内容的编辑以及更多的定制项：
1 $(document).ready(function() {
2
3 $('.edit').editable('http://www.example.com/save.php', {
4
5 indicator : 'Saving...',
6
7 tooltip : 'Click to edit...'
8
9 });
10
11 $('.edit_area').editable('http://www.example.com/save.php', {
12
13 type : 'textarea',
14
15 cancel : 'Cancel',
16
17 submit : 'OK',
18
19 indicator : '<img src="img/indicator.gif">',
20
21 tooltip : 'Click to edit...'
22
23 });
24
25 });
上面的定制项包括按钮的文本，提示信息以及提交时的 loading 图片显示等等。
那么当用户点击了确定按钮时，发送到服务器上的是什么数据呢？
数据内容包含了编辑框的 ID 以及新的内容：id=elements_id&value=user_edited_content
你也可以使用下面的方法来修改默认的参数名：
1 $(document).ready(function() {
2
3 $('.edit').editable('http://www.example.com/save.php', {
4
5 id : 'elementid',
6
7 name : 'newvalue'
8
9 });
10
11 });
修改后传递的数据变成：elementid=elements_id&newvalue=user_edited_content
如果单行文本框不注意满足你的要求，可以使用 textarea 多行文本编辑框：
1 $(document).ready(function() {
2
3 $('.edit_area').editable('http://www.example.com/save.php', {
4
5 loadurl : 'http://www.example.com/load.php',
6
7 type : 'textarea',
8
9 submit : 'OK'
10
11 });
12
13 });
另外 Jeditable 还支持下拉选择框哦：
1 $('.editable').editable('http://www.example.com/save.php', {
2
3 data : " {'E':'Letter E','F':'Letter F','G':'Letter G', 'selected':'F'}",
4
5 type : 'select',
6
7 submit : 'OK'
8
9 });
或者你也可以从服务器获取下拉选择的数据内容：
1 <?php
2
3 /* http://www.example.com/json.php */
4
5 $array['E'] = 'Letter E';
6
7 $array['F'] = 'Letter F';
8
9 $array['G'] = 'Letter G';
10
11 $array['selected'] = 'F';
12
13 print json_encode($array);
14
15 ?>
然后通过 loadurl 指定这个服务器输出数据的 URL 地址：
1 $('.editable').editable('http://www.example.com/save.php', {
2
3 loadurl : 'http://www.example.com/json.php',
4
5 type : 'select',
6
7 submit : 'OK'
8
9 });
如果你希望给组件设定不同的样式，可以这样：
1 $('.editable').editable('http://www.example.com/save.php', {
2
3 cssclass : 'someclass'
4
5 });
6
7
8
9 $('.editable').editable('http://www.example.com/save.php', {
10
11 loadurl : 'http://www.example.com/json.php',
12
13 type : 'select',
14
15 submit : 'OK',
16
17 style : 'display: inline'
18
19 });
或者：
1 $('.editable').editable('http://www.example.com/save.php', {
2
3 loadurl : 'http://www.example.com/json.php',
4
5 type : 'select',
6
7 submit : 'OK',
8
9 style : 'inherit'
10
11 });
最后来点高级的内容，如果你希望使用一个 JS 函数而不是 URL 来处理提交，可以这样：
1 $('.editable').editable(function(value, settings) {
2
3 console.log(this);
4
5 console.log(value);
6
7 console.log(settings);
8
9 return(value);
10
11 }, {
12
13 type : 'textarea',
14
15 submit : 'OK',
16
17 });
处理回调：
1 $('.editable').editable('http://www.example.com/save.php', {
2
3 type : 'textarea',
4
5 submit : 'OK',
6
7 callback : function(value, settings) {
8
9 console.log(this);
10
11 console.log(value);
12
13 console.log(settings);
14
15 }
16
17 });
使用附加参数：
1 $(".editable").editable("http://www.example.com/save.php";, {
2
3 submitdata : {foo: "bar"};
4
5 });
6
7 $(".editable").editable("http://www.example.com/save.php";, {
8
9 submitdata : function(value, settings) {
10
11 return {foo: "bar"};
12
13 }
14
15 });
直接从URL获取显示内容：
1 $(".editable").editable("http://www.example.com/save.php";, {
2
3 loadurl : "http://www.example.com/load.php"
4
5
6
7 });
