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

$(".editable").editable("http://www.example.com/save.php";, {
   submitdata : function(value, settings) {
       return {foo: "bar"};
   }
});

直接從URL獲取顯示內容：

$(".editable").editable("http://www.example.com/save.php";, {
    loadurl : "http://www.example.com/load.php"

});

英文原文：http://www.appelsiini.net/projects/jeditable