robot
最新文章(10)
MadButterfly 和 Javascript 合體的威力
Adapt C code for Javascript
OpenVG for Linux/FreeBSD with X
回收 Linux cached memory
公告: 更換 domain name
關於 GCC nested function
GLUT 作為 Embedded System 的 UI 平台
別被 kernel 嚇到了
SVG 加 Gecko 完全攻略
在 OSDC 展示的 Plurk client
首頁
新編
最新留言
Entries RSS
重要關鍵字(10)
coding (120)
Python (93)
FreeBSD (71)
WEB (61)
URL (48)
hardware (46)
雜記 (45)
javascript (36)
Linux (31)
blog (30)
所有關鍵字
新增 URL
頁面狀態切換 - 使用 CSS
by thinker
2 Columns
關鍵字:
WEB
javascript
設計 $WEB$ Application ,常有頁面依狀態變換的需求。例如 login 或未 login 時,頁面有不同提示。使用者權限不同時,也會出現不同的畫面。一般常見的做法是在 server side 判斷目前的狀態,以輸出對應的 HTML page。於是,在 server page 裡,就有一堆的 if-else ,弄的眼花撩亂。 === CSS === 基於 declare 通常比 code 容易了解的事實,採用改變 tag class 的方式切換頁面狀態,能更直覺、更易於了解。此一方法,是透過宣告 style rules 和改變最外層 tag class 的方式,達成狀態切換的效果。其基本的$想法$是,在頁面加上一層 div 或 span tag ,並指定代表狀態的 class ,使該 tag 的 children 能依狀態的不同,套用不同的 style rules。 如: {{{ <style> .view .editable { visibility: hidden; } .edit .raw { visibility: hidden; } </style> <script> function modify() { var outer = document.getElementById("outer"); outer.className = "edit"; } </script> <body onload="init()"> <div id="outer" class="view"> <div> author: <span class="raw">thinker</span> <input type="text" class="editable" value="thinker"/> </div> <div> <span class="raw">Hello.........</span> <textarea class="editable">Hello......</textarea> </div> <input type="button" value="modify" onclick="modify()"/> </div> </body> }}} 當 outer 的 class 由 view 切換成 edit 的同時,頁面的狀態也隨之切換。 === 限制 === 當然,這也不是萬能的。例如,一些機密資料,就不能透過種方的來切換、隱藏。 === 結語 === $WEB$ Application 的複雜度,往往來自於客戶對畫面的要求。一般以 server side 程式判斷目前狀態,並輸出對應的網頁內容。這樣的做法往往增加大量的、鎖碎的 if-else,使程式複雜。此一困難,也許能使用 template function 加上 state pattern 改善,但還是不比 CSS 切換來的直覺、明瞭。在視覺的呈現上,若資料不具敏感性,不妨試試此法。
最後更新時間: 2007-02-05 11:44:09 CST |
引用
查詢:
COMMENTS: