4. 點擊編輯

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

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

二、基本用法

<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>

將欲修改的元件設定一個class，id則是會送出給php當作變數名稱（類似name）
設定一個用來進行儲存的PHP檔，基本的寫法像這樣：
您也可以設定各種參數（均非必要）
- 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 : '點選編輯', //預設呈現內容（當該元件內容為空時才呈現）
save.php會接收到該元件的id值（$_POST['id']）及輸入的值（$_POST['value'] ），若有submitdata，則會順便送出submitdata裡面設定的參數及值。
此外，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();