jQuery Tips - 輔助介面顯示隱藏切換

2009-09-02 02:29 PM

"小幫手"是我在設計網頁介面時常用的一種做法:

針對複雜的輸入操作，另外提供一個輔助性質的試算/查詢小幫手介面，讓使用者可以在上面進行一些數值試算、資料查詢，完成後再將結果填入。

由於這類小幫手介面有時還挺複雜的，若常駐在畫面上會讓操作介面變得龐雜。因此我習慣在網頁上放個小開關，按一下才顯示，再按一次則隱藏，小開關本身在切換時也常要改變顯示文字及顏色變化。

類似的東西我前後寫過好幾次，但每次用的方法跟長得樣子都不盡相同，就品管觀點來看，應該會被判定為"品質不穩定"。今天又有相似需求，索性整理一下，設法推敲出一套較簡潔的做法，以後再遇這類需求，如法泡製即可。

<html>

<head>

<style type='text/css'>

body { font-size: 9pt; }

#btnShowBlock { text-decoration: underline;

cursor: pointer; }

.cRed { color: red; }

.cGreen { color: green; }

#dvHelperBlock { background-color: #dddddd;

padding: 5px; margin-top: 10px; }

#dvHelpBar { padding: 10px; }

</style>

<script type='text/javascript' 
src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js'></script>

<script type='text/javascript'>

$(function() {

$("#btnShowBlock").click(function() {

    $(this).toggleClass("cGreen").find("span").toggle();

    $("#dvHelperBlock").toggle();

});

});

</script>

</head><body>

<span id="btnShowBlock" class="cRed cGreen">

<span>顯示</span><span style="display:none;">隱藏</span>小幫手</span>

  <div id="dvHelperBlock" style="display: none;">

  <fieldset><legend>試算小幫手</legend>

  <div id="dvHelpBar">

  功能鈕... 功能鈕... 功能鈕... 功能鈕...

  </div></fieldset>

</div>

</body>

</html>

簡單說一下原理。

用一個span當成小開關，文字先顯示"顯示小幫手"。jQuery的toggleClass可以反覆切換CSS，因此我設計了.cRed, .cGreen兩種顏色的Style。一開始小開關先加上cRed及cGreen Style，輔助介面則設display: none。接著，我們就可以bind小開關的click事件，閉著眼睛用toggleClass("cGreen")換文字顏色，用toggle()切換顯示/隱藏輔助介面，而小開關的顏色與輔助介面顯示會巧妙地維持一致。

至於span文字: "顯示小幫手" / "隱藏小幫手" 的切換，我的做法是用個<span>把顯示二字包起來，在toggle()寫兩個函數分別將文字改為"隱藏"或"顯示"。這部分感覺還不夠簡潔，但暫時也沒想到更漂亮的寫法，如果有人有其他點子，歡迎提出來交流。

【2009-09-02更新】加入保哥建議(特此感謝!)，用<span>顯示</span><span style="display:none;">隱藏</span>，配合find("span").toggle()就可在click中做完全部的切換動作，簡潔度更上一層樓!

【2009-09-03更新】加入Ammon建議，小開關同時加掛cRed cGreen，只toggleClass("cGreen")即可。感謝Ammon大指點~~

Comments

# 2009-09-02 03:36 AM by 91

喔喔喔喔喔！讚讚讚讚！

# 2009-09-02 04:14 AM by Will 保哥

我寫了一個更簡潔的寫法： $(function() { $("#btnShowBlock").click(function() { $(this).toggleClass("cGreen").toggleClass("cRed"); $("#dvHelperBlock").toggle(); $(this).find("span").toggle(); }); });

# 2009-09-02 04:16 AM by Will 保哥

我改了一個比較簡潔的版本： <html> <head> <style type='text/css'> body { font-size: 9pt; } #btnShowBlock { text-decoration: underline; cursor: pointer; } .cRed { color: red; } .cGreen { color: green; } #dvHelperBlock { background-color: #dddddd; padding: 5px; margin-top: 10px; } #dvHelpBar { padding: 10px; } </style> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js'></script> <script type='text/javascript'> $(function() { $(function() { $("#btnShowBlock").click(function() { $(this).toggleClass("cGreen").toggleClass("cRed"); $("#dvHelperBlock").toggle(); $(this).find("span").toggle(); }); }); }); </script> </head><body> <span id="btnShowBlock" class="cGreen"> <span>顯示</span><span style="display:none;">隱藏</span>小幫手 </span> <div id="dvHelperBlock" style="display: none;"> <fieldset><legend>試算小幫手</legend> <div id="dvHelpBar"> 功能鈕... 功能鈕... 功能鈕... 功能鈕... </div></fieldset> </div> </body> </html>

# 2009-09-02 04:31 AM by Leeabc

$("#btnShowBlock").toggle(function() { $("#dvHelperBlock").show().find("span").text("隱藏"); }, function(){ $("#dvHelperBlock").hide().find("span").text("顯示"); }).toggleClass("cGreen").toggleClass("cRed"); 這樣呢 :D

# 2009-09-02 10:15 AM by Ammon

<span id="btnShowBlock" class="cRed cGreen"> $("#btnShowBlock").click(function() { $(this).toggleClass("cGreen").find('span').toggle().end().next().toggle(); });