山林玩誌: 讓側邊元件能摺疊及收合

首先貼入處理這個動作的 Javascript (貼在 <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>

接下來，要去修改元件 (Widget) 的程式碼。同樣以個人資料 (Profile) 元件為例，找 <b:widget ...> 開頭 </b:widget> 結尾的區段，應該是類似下面這樣：

<b:widget id='Profile1' locked='false' title='AUTHOR PROFILE' type='Profile'>
  <b:includable id='main'>
     <b:if cond='data:title != ""'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
     ............. (程式內文略過不表)
  </b:includable>
</b:widget>

這個元件的 ID = Profile1，是範本裡用來識別該元件的方法，接下來要插入動態切換的連結，為求簡單我先不顧美觀，直接插入像下面的原始碼：

<b:widget id='Profile1' locked='false' title='AUTHOR PROFILE' type='Profile'>
<b:includable id='main'>
     <b:if cond='data:title != ""'>
      <h2><a href='javascript:void(0);' onclick='javascript:ElementToggle("Profile1");'>[+/-]</a>
      <data:title/></h2>
    </b:if>
    <div class='widget-content' id='toggle' style='display:none;'>
     ............. (程式內文略過不表)
  </b:includable>
</b:widget>

更改紅色中的profile1與要更改的id一致
如果預設是被展開的，就把後面紅色的 style='display:none;' 部分拿掉就行了

原文http://abintech.twidv.com/2007/02/sidebar-element-toggling.html

山林玩誌

網頁

2013年3月29日星期五

讓側邊元件能摺疊及收合

4 則留言:

網頁

2013年3月29日 星期五

讓側邊元件能摺疊及收合

4 則留言:

2013年3月29日星期五