2012年6月1日 星期五

讓Blogger的標籤能「多層」樹狀分類__(二)全部開合

讓Blogger的標籤能「多層」樹狀分類__(二)全部開合

Wayne Fu 0 A+

(Pic from: I Loathe Multi Level Marketing)
如果網站的多層樹狀標籤想要有全部開合的功能,那麼按照「上一篇」 完成基本安裝後,可以接續本篇的操作。

2013.1.4 公告

樹狀標籤更新版本已經發佈,請「按此跳至新版頁面」,安裝新版本可避免舊版本會發生的狀況與問題。



準備動作:

到 Blogger 後台 → 範本 → 修改 HTML。接著把下面的 Javascript 插入 </head> 的前面,跟上一篇放在 </head> 前的那一行程式碼擺在一起,綠字為原本程式碼,紅字與藍字為新增程式碼:


B:這一行綠字部分為原本的程式碼,請改為自己的大分類設定字串。

D~O:處理標籤全部打開的函數,有兩個地方可以更改──

  F:"-" 可改為自己的標籤分隔符號

  K:"" 請改為自己的標籤收起符號(必須與自己上一篇設定的符號相同)

Q~AB:處理標籤全部收起的函數,有兩個地方可以更改──

  S:"-" 可改為自己的標籤分隔符號

  X:"" 請改為自己的標籤展開符號(必須與自己上一篇設定的符號相同)


放置位置:

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

<b:widget id='Label1' locked='false' title='分類' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/><span style='float:right'><span onclick='treeLabel_Open()' style='cursor: pointer; color: #3778cd;'></span> 全展開 <span onclick='treeLabel_Close()' style='cursor: pointer; color: #3778cd;'></span> 全收起</span></h2>

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

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

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


調整原程式碼:

上一篇」原程式碼中有兩個地方要修改:

1. C 行:刪除 tLabel_Data 這個變數,請將以下程式碼覆蓋原本的 C 行,需要修改的參數、圖案請自行更改(請注意每個變數之間是用逗號隔開,此行最後用分號結尾)

var showLevel = 2, showTitleCount = "Y", openLogo = "▼", closeLogo = "►", listLogo = "⇢", sp="-";

2. AH 行:新增以下紅字部分

var html = "<div><span id='"+ id +"_swap' onclick='this.innerHTML = (this.innerHTML == \""+ openLogo +"\") ? \""+ closeLogo +"\" : \""+ openLogo +"\"; document.getElementById(\""+ id +"\").style.display = (document.getElementById(\""+ id +"\").style.display == \"block\") ? \"none\" : \"block\";' style = 'margin-left:"+ k * 10 +"px; cursor: pointer; color: #3778cd;'>"+ sLogo +"</span>";
把開合圖案的那個 span 標籤新設一個 ID ,好讓 treeLabel_Open 與 treeLabel_Close 函數可以隨時呼叫,進行更改圖案。

存檔後即大功告成。而一些安裝樹狀標籤可能會遇到的疑難雜症,將作個統整、集中放在下一篇說明。


讓Blogger的標籤能多層樹狀分類」系列標題:
一、基本安裝
二、全部開合
三、各種疑難雜症
四、更新版本

➢➢ 快速選單:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP