Jeditable - jQuery就地编辑插件使用

 jeditable是一个jquery插件，它的优点是可以就地编辑，并且提交到服务器处理，是一个不可多得的就地编辑插件。(注： 就地编辑，也有称即时编辑？一般的流程是这样的，当用户点击网页上的文字时，该文字就会出现在一个编辑框中，用户对文字进行修改完成后点击提交按钮，新的文本将发送到服务器上，然后表单消失，显示最新编辑的文本。),你可以通过这个 演示页面来亲自体验下。

    官网: http://www.appelsiini.net/projects/jeditable

基本的使用方法如下：

首先编辑一个 html 文件，包含这么一段：

Dolor
Lorem ipsum dolor sit amet, consectetuer 
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
magna aliquam erat volutpat.

然后我们使用如下的 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 : '',
        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'
});

 

或者你也可以从服务器获取下拉选择的数据内容：

然后通过 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

已有 0 人发表留言，猛击->> 这里<<-参与讨论


ITeye推荐

• —软件人才免语言低担保 赴美带薪读研！—