Tad 教材網 - 線上書籍

:::

3-3 上課範例：ajax.php

4-1 上課範例：index.html next

\[1012\]PHP進階開發及TadTools工具應用
============================

[![](http://tad0616.net/uploads/dl.gif)](http://www.tad0616.net/uploads/tad_book3/file/1012/04.zip)

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

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

```

<div class="edit" id='div1'>文字輸入框</div>
<div class="edit_select" id='div2'>下拉選單</div>
```

```

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放到表單前（或主內容之前即可）

:::

搜尋

進階搜尋

QR Code 區塊

https%3A%2F%2Ftad0616.net%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D753

快速登入

書籍目錄

展開 | 闔起

線上使用者

122人線上 (76人在瀏覽線上書籍)

會員: 0

訪客: 122

更多…

MarkDown

搜尋

QR Code 區塊

快速登入

書籍目錄

線上使用者