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

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

上一篇:PHP intval()


下一篇:Lucene核心--构建Lucene搜索(下篇,理论篇)