[Blogger Tune] 利用 jQuery Toggle 調整版面元素的顯示與隱藏

最近才開始認真學 jQuery，目前為止還是只能說懂個皮毛而已，這次利用 toogle() 和 slidetoggle() 讓版面做一些動態調整的設計。

我的版面中央內容區塊如上圖所示：

上方的 Content-wrapper 裡頭包了 Main-wrapper 和 Sidebar-wrapper，底下的 Bottombar-wrapper 是我後來修改了原始版型，加上一大塊的 Bottombar-wrapper，拿來放一大堆 Widget 用的。

隱藏側邊欄按鈕

簡單來說，這個按鈕我想做的是隱藏 sidebar-wrapper，並且放大 main-wrapper，然後按下去之後，這個按鈕的功能內容變為顯示 sidebar-wrapper，並且把 main-wrapper 變回原來的大小。

這裡會用到一些東西：toggle()、show()、hide()、css()、append()

語法如下：

<script language='JavaScript' type='text/javascript'> 
$(function($) { 
     //toggle sidebar 
      $("button#togglebtn").toggle( 
              function () { //toggle 按鈕按第一次做的事
                   $("div#sidebar-wrapper").hide(); 
                   $("div#main-wrapper").css("width","900px"); 
                   $(this).text("").append("<span class='rewind'>{顯示側欄}</span>");
               }, function () { //toggle 按鈕再按一次做的事
                   $("div#sidebar-wrapper").show(); 
                   $("div#main-wrapper").css("width","640px"); 
                   $(this).text("").append("<span class='forward after'>{隱藏側欄}</span>");
               }
       );
}); 
</script>

語法說明：

$("div#sidebar-wrapper").hide(); //把 sidebar-wrapper hide

$("div#main-wrapper").css("width","900px"); //利用 css() 把 main-wrapper 的寬改成 900px

然後底下這行是用來把那個 <button> 按鈕改掉的

$(this).text("").append("<span class='rewind'>{顯示側欄}</span>");

然後另一個 function 則是做相反的事情，這樣就完成了。

顯示底部欄按鈕

這個按鈕我想把 content-wrapper 和 bottombar-wrapper 一次只顯示一個，這樣版面不會拉這麼長，當 id 為 bottomtogglebtn 的按鈕觸發 click 事件時，使用 slideToggle() 讓物件滑動顯示或隱藏。

語法如下：

<script language='JavaScript' type='text/javascript'> 
$(function($) { 
      //toggle bottom
       $("button#bottomtogglebtn").click(function () {
           $("div#bottombar-wrapper").slideToggle("fast");
           $("div#content-wrapper").slideToggle("fast");
           $('html, body').animate({scrollTop:0}, 'fast');
        }); 
}); 
</script>

語法說明：

$('html, body').animate({scrollTop:0}, 'fast');

大概只需要解釋這一行，因為我的按鈕在底下，所以利用了 animate() 讓瀏覽頁面捲動回最上方，這樣也完成了。

以上兩例是不是都不難呢？如果有寫的不好的地方，還請您給我建議哦！

文章分類：Blogger FixTune,jQuery