2012年9月1日 星期六

讓 Blogger 側邊欄有個簡易安裝的分頁(TAB)功能__(4) 各種疑難雜症

讓 Blogger 側邊欄有個簡易安裝的分頁(TAB)功能__(4) 各種疑難雜症

Wayne Fu 0 A+

(Pic from: jQuery TOOLS,psdzzle.com)
系列文「第一篇」提供了基本安裝的程式碼,如果有客製的需求時日後容易擴充。本篇的主題為解決分頁功能的一些疑難雜症,而如果有提出客製的相關問題,之後一併集中更新到此篇。


一、Blogger 轉換字元的 bug

當初為了在分頁功能加上「游標經過變換底色」功能,在「第一篇」程式碼 AL 行的 <span> 標籤內加上以下 "滑鼠事件" 程式碼:

onmouseover='this.style.backgroundColor = "#fffff5";' onmouseout='this.style.backgroundColor = (this.className == "Menubox_over") ? "#fffff5" : "#dde3dc";'
基本上這程式碼沒問題,但是怎麼試都無法出現效果。經過反覆不斷地 debug 過程,最後才忽然間發現──"Menubox_over" 字串竟然在儲存後成了 "menubox_over",Blogger 自動把 "M" 大寫轉換成 "m" 小寫,難怪會抓不到 "Menubox_over" 這個 class 的 CSS 效果。

實際上整個程式碼的其他 "Menubox_over" 字串並沒有被 Blogger 轉換成小寫,只有在 "事件" 相關的程式碼,例如滑鼠事件 onmouseover、onmouseout 之內的 javascript 敘述,Blogger 才有這個 bug。

找到原因後解決方法自然就有,把所有的 class 名稱及相關字串 "Menubox_over" 與 "Menubox_out" 通通改為小寫 "menubox_over" 與 "menubox_out" 後,就沒有這樣的鳥事了。這是繼「樹狀分類標籤」→ 「二、開合圖案字元錯亂的問題」後,Blogger 又一個莫名其妙的轉換字元大 bug。


二、安裝兩個以上的分頁群組

由於每個 id 名稱在 html 標籤裡面都必須是獨一無二的,因此安裝兩個以上的分頁群組時,必須注意以下:

1. setTab() 函數:第一篇」原程式碼 BD~BK 行的這個函數只要寫一次即可,整個部落格都能呼叫,因此裝了第二個以上的分頁群組時,BD~BK 可省略。而 第二個群組以後若因為 BD~BK 省略,也沒安插第二篇及第三篇的程式碼,導致 <script> 與 </script> 之間無內容的話,當然 BC 與 BL 行也可刪除。

2. 原程式碼有兩組 id 及參數要命名──AL~AN、AQ~BA,若不清楚怎麼命名的話,整理了以下的 id 及參數命名表可直接複製,方便第二個以後的分頁群組來命名 id 及參數:

// 第二個群組
<span class="Menubox_over" id='two1' onclick='setTab("two",1,3)'  title='顯示 1st 工具'>1st 工具</span>
<span class="Menubox_out" id='two2' onclick='setTab("two",2,3)' title='顯示 2nd 工具'>2nd 工具</span>
<span class="Menubox_out" id='two3' onclick='setTab("two",3,3)' title='顯示 3rd 工具'>3rd 工具</span>

<div id='con_two_1'>第一個 HTML 小工具內容</div>
<div id='con_two_2' style='display:none'>第二個 HTML 小工具內容</div>
<div id='con_two_3' style='display:none'>第三個 HTML 小工具內容</div>

// 第三個群組
<span class="Menubox_over" id='three1' onclick='setTab("three",1,3)'  title='顯示 1st 工具'>1st 工具</span>
<span class="Menubox_out" id='three2' onclick='setTab("three",2,3)' title='顯示 2nd 工具'>2nd 工具</span>
<span class="Menubox_out" id='three3' onclick='setTab("three",3,3)' title='顯示 3rd 工具'>3rd 工具</span>

<div id='con_three_1'>第一個 HTML 小工具內容</div>
<div id='con_three_2' style='display:none'>第二個 HTML 小工具內容</div>
<div id='con_three_3' style='display:none'>第三個 HTML 小工具內容</div>

// 第四個群組
<span class="Menubox_over" id='four1' onclick='setTab("four",1,3)'  title='顯示 1st 工具'>1st 工具</span>
<span class="Menubox_out" id='four2' onclick='setTab("four",2,3)' title='顯示 2nd 工具'>2nd 工具</span>
<span class="Menubox_out" id='four3' onclick='setTab("four",3,3)' title='顯示 3rd 工具'>3rd 工具</span>

<div id='con_four_1'>第一個 HTML 小工具內容</div>
<div id='con_four_2' style='display:none'>第二個 HTML 小工具內容</div>
<div id='con_four_3' style='display:none'>第三個 HTML 小工具內容</div>  

第二個群組的第一個分頁,用紅字標示了三個需要注意、修改的地方,想要自訂id、參數的話主要改這三個地方;以上以一個群組三個分頁為例,若一個群組超過三個或少於三個分頁,請依其邏輯來修改。


備註:之後如有新的自訂配置問題會持續在本篇更新。

讓 Blogger 側邊欄有個簡易安裝的分頁(TAB)功能」系列標題:
一、安裝 HTML 小工具
二、安裝 Blogger 官方小工具
三、隨機分頁功能
四、各種疑難雜症

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

沒有留言:

張貼留言注意事項:

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

TOP