2011年10月14日

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

A+

(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的標籤能樹狀分類」系列標題:
一、原理篇
二、安裝篇
三、全部開合
四、記憶開合狀態

➢➢ 快速選單:

4 則留言:

  1. 給你一個讚。

    我的樹狀標籤的展開/收合是點擊圖案+大分類,準備動作中H跟R行CloseSign.innerHTML的值改成"圖案"+ Category_Name[i] +""後,展開/收合就漂亮了。

    感謝WFU分享。

    回覆刪除
  2. Re: J.C. <8515819305010019712>

    謝謝你的讚,開合圖案、方式可自行調整沒問題的,本文的程式碼是我比較習慣的方式~~

    回覆刪除
  3. 大大~~~~我看了您的樹枝狀目錄教學,總算是弄出來了,真的是太感謝您了!!但我想把分類都收合到大分類裡不知道該怎麼用>"<
    越弄越糊塗,可以請您幫我看一下嗎?如果我想把圖案"➷"去掉又要怎麼用呢?謝謝!
    http://alisha0110.blogspot.tw/

    回覆刪除
  4. <5499815690023431800>(以上內容請勿刪除,從括號之後開始留言)hi Alisha, 玩到可以出書真是令人羨慕啊~

    我猜你要全部收合的功能對吧?很不巧你搜尋到的這篇是舊版樹狀標籤,2011 年的文章。

    已經有今年寫的更新版了,比較好用且安裝全部收合的方式比較簡單,建議你參考「Blogger文章分類__「多層樹狀標籤」更新版」,請依照指示先把標籤小工具移除,再重新安裝即可。

    開合的圖案都是可以自訂的,還可以使用圖檔,新版文章有詳細說明。

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。