云南網站建設創新企業 昆明多彩網絡公司

|網頁對話|電話:0871-63215311

翻譯了一個jquery插件:就地編輯插件jeditable

來源:昆明多彩網絡公司 日期:2010-02-05 閱讀: 發表評論

jeditable是一個jquery插件,它的優點是可以就地編輯,并且提交到服務器處理,是一個不可多得的就地編輯插件。

由多彩原創翻譯的jeditable插件文檔,轉載請注明出自:www.ccrikj.icu

基本用法:再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>

只有一個強制參數,發送內容的后臺地址

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

發送到服務器的內容?
當提交并且發送以下格式的信息給服務器:ID=HTML中的ID號,vause=輸入框的內容。

id=elements_id&value=user_edited_content有個時候,如果需要改變參數名稱,比如像下面的格式:

elementid=elements_id&newvalue=user_edited_content那么可以添加2個參數

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

 $(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文件應該返回純文本的內容,而不XHML,因為要顯示在輸入框中,而save.php則應該返回XHTML內容,另外還有一個選擇就是標記數據源參數。

怎么使用SELECT?
可以使用JSON數組,這個數組通過data參數來設置,可以考慮通過loadur來返回,數組關聯名稱是<option>標簽的name,數組的值則是<option>之間的值

JSON 數組如以下格式:

{'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外部加載動態的JSON數據:

腳本示范:

 <?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名稱和樣式參數,首先,在css中定義css名稱,然后設置cssclass參數,第二,可以直接設置css樣式參數。如:

 $('.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'
 });
 
用提交函數的方式代替URL $('.editable').editable(function(value, settings) {
     console.log(this);
     console.log(value);
     console.log(settings);
     return(value);
  }, {
     type    : 'textarea',
     submit  : 'OK',
 });
注意函數必須返回字符串,

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

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

(Function) callback: 當提交之后調用的函數,有2個參數(value, settings),Value包括了From的內容,Settings包含了所有插件設置,原來的元素的內部函數。

 $('.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: 設置提交參數的名稱,默認是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: 表單提交時額外的參數,可以是哈西,或者哈書返回的哈西。

$(".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時定義行數.

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

(Integer) height: 定義輸入框的高度,單位是像素(px),默認是 auto. 意思是自動計算. 也可以設置為 none.

(Integer) width: 定義輸入框的寬度,單位是像素(px),默認是 auto. 意思是自動計算. 也可以設置為 none.

(Integer) loadurl: 加載外部數據到輸入框中,可以是普通字符串,也是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的時候額外的請求參數,可以是一個哈希或函數返回一個哈希。

$(".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:

可以是一個字符串或者函數返回的函數. 設置成編輯框的內容。

$(".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 點擊編輯框之外的區域取消修改,點擊submit按鈕就提交修改。
•onblur : submit 點擊編輯框之外的區域提交修改
•onblur : ignore 忽略編輯框外部的點擊和按ESC鍵,點擊submit按鈕就提交修改。
可以使用事件響應,所有的Jquery時間都支持,一般使用 click 和 dbclick,單擊和雙擊,還有 mouseover,鼠標感應。

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

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

發表評論評論列表(有 條評論)

網頁對話 0871-63215311
新疆时时下载手机版 26选5福利彩票开奖查询 网上彩票投资赚钱是真的吗 梦幻西游烹饪多少赚钱吗 海南环岛赛开奖查询 上海时时乐三星出号走势图 利用京东淘宝key赚钱 浏览广告赚钱 9188彩票首页 天龙八部赚钱用哪个门派好 云南快乐十分开奖记录 下载广东时时彩 10元的快餐怎样才能赚钱吗 彩票顶呱刮 穿盘谁赚钱 黑龙江11选5直播 湖北11选5投注