云南網(wǎng)站建設(shè)創(chuàng)新企業(yè) 昆明多彩網(wǎng)絡(luò)公司

翻譯了一個(gè)jquery插件：就地編輯插件jeditable

來(lái)源：昆明多彩網(wǎng)絡(luò)公司 日期：2010-02-05 閱讀： 發(fā)表評(píng)論

由多彩原創(chuàng)翻譯的jeditable插件文檔，轉(zhuǎn)載請(qǐng)注明出自：www.akadana.com

基本用法：再head中插入
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.jeditable.mini.js"></script>

<div class="edit" id="div_1">Dolor</div>
<div class="edit_area" id="div_2">test文字</div>

只有一個(gè)強(qiáng)制參數(shù),發(fā)送內(nèi)容的后臺(tái)地址

 $(document).ready(function() {
             $('.edit').editable('http://www.example.com/save.php');
       });
自動(dòng)匹配被編輯元素的寬高，當(dāng)提交的時(shí)候，就提交到save.php
類edit_area可以做為textarea輸入框. 還可以設(shè)置編輯后等待時(shí)文字信息或圖像，編輯前懸停提示框，設(shè)置確定或者取消。

 $(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...'
     });
 });
繼續(xù)...

發(fā)送到服務(wù)器的內(nèi)容？
當(dāng)提交并且發(fā)送以下格式的信息給服務(wù)器：ID=HTML中的ID號(hào)，vause=輸入框的內(nèi)容。

id=elements_id&value=user_edited_content有個(gè)時(shí)候，如果需要改變參數(shù)名稱，比如像下面的格式：

elementid=elements_id&newvalue=user_edited_content那么可以添加2個(gè)參數(shù)

 $(document).ready(function() {
     $('.edit').editable('http://www.example.com/save.php', {
         id   : 'elementid',
         name : 'newvalue'
     });
 });
 
加載外部到內(nèi)容編輯框
設(shè)置loadurl參數(shù)，示例：

 $(document).ready(function() {
     $('.edit_area').editable('http://www.example.com/save.php', {
         loadurl  : 'http://www.example.com/load.php',
         type    : 'textarea',
         submit  : 'OK'
     });
 });
load.php文件應(yīng)該返回純文本的內(nèi)容，而不XHML，因?yàn)橐�顯示在輸入框中，而save.php則應(yīng)該返回XHTML內(nèi)容，另外還有一個(gè)選擇就是標(biāo)記數(shù)據(jù)源參數(shù)。

怎么使用SELECT?
可以使用JSON數(shù)組，這個(gè)數(shù)組通過(guò)data參數(shù)來(lái)設(shè)置，可以考慮通過(guò)loadur來(lái)返回，數(shù)組關(guān)聯(lián)名稱是<option>標(biāo)簽的name,數(shù)組的值則是<option>之間的值

JSON 數(shù)組如以下格式：

{'E':'Letter E','F':'Letter F','G':'Letter G', 'selected':'F'}注意最后一個(gè)選擇，當(dāng)使用 'select'為名稱時(shí),后面跟著默認(rèn)選中的name，示例：

 $('.editable').editable('http://www.example.com/save.php', {
     data   : " {'E':'Letter E','F':'Letter F','G':'Letter G', 'selected':'F'}",
     type   : 'select',
     submit : 'OK'
 });
也可以通過(guò)loadurl外部加載動(dòng)態(tài)的JSON數(shù)據(jù)：

腳本示范：

 <?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加載：

 $('.editable').editable('http://www.example.com/save.php', {
     loadurl : 'http://www.example.com/json.php',
     type   : 'select',
     submit : 'OK'
 });
如果擔(dān)心消耗服務(wù)器資源，可以直接在javascript腳本中設(shè)定，如：

 <?php
 $array['E'] =  'Letter E';
 $array['F'] =  'Letter F';
 $array['G'] =  'Letter G';
 $array['selected'] =  'F';
 ?>
 $('.editable').editable('http://www.example.com/save.php', {
     data   : '<?php print  json_encode($array); ?>',
     type   : 'select',
     submit : 'OK'
 });
如何修飾樣式
可以設(shè)置輸入框的class名稱和樣式參數(shù)，首先，在css中定義css名稱，然后設(shè)置cssclass參數(shù)，第二，可以直接設(shè)置css樣式參數(shù)。如：

 $('.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'
 });
2個(gè)方式都可以設(shè)置inherit屬性，如果不設(shè)置inherit就不會(huì)繼承父屬性，如：

 Lorem <span class="editable" style="display: inline">ipsum</span> dolor
 sit amet.
 $('.editable').editable('http://www.example.com/save.php', {
     loadurl : 'http://www.example.com/json.php',
     type    : 'select',
     submit  : 'OK',
     style   : 'inherit'
 });
 
用提交函數(shù)的方式代替URL $('.editable').editable(function(value, settings) {
     console.log(this);
     console.log(value);
     console.log(settings);
     return(value);
  }, {
     type    : 'textarea',
     submit  : 'OK',
 });
注意函數(shù)必須返回字符串，

Note that function must return string. Usually the edited content. This will be displayed on page after editing is done.

參數(shù)參考
(String) method: 提交方法默認(rèn)為 POST. 最有可能使用Post和Input

(Function) callback: 當(dāng)提交之后調(diào)用的函數(shù)，有2個(gè)參數(shù)(value, settings)，Value包括了From的內(nèi)容，Settings包含了所有插件設(shè)置，原來(lái)的元素的內(nèi)部函數(shù)。

 $('.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);
     }
 });
(String) name: 設(shè)置提交參數(shù)的名稱，默認(rèn)是value。

 $('.editable').editable('http://www.example.com/save.php', {
     name     : 'new_value'
 });
(String) id: 設(shè)置提交的輸入框的ID號(hào). 默認(rèn)是 id.

 $('.editable').editable('http://www.example.com/save.php', {
     id     : 'element_id'
 });
(Mixed) submitdata: 表單提交時(shí)額外的參數(shù)，可以是哈西，或者哈書返回的哈西。

$(".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"};
   }
});
(String) type: 輸入型類型，text, textarea or select. 自己定義的輸入類型的API.

(Integer) rows: 使用textarea時(shí)定義行數(shù).

(Integer) cols: 使用textarea時(shí)定義列數(shù).

(Integer) height: 定義輸入框的高度，單位是像素（px），默認(rèn)是 auto. 意思是自動(dòng)計(jì)算. 也可以設(shè)置為 none.

(Integer) width: 定義輸入框的寬度，單位是像素（px），默認(rèn)是 auto. 意思是自動(dòng)計(jì)算. 也可以設(shè)置為 none.

(Integer) loadurl: 加載外部數(shù)據(jù)到輸入框中，可以是普通字符串，也是JSON

$(".editable").editable("http://www.example.com/save.php";, {
    loadurl : "http://www.example.com/load.php"
});
注意編輯元素的ID會(huì)自動(dòng)添加到查詢字符串，如：

http://www.example.com/load.php?id=element_id
(Integer) loadtype: 使用loadurl時(shí)的請(qǐng)求類型. 默認(rèn)是GET. 可能用的只是GET和 POST之一.

(Mixed) loaddata: 使用loadurl的時(shí)候額外的請(qǐng)求參數(shù)，可以是一個(gè)哈�；蚝瘮�(shù)返回一個(gè)哈希。

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

可以是一個(gè)字符串或者函數(shù)返回的函數(shù). 設(shè)置成編輯框的內(nèi)容。

$(".editable").editable("http://www.example.com/save.php";, {
   data : "Lorem ipsum";
});
$(".editable").editable("http://www.example.com/save.php";, {
    data: function(value, settings) {
      /* Convert <br> to newline. */
      var retval = value.replace(/<br[\s\/]?>/gi, '\n');
      return retval;
    }
});
默認(rèn)如果點(diǎn)擊了編輯框之外就是取消編輯了，也可以設(shè)置 onblur 選項(xiàng)，以下選項(xiàng)

•onblur : cancel 點(diǎn)擊編輯框之外的區(qū)域取消修改，點(diǎn)擊submit按鈕就提交修改。
•onblur : submit 點(diǎn)擊編輯框之外的區(qū)域提交修改
•onblur : ignore 忽略編輯框外部的點(diǎn)擊和按ESC鍵，點(diǎn)擊submit按鈕就提交修改。
可以使用事件響應(yīng)，所有的Jquery時(shí)間都支持，一般使用 click 和 dbclick，單擊和雙擊，還有 mouseover，鼠標(biāo)感應(yīng)。

官方地址：http://www.appelsiini.net/projects/jeditable

更多該作者插件：http://www.appelsiini.net/projects
 
.