IP

[Blogger] 側邊欄元件收合

Written on 2009年4月13日 in , | View Comments

網頁上總是會放些有的沒的Javascript，這樣看起來頁面比較「豐富」一點，但是東西一多就會變得很雜很亂，而且放這麼多東西上去，開網頁的速度就會被拖慢，而且有些Javascript會讀取很久，效能不高。

為了解決這問題，就要派上這個Javascript啦！雖然他也是Javascript，但是不大會影響到讀取速度，最重要的功能就是，可以把側邊欄的元件收合起來剩下標題，這樣畫面就清爽許多啦！

不過這個功能只是把側邊欄元件收合起來，並不是說他就沒有讀取，所以他還是會先全部讀取完，然後在進行下一步看是要隱藏還是要顯現。所以呢，要讓網頁讀取速度快的最根本大法就是：不要放太多東西在頁面上。

開始囉！先到 版面配置>修改html，然後要點選展開小裝置範本

① 把下面這些程式碼複製貼在 <head> </head> 標籤內、</style> 後面。

<script type='text/javascript'>

<!-- Function used for Sidebar Element Toggling: ElementToggle()-->

function ElementToggle(id) {

  var element = document.getElementById(id).getElementsByTagName(&#39;div&#39;);

  for(i = 0; i &lt; element.length; i++) {

    attribute = element[i].getAttribute(&#39;id&#39;);


    if(attribute == &#39;toggle&#39;)

    {

      if (element[i].style.display == &#39;none&#39;)

        element[i].style.display = &#39;inline&#39;;


      else

        element[i].style.display = &#39;none&#39;;

    }

  }

}   


</script>

② 找到要展開收合的元件，找開頭的區段。例如我的「Search」這個元件長這樣：

<b:widget id='HTML6' locked='false' title='Search' type='HTML'>

  <b:includable id='main'>

     <b:if cond='data:title != ""'>

      <h2><data:title/></h2>

    </b:if>


    <div class='widget-content'>    

     ............. (略過)

  </b:includable>

</b:widget>

③ 例如我要「Search」這個元件可以展開收合，而且「預設收合」，那就照下面紅色字的地方這樣設定，不過要注意一點就是黃色底色 (HTML6) 的地方，兩個的id要一樣才可以！

<b:widget id='HTML6' locked='false' title='Search' type='HTML'>

<b:includable id='main'>

     <b:if cond='data:title != ""'>

      <h2><a href='javascript:void(0);' onclick='javascript:ElementToggle("HTML6");'>[+/-]</a>

      <data:title/></h2>


    </b:if>

    <div class='widget-content' id='toggle' style='display:none;'>

     ............. (程式內文略過不表)

  </b:includable>

</b:widget>

④ 如果想要他是「預設展開」的話，只要把 綠色底色的 style='display:none;' 刪掉就可以囉！

至於他到底是什麼樣的原理呢？簡單說就是利用CSS把他「藏」起來而已，很不賴的一個Javascript。

⊙ Fun 足 | 側邊欄元件可展開收合（Sidebar Element.toggle）
⊙ Abin's Tech Note | 讓側邊列 (Sidebar) 的元件能夠展開和摺疊 (Element Toggling)


訂閱： 文章 (Atom)