翻譯了一個jquery插件：就地編輯插件jeditable
來源：昆明多彩網(wǎng)絡公司 日期：2010-02-05 閱讀： 發(fā)表評論
由多彩原創(chuàng)翻譯的jeditable插件文檔，轉載請注明出自：m.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>
只有一個強制參數(shù),發(fā)送內(nèi)容的后臺地址
$(document).ready(function() {
$('.edit').editable('http://www.example.com/save.php');
});
自動匹配被編輯元素的寬高，當提交的時候，就提交到save.php
類edit_area可以做為textarea輸入框. 還可以設置編輯后等待時文字信息或圖像，編輯前懸停提示框，設置確定或者取消。
$(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ā)送到服務器的內(nèi)容？
當提交并且發(fā)送以下格式的信息給服務器：ID=HTML中的ID號，vause=輸入框的內(nèi)容。
id=elements_id&value=user_edited_content有個時候，如果需要改變參數(shù)名稱，比如像下面的格式：
elementid=elements_id&newvalue=user_edited_content那么可以添加2個參數(shù)
$(document).ready(function() {
$('.edit').editable('http://www.example.com/save.php', {
id : 'elementid',
name : 'newvalue'
});
});
加載外部到內(nèi)容編輯框
設置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文件應該返回純文本的內(nèi)容，而不XHML，因為要顯示在輸入框中，而save.php則應該返回XHTML內(nèi)容，另外還有一個選擇就是標記數(shù)據(jù)源參數(shù)。
怎么使用SELECT?
可以使用JSON數(shù)組，這個數(shù)組通過data參數(shù)來設置，可以考慮通過loadur來返回，數(shù)組關聯(lián)名稱是<option>標簽的name,數(shù)組的值則是<option>之間的值
JSON 數(shù)組如以下格式：
{'E':'Letter E','F':'Letter F','G':'Letter G', 'selected':'F'}注意最后一個選擇，當使用 'select'為名稱時,后面跟著默認選中的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'
});
也可以通過loadurl外部加載動態(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'
});
如果擔心消耗服務器資源，可以直接在javascript腳本中設定，如：
<?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'
});
如何修飾樣式
可以設置輸入框的class名稱和樣式參數(shù)，首先，在css中定義css名稱，然后設置cssclass參數(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個方式都可以設置inherit屬性，如果不設置inherit就不會繼承父屬性，如：
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: 提交方法默認為 POST. 最有可能使用Post和Input
(Function) callback: 當提交之后調(diào)用的函數(shù)，有2個參數(shù)(value, settings)，Value包括了From的內(nèi)容，Settings包含了所有插件設置，原來的元素的內(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ù)的名稱，默認是value。
$('.editable').editable('http://www.example.com/save.php', {
name : 'new_value'
});
(String) id: 設置提交的輸入框的ID號. 默認是 id.
$('.editable').editable('http://www.example.com/save.php', {
id : 'element_id'
});
(Mixed) submitdata: 表單提交時額外的參數(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ù).
(Integer) cols: 使用textarea時定義列數(shù).
(Integer) height: 定義輸入框的高度，單位是像素（px），默認是 auto. 意思是自動計算. 也可以設置為 none.
(Integer) width: 定義輸入框的寬度，單位是像素（px），默認是 auto. 意思是自動計算. 也可以設置為 none.
(Integer) loadurl: 加載外部數(shù)據(jù)到輸入框中，可以是普通字符串，也是JSON
$(".editable").editable("http://www.example.com/save.php";, {
loadurl : "http://www.example.com/load.php"
});
注意編輯元素的ID會自動添加到查詢字符串，如：
http://www.example.com/load.php?id=element_id
(Integer) loadtype: 使用loadurl時的請求類型. 默認是GET. 可能用的只是GET和 POST之一.
(Mixed) loaddata: 使用loadurl的時候額外的請求參數(shù)，可以是一個哈�；蚝瘮�(shù)返回一個哈希。
$(".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:
可以是一個字符串或者函數(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;
}
});
默認如果點擊了編輯框之外就是取消編輯了，也可以設置 onblur 選項，以下選項
•onblur : cancel 點擊編輯框之外的區(qū)域取消修改，點擊submit按鈕就提交修改。
•onblur : submit 點擊編輯框之外的區(qū)域提交修改
•onblur : ignore 忽略編輯框外部的點擊和按ESC鍵，點擊submit按鈕就提交修改。
可以使用事件響應，所有的Jquery時間都支持，一般使用 click 和 dbclick，單擊和雙擊，還有 mouseover，鼠標感應。
官方地址：http://www.appelsiini.net/projects/jeditable
更多該作者插件：http://www.appelsiini.net/projects
.
發(fā)表評論評論列表（有 條評論）