網頁

2013年3月30日 星期六

讓側邊元件能摺疊及收合

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

沒有留言:

張貼留言

留言小提醒
==========================================================
1.欲留言而無Google帳號者可在下拉選項中選擇 名稱/網址來留言
2.名稱請填入閒雲野鶴學的學號;網址可空白;再按底下繼續即可留言
==========================================================

##EasyReadMore##