頁面狀態切換 - 使用 CSS

by thinker

關鍵字:

設計 $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>

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