網(wǎng)站建設(shè)指導(dǎo)

“Inline editing” 從字面上看上去第一眼會(huì)以為是在一行中做編輯，其實(shí) “Inline” 是 “內(nèi)聯(lián)的” 的意思，指的是在原頁(yè)面進(jìn)行編輯和保存，而不是跳到另一個(gè)頁(yè)面進(jìn)行編輯。相比于另起一個(gè)頁(yè)面進(jìn)行編輯的形式，Inline editing更符合用戶(hù)的直覺(jué)，更不容易迷失。 1. 知乎 知乎的個(gè)人資料可以用Inline editing 進(jìn)行編輯。下圖是我的知乎個(gè)人資料頁(yè)。 當(dāng)鼠標(biāo)懸浮到某一欄上時(shí)，出現(xiàn)編輯按鈕： 點(diǎn)擊“修改按鈕”，則原欄目變?yōu)榭删庉嫚顟B(tài)，同時(shí)出現(xiàn)“確定”按鈕： 編輯完后點(diǎn)擊“確定”即可完成編輯。整個(gè)過(guò)程沒(méi)有涉及到任何的頁(yè)面跳轉(zhuǎn)，用戶(hù)清楚地知道他編輯的內(nèi)容會(huì)顯示在哪里。 2. 在表格中的應(yīng)用 經(jīng)過(guò)以上介紹，大家想必也了解了Inline editing在表格中如何使用，對(duì)，就是直接在表格上進(jìn)行編輯。 2.1 舉個(gè)最簡(jiǎn)單的例子，下面的表格是一張已保存的表格。 用戶(hù)將鼠標(biāo)點(diǎn)到某一欄時(shí)，該欄即變?yōu)榭删庉嫚顟B(tài)： 這時(shí)用戶(hù)可以任意修改。并且當(dāng)鼠標(biāo)點(diǎn)擊到其他欄或者表格以外的地方時(shí)，該可編輯欄lose focus之后自動(dòng)保存修改后的內(nèi)容，并變回不可編輯狀態(tài)。 具體demo可參考：http://www.zkoss.org/zkdemo/grid/inline_editing 2.2 Inline editing的形式基本上如2.1的例子那樣，不同的地方在于觸發(fā)編輯的條件。