2011年10月1日 星期六

讓Blogger的標籤能樹狀分類__(四)記憶開合狀態

讓Blogger的標籤能樹狀分類__(四)記憶開合狀態

Wayne Fu 0 A+

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

上一篇」讓樹狀分類有全部開合的功能後,本篇要探討的是能否做到像「dtree」樹狀分類能夠記憶標籤開合的狀態。這個功能經測試後,乍看之下很神奇,可惜的是在不同的頁面多按幾次就會亂了調。

2012.6.8 公告

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


為了找出在不同頁面下錯亂的規則,經過不斷地交叉測試後終於發現,dtree 是利用 cookie 來記憶開合狀態,但是 Blogger 會在首頁存一個 cookie、搜尋頁也存一個 cookie、不同年份的文章也會有不同的 cookie。因此一開始在首頁點擊標籤的狀態,由於其他頁面尚未儲存 cookie,首頁的狀態會帶到其他頁面去,但是等其他頁面儲存了各自的 cookie 後,首頁會有首頁的標籤開合狀態,其他頁面會各自記憶自己的標籤開合狀態,並非保持最後一次的開合狀態。而關閉瀏覽器後,cookie 壽命終了,等到重新開啟瀏覽器後,首頁會再回到預設狀態,然後開始新的循環。

感覺上這個功能有這麼一點用處(對於首次拜訪的使用者而言),但又不是十分地實用(對於多次拜訪的使用者而言),會拿這主題來研究一下主要是因為沒有寫過 cookie 的語法,就當成一個作業熟悉一下 cookie 對以後也是有幫助,另外再將 dtree 的這個功能改進一下,讓其更實用一點。

2011.10.29 修訂 cookie 效用頁面的內容

原內容對 cookie 的特性認識不夠,最近研究 Blogger 私密留言的功能時才發現 cookie 的正確寫入語法,因此將本文程式碼做小部分修訂,修訂之後本篇的內容可將所有「開合動作」改變的狀態寫入 cookie,並且讓 cookie 的時效延長,以及 cookie 效用可延伸到各個頁面。dtree 版本的 cookie 壽命等到關閉瀏覽器便結束,WFU 版本的 cookie 壽命延長,且標籤會記住最後一次的的開合狀態,省去使用者重新按開關的次數。


準備動作:

請先對照「讓Blogger的標籤能樹狀分類__(三)全部開合」→「準備動作」的內容,到 Blogger 後台 → 範本 → 編輯 HTML。接著把下面的 Javascript 插入 </head> 的前面:


黑色部分是「上一篇」的程式碼,因此要增加的為紅字部分。

Label_Open 函數:

J:在函數中,加入寫入 cookie 的動作,寫入 "大分類 = 1"。

K~M:直接照抄書本範例,意思為設定 cookie 的壽命,並將 cookie 效用延伸到 Blogger 的各個頁面;如果沒有這三行,cookie 的壽命到關閉瀏覽器為止,各個頁面 的 cookie 有各自的效用。

L:此行的 1440 * 60 代表 1 天的分鐘數;7 * 1440 * 60 代表 cookie 壽命為 7 天;想要更長的 cookie 壽命可更改此行,請自行判斷 blog 的讀者平均上站間隔。


Label_Close 函數:

Y:在函數中,加入寫入 cookie 的動作,寫入 "大分類 = 0"。

Z~AB:同 K~M 行。


設定 Remember_LabelStatus 函數:

AG:此函數用來記住標籤開合狀態。

AJ:將所有 cookie 讀入 "AllCookies" 變數。

AL:進行大分類的迴圈,準備尋找大分類的 cookie 值。

AN~AO:假如大分類的 cookie 曾經寫入過的話──

AQ~AR:找出大分類的 cookie 值在所有 cookie 中的位置。

AV:假如大分類的 cookie 值為 1 的話──

AS、AX:將該大分類的標籤打開。

AT、AY:將圖案印為 ➷。

BA:假如大分類的 cookie 值為 0 的話──

BC:將該大分類的標籤收合。

BD:將圖案印為 ➥。


設定 WriteCookie 函數:

BJ:除了全展開、全收合的動作要寫入 cookie 外,個別標籤按下開合動作時,也要寫入 cookie。

BP~BQ:同前,設定 cookie 壽命,可自行更改壽命值。

BL、BM、BS:如果偵測到目前大分類的標籤是展開的狀態,寫入大分類的 cookie 值為 1、寫入 cookie 壽命值,並將 cookie 效用延伸到 Blogger 的各個頁面。

BT:不然的話,寫入大分類的 cookie 值為 0、寫入 cookie 壽命值,並將 cookie 效用延伸到 Blogger 的各個頁面。


記憶狀態函數放置位置:

請找到「讓Blogger的標籤能樹狀分類(二)」→「二、主程式碼」,在程式碼結束前加入以下這一行:

Remember_LabelStatus()
明確的說,上面這一行請放在 AB 行 與 AC 行之間,在 "}" 之下、</script>之上的位置。


調整原程式碼:

一樣,請先對照「讓Blogger的標籤能樹狀分類__(三)全部開合」→「調整原程式碼」的內容,塞入以下紅字的部分:

document.write("<div style='color: #073763; font-family: \"標楷體\"; font-weight: bold;'>
<span id='"+ Category_Name[i] +"_swap' onclick='hide(\""+ Category_Name[i] +"\");swap(this,\"➥\",\"➷\");WriteCookie(\""+ Category_Name[i] +"\")' style='cursor: pointer; color: #3778cd;'>➷</span>《"+ Category_Name[i] +"》</div>")

以上紅字即為將 WriteCookie 函數,塞入點擊開合圖案的動作之中,在做開合的動作同時便寫入 cookie。


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

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

沒有留言:

張貼留言注意事項:

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

TOP