線上書籍

一、  jeditable：http://www.appelsiini.net/projects/jeditable

1. 此外掛可用來做「點擊編輯」的功能，是相當直覺的修改工具。
2. 支援「文字輸入框」、「大量文字框」、「下拉選單」等三種表單元件。

二、 基本用法 <div class="edit" id='div1'>文字輸入框</div> <div class="edit_select" id='div2'>下拉選單</div> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.jeditable.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.edit').editable('save.php'); $('.edit_select').editable('save.php', { type : 'select', cancel : '取消', submit : '儲存', indicator : '<img src="img/indicator.gif">' }); }); </script>

1. 將欲修改的元件設定一個class，id則是會送出給php當作變數名稱（類似name）
2. 設定一個用來進行儲存的PHP檔，基本的寫法像這樣：
3. 您也可以設定各種參數（均非必要）
   • type : 'text', //設定表單類型，可以是 text、textarea、select
   • indicator : 'Saving...', //儲存時呈現的文字或圖片
   • tooltip : '點此進行編輯...', //提示文字
   • loadurl : 'json.php', //預先載入的選項
   • cssclass : 'someclass', //套用CSS樣式（套用在form，而非輸入框）
   • style : 'display: inline', //直接套用樣式（套用在form，而非輸入框）
   • width: '100px', //表單元件寬度；height: '40px', //表單元件高度
   • cancel : '取消', //取消鈕；submit : '儲存', //送出鈕（沒設表示不用按鈕）
   • onblur:'submit', //離開表單元件時要進行的動作（還有cancel , ignore）
   • event: 'click', //進入編輯狀態的事件（如：dblclick，所有jquery事件均可）
   • submitdata : {op: 'save_area' , sn : '100'}, //額外參數
   • data : {'boy':'男生' , 'girl':'女生'}, //下拉選單選項，左為值，右為呈現選項
   • placeholder : '點選編輯', //預設呈現內容（當該元件內容為空時才呈現）
4. save.php會接收到該元件的id值（$_POST['id']）及輸入的值（$_POST['value'] ），若有submitdata，則會順便送出submitdata裡面設定的參數及值。
5. 此外，save.php所echo的值會出現在該元件中。

三、 TadTools中的用法 include_once XOOPS_ROOT_PATH."/modules/tadtools/jeditable.php"; $file="save.php"; $jeditable = new jeditable(); $jeditable->setTextCol("#id",$file,'140px','12px',"{'sn':$sn,'op' : 'save'}","點擊編輯"); $jeditable->setTextAreaCol("#id",$file,'140px','12px',"{'sn':$sn,'op' : 'save'}","點擊編輯"); $jeditable->setSelectCol("#id",$file,"{'boy':'男生' , 'girl':'女生' , 'selected':'girl'}","{'sn' : $sn , 'op' : 'save'}","點擊編輯"); $jeditable_set=$jeditable->render();

1. 先引入jeditable.php，再設定儲存檔$save_file
2. 把$jeditable_set放到表單前（或主內容之前即可）