jQuery插件之jqueryeditableplugin--点击编辑⽂字插件
jeditable是⼀个jquery插件，它的优点是可以就地编辑，并且提交到服务器处理，是⼀个不可多得的就地编辑插件。(注：就地编辑，也有称即时编辑？⼀般的流程是这样的，当⽤户点击⽹页上的⽂字时，该⽂字就会出现在⼀个编辑框中，⽤户对⽂字进⾏修改完成后点击提交按钮，新的⽂本将发送到服务器上，然后表单消失，显⽰最新编辑的⽂本。)，你可以通过这个来亲⾃体验下。
基本的使⽤⽅法如下：
⾸先编辑⼀个 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('ample/save.php');
});
实现不同内容的编辑以及更多的定制项：
$(document).ready(function() {
$('.edit').editable('ample/save.php', {
indicator : '',
tooltip  : 'Click '
});
$('.edit_area').editable('ample/save.php', {
type      : 'textarea',
cancel    : 'Cancel',
submit    : 'OK',
indicator : '<img src="img/indicator.gif">',
tooltip  : 'Click '
});
});
上⾯的定制项包括按钮的⽂本，提⽰信息以及提交时的 loading 图⽚显⽰等等。
那么当⽤户点击了确定按钮时，发送到服务器上的是什么数据呢？
数据内容包含了编辑框的 ID 以及新的内容：id=elements_id&value=user_edited_content
你也可以使⽤下⾯的⽅法来修改默认的参数名：
$(document).ready(function() {
$('.edit').editable('ample/save.php', {
id  : 'elementid',
name : 'newvalue'
});
});
修改后传递的数据变成：elementid=elements_id&newvalue=user_edited_content
如果单⾏⽂本框不注意满⾜你的要求，可以使⽤ textarea 多⾏⽂本编辑框：　
$(document).ready(function() {
$('.edit_area').editable('ample/save.php', {
loadurl  : 'ample/load.php',
jquery修改html内容
type    : 'textarea',
submit  : 'OK'
});
});
另外 Jeditable 还⽀持下拉选择框哦：
$('.editable').editable('ample/save.php', {
data  : " {'E':'Letter E','F':'Letter F','G':'Letter G', 'selected':'F'}",
type  : 'select',
submit : 'OK'
});
或者你也可以从服务器获取下拉选择的数据内容：
<?php
/
* ample/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('ample/save.php', {
loadurl : 'ample/json.php',
type  : 'select',
submit : 'OK'
});
如果你希望给组件设定不同的样式，可以这样：
$('.editable').editable('ample/save.php', {
cssclass : 'someclass'
});
$('.editable').editable('ample/save.php', {
loadurl : 'ample/json.php',
type    : 'select',
submit  : 'OK',
style  : 'display: inline'
}); 
或者：
$('.editable').editable('ample/save.php', {
loadurl : 'ample/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('ample/save.php', {    type    : 'textarea',
submit  : 'OK',
callback : function(value, settings) {
console.log(this);
console.log(value);
console.log(settings);
}
});
使⽤附加参数：
$(".editable").editable("ample/save.php";, {  submitdata : {foo: "bar"};
});
直接从URL获取显⽰内容：
$(".editable").editable("ample/save.php";, {    loadurl : "ample/load.php"
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。