讓側邊列 (Sidebar) 的元件能夠展開和摺疊 (Element Toggling)
本文介紹的是這些顯示的元件透過一些技巧可以動態展開和摺疊起來。Sidebar 的元件有的時候可能很長（尤其是網站列表或是 Archive 之類的），想要顯示該元件又不希望過長的元件會影響版面的美觀，這時候我們可以保留它，透過 Javascript 的技巧去動態切換顯示與否。而我看到人家的作法，要做一些麻煩的修改，參考對方的原始碼我寫了因應這個動作的 Javascript，一方面更精簡 Hack 的步驟，也減少原始碼的修改。
根據原文，還有上一篇對 Widget 程式碼的瞭解，要做的工作就是：第一，把想展開摺疊的區塊找出來，第二，做一個按鈕或連結，當按下去的時候，去切換該區塊的狀態（display inline or none）。打開完整範本原始碼，首先貼入處理這個動作的 Javascript (貼在 <head> </head> 標籤內、</style> 後面)：
<script type='text/javascript'>
<!-- Function used for Sidebar Element Toggling: ElementToggle()-->
function ElementToggle(id) {
var element = document.getElementById(id).getElementsByTagName('div');
for(i = 0; i < element.length; i++) {
attribute = element[i].getAttribute('id');
if(attribute == 'toggle')
{
if (element[i].style.display == 'none')
element[i].style.display = 'inline';
else
element[i].style.display = 'none';
}
}
}
</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>
有兩個部分要解釋一下。第一，塞入元件標題 data:title 前面的那行，就是呼叫 Javascript 的連結，其中有一個變數：Profile1，就是告訴 Javascript 你要動態切換哪一個元件，所以如果你有多個不同元件要摺疊，記得除了呼叫切換的這一行要塞入該元件原始碼中，還要更改 ID 名稱。第二個部分，<div class='widget-content'> 這行標籤開始就是元件的內容，也是要被折疊或展開的區塊，如果你希望該文件「預設」就被折疊起來，那就要在後面加入 CSS Style 去起始隱藏它，如果預設是被展開的，就把後面紅色的 style='display:none;' 部分拿掉就行了。最後，如果對以上樣式不滿意，或是想貼用圖片當切換按鈕，記得調整 <a> 連結那行的內容和位置就可以了！
沒有留言:
張貼留言