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

image

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

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

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

隱藏側邊欄按鈕

image


簡單來說,這個按鈕我想做的是隱藏 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 則是做相反的事情,這樣就完成了。

顯示底部欄按鈕

image

這個按鈕我想把 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() 讓瀏覽頁面捲動回最上方,這樣也完成了。

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

留言

這個網誌中的熱門文章

[古典相機] 巧緻實用的簡單精神.Nikon FE.1978

[古典相機] M42 機皇.快門最速機身.Fujica ST801.1973

[中判相機] 開始 120 吧.Pentax 6x7.1969

[古典相機] 小型化 SLR 代表作,Olympus OM-1N.1979

在 Excel 裡轉換 Unixtime 格式