讓Blogger的標籤能樹狀分類__（三）全部開合

(Pic from: 123rf.com)前言：

在「讓Blogger的標籤能樹狀分類（二）」這篇文章中，J.C. 於【留言 #04】詢問樹狀分類能否像「楞大網站」有 open all | close all 的效果。記得以前自己弄過類似的功能，結果會讓 hide 與 swap 函數的功能錯亂。還好現在的 hack 功力比當初好上一點，想辦法繞過了這兩個函數，且在不動到這兩個函數下修改的步驟比較容易。

2012.6.8 公告

本文為 "兩層式" 樹狀標籤，現在已經有新版 "多層式" 樹狀標籤，如果有兩層以上的分類需求，請參考「讓Blogger的標籤能"多層"樹狀分類__（一）基本安裝」


準備動作：

到 Blogger 後台 → 範本 → 修改 HTML。接著把下面的 Javascript 插入 </head> 的前面：


B：設定 Label_Open 這個打開全部標籤的函數。

D：把所有大分類丟入迴圈，一個個打開標籤。

F：呼叫大分類開合的區域 ID，命令該分類的區域成為展開。

H：呼叫大分類印出開合圖案的區域 ID，命令印出 "➷"。（此行設了新的 ID 變數 「Category_Name[i]+"_swap"」，之後必須把此變數放進原程式碼對應的區域）

L：設定 Label_Close 這個收合全部標籤的函數。

N：把所有大分類丟入迴圈，一個個收合標籤。

P：呼叫大分類收合的區域 ID，命令該分類的區域成為收合。

R：呼叫大分類印出開合圖案的區域 ID，命令印出 "➥"。（新 ID 變數同 H 行）

以上的開合圖案可自行變更。


放置位置：

接下來必須找到開合開關的放置位置，WFU 選擇放在標籤欄位靠右上的位置，請找到範本中類似以下的程式碼：


1：要找到側邊欄標籤小工具程式碼的起始位置，從 widget id 判斷是比較快的方法，除非裝了兩個以上的標籤小工具，不然我們要 hack 的應該會是 "label1" 的區域。

4：找到 <h2> 這一行後，在 <data:title/> 與 </h2> 之間插入藍字部分，這裡設了兩個開關，分別會呼叫 Label_Open 與 Label_Close 函數來進行全部開合的動作。

如果開關想設在別的位置可自行判斷是否刪掉 float:right 這個 span 標籤的頭尾；想要顯示別的開合文字、圖案，可在此行進行修改。


調整原程式碼：

最後一個動作最簡單了，請找到「讓Blogger的標籤能樹狀分類（二）」原程式碼中的 R 行，將其改為以下：

document.write("<div style='color: #073763; font-family: \"標楷體\"; font-weight: bold;'>
<span id='"+ Category_Name[i] +"_swap' onclick='hide(\""+ Category_Name[i] +"\");swap(this,\"➥\",\"➷\")' style='cursor: pointer; color: #3778cd;'>➷</span>《"+ Category_Name[i] +"》</div>")
此行紅字即為需要增加的部分，把開合圖案的那個 span 標籤新設一個 ID ，好讓 Label_Open 與 Label_Close 函數可以隨時呼叫，進行更改圖案。

OK，存檔後就大功告成了。另外，J.C. 還提到能否讓標籤像「楞大網站」可以記憶開合的狀態，由於這個功能需要用到 cookie，比較不適合混在本篇探討，因此另外開一篇來研究。

「讓Blogger的標籤能樹狀分類」系列標題：
一、原理篇
二、安裝篇
三、全部開合
四、記憶開合狀態

➢➢ 快速選單： １ ２ ３ ４