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" });