簡易切換區塊顯示 Tiny Guide of Show/Hide Control

回應自: 異域內框顯示單一捲軸 Single scrollbar of iframe in exotic domain

感謝匿大(什麼鬼啊! 我還「姓朱名德正」咧←5個字, 是日本人?!冏rz__)的支持, 本篇「概略說明」一下異域內框顯示單一捲軸 Single scrollbar of iframe in exotic domain(以下簡稱甲方XP)文中使用的區塊顯示切換方法. 事實上我不太coding了, 多半是提供如何達成目標或克服困難的概念. 當前的設計潮流傾向於使用現成函式庫(例如 jQuery), 除非是撰寫函式庫或力求精簡的龜毛派才會去搞function go2die(myself) {/*...*/}這種鳥事……orz

---

本想放廣告, 可是一定沒人點, 算了, 純休息吧~

---

導播麻煩把鏡頭拉回來~~首先把整個架構切成下列3部份, 再細究箇中需要注意的細節:

1. 觸發切換的扳機, 可以是連結、、表單元件、甚至大部份的HTML元素;
2. 實作切換的函式;
3. 被操~~弄的區塊.

1.觸發扳機

不知何時起又因何故, 大家忽然討厭用了, 紛紛仿效 MS Office XP 引領的平板介面(是因為Yanz姊姊當時正夯嗎^O^?). 由於那時 DHTML 和 DOM 方興未艾, 唯一能取代按鈕的元件就只有 <a> 種連結, 所以 <a> 一躍成為網頁設計者的最愛. 大抵上寫法有:

• <a href="#" onclick="foo(n)">
• <a href="javascript:void(0)" onclick="foo(n)">

其中href="#"在某些情況(饒了我吧)點擊後會取代當前頁面或開啟新頁面, 因而在onclick的指定裡還會加入return false以中斷事件向上傳遞. (呃, 要繼續嗎? ^^a)

不過時間來到了「語意」掛帥的現今局勢, 我倒是建議不妨從按鈕的葪素麵回歸到啦(雞絲麵糝苯有害健康吧?!), 大不了 style 中再設定 border 即可. 順便一提: 除了 onclick 外, 也可採 onMouseOver 或 CSS 的 :hover 來達成顯示切換, 這對於暫時性的提示文字滿有用的, 比單純的 title 屬性更有彈性. (會ㄉㄨㄞ~ㄉㄨㄞ~的喲!!)

2.實作函式

避開提示性的顯示方式, 按鈕形式的切換首重「狀態」的判別: 如果目前是隱藏狀態, 那麼就要顯露內容; 否則自然將狀態設為隱藏. 至於何謂隱藏, 一般多採 CSS display 是否 none 來判別及指定; 但是我曾在測試某舊版瀏覽器時發現 display 無法控制, 因而改用 CSS height 來控制: 而此時就得在函數傳遞的參數中多添個顯示時的高度, 可以是畫素(如px)或列數(如em).

3.操弄區塊

就我參考的前輩們範例所見, 實作函式與操弄區塊之間是用區塊 ID 和 document.getElementById 溝通的; 可是我因為懶得為每個操弄區塊設定 ID, 所以搞了一種「偷吃步」的方式: 由於我的觸發扳機緊臨操弄區塊, 所以對於觸發扳機來說, 操弄區塊是它的 nextSibling. 於是乎每個觸發扳機的 onclick="switchDisplay(this.nextSibling)" 當然如果操弄區塊預設要隱藏, 也請記得設定 style="display:none;"

超值加贈

在甲方(耶! 終於派上用場了…)的第一則意見中提到固定背景, 我想我會把背景設給外包的 div 而將 iframe 設為透明. 僅供參考……^^a

P.S.各家瀏覽器一直在改樣式的呈現面貌及編譯引擎, 本站之前所提解法大多已不適用或有更好的方案了, 因此誠心建議採用有眾多高手在維護的現成函式庫. -_^

---

教學相長

科技與時俱進，若有任何指教還請不吝留賜朱墨以點化。