網頁

2014年10月24日

|

WIDGET 展開/隱藏 按鈕 再度加強 V3版

Views:
Widget 展開/隱藏 後掛入方式, 之前設計了 2 個版本,
當中有一個問題, 一直沒有好好的解決,
把一些"小工具"展開或是隱藏之後, 一旦跳到其他位置, e.g. 首頁; 內文; 標籤 ...
Widget 展開模式又會回到預設值. 又以"網誌封存"最不方便.

這次設計的第 3 版, 可以保留最後的 展開/隱藏 狀態,
而且把用戶自行設定的部分, 用比較簡單的方法設定.
介面上設計成 radio (單選), 或是 checkbox (多選)的共存模式, 簡單方便.


Widget 的位置安排





建議把本程式放在, 需要控制的其他小工具之上.
當操控的時候, 不會因為 widget 隱藏的同時, 本程式跳到另一個位置.




  (簡易安裝方式, 按圖了解 )






程式碼用簡易方式安裝, 不用修改後台範本. 

<!-- /* Widget 展開隱藏 按鈕 V3.0 */ -->
<script>
  var Widget_ID = ["BlogArchive1", "HTML2", "HTML1", "Followers1"];
  var Widget_name = ["<網誌封存>", "<最近留言>", "<各路來賓>", "<追蹤者>"];
  var start_state = "false|true|true|true|"
  var delay_time = 0
</script> 
<script src="https://googledrive.com/host/0B9w7kASMsnuxVk1KZE5mMUh3NlE/widget_onoff_V3.js"/></script>

介紹中用了 4 個 widget 控制, 當然這個跟你的網誌一定不相同,
所以, 你需要決定及設計, 你所需要的.

程式的第 3 行,
widget_ID 就是後台裡, widget 的唯一名稱, 只要跟程式碼的方式寫上, 2 個; 3 個或是 4 個都不是問題. 基本把名稱放在 " " 裡頭便可以. 程式結構不要修改. (往下有找出 ID 的方法)

第 4 行, 是 widget_name, 對應上一行的 ID, 一對一的顯示名字.
第 5 行, 是顯示/隱藏 的預設值, 對應 ID 一對一的, false= 隱藏, true=顯示. 分格號是 | .
第 6 行, (22-Nov-2014 更新) 看似 0 秒都可以, 快速地馬上執行.
是延遲執行參數, 因為程式比其他 widget 更早載入, 所以需要時間等待其他widget載入後, 才作出處理. 1000 即是 1 秒鐘時間, 如果你的網誌比較複雜, 可能需要更長時間延遲, e.g. 1500

最簡單的方法, 找出 Widget ID
利用 Chorm 瀏覽器內置的 Developer Tools,
簡單的標示選擇了 widget 名稱, 用滑鼠右鍵點下 "檢查元素",
它會彈出 Developer Tools, 在 widget 名字上列 id, 就是 Widget ID 名稱.

沒有留言:

發佈留言

★ 謝謝留言,留下的一句話,已經是很好的推動力 !
★ 勾選右下角的「通知我 」可以由電郵收到留言回覆!
★ 留言與文章無關的主題時,請到頂列「留言版 GuestBook」暢所欲言。
★ 若發佈留言後,留言不見了。可能被系統錯誤判斷為垃圾留言,請不用擔心,我會盡快將留言恢復。
◎ 本留言區已經支援 Unicode Emoji,對應 Win10 的浮動鍵盤。歡迎貼上,增加效果。
◎ 支援 YouTube 超連結對應,支援 jpg , jpeg , gif , png 這4種圖片顯示格式。
◎ 文章介紹 2016 表情符號 V2 更新版 ( Unicode Emoji 格式 ) 顯示策劃