WIDGET 展開/隱藏 按鈕 進階加強 (簡易安裝版) V2

上次網誌介紹了一個 widget 展開/隱藏 後掛入的方式, 用了一段時間之後, 感覺有不足的地方.
所以決定再寫一個 進階加強 版.

• 可以自由決定用那個使用模式.
• 決定那個 widget 是預設展開項目.
• 字體顏色.
• 同樣是簡易安裝版.

程式碼 (簡易安裝, 顏色字需要內容修改, 請參考說明)

1. 2000 首次自動執行延遲時間
2. color="blue" 字體色彩設定
3. radio "收音機"按鈕模式, 可以改為 checkbox "複選核取方塊"
4. checked 預設選取
5. BlogArchive1 對應的 Widget ID (改為自己網誌所對應的)
6. [網誌封存] 顯示文字, 可自行寫上, 中文英文也可以

<!-- /* Widget 展開/隱藏 按鈕 V2.0 */ -->
<script>
function showme(frm){
 for(var i=0; i<frm.ctbx.length; i++){
  if (frm.ctbx[i].checked)
   {document.getElementById(frm.ctbx[i].value).style.display=''}
   else
   {document.getElementById(frm.ctbx[i].value).style.display='none'}
}}
setTimeout("showme(document.getElementById('sbox'))",2000);
</script>

<form id="sbox" onclick="showme(this)">
<b><font color="blue">
<label><input type="radio" name="ctbx" checked value="HTML2"/>[最近留言]</label><br/>
<label><input type="radio" name="ctbx" value="BlogArchive1"/>[網誌封存]</label><br/>
<label><input type="radio" name="ctbx" value="Followers1"/>[追蹤者]</label><br/>
<label><input type="radio" name="ctbx" value="HTML1"/>[各路來賓]</label><br/>
</font></b>
</form>

程式說明
第一段即是 <script>....</script>
可以全數複制, 不用修改. 當中只有一個參數, 綠色字的 2000, 它的單位是千份一秒, 2000ms 即是二秒鐘. 這裡的作用是" 2 秒後執行 隱藏/展開 的 script"
因為這是一個後掛入的 HTML/JavaScript 程式碼, 所以需要一點時間, 等待所有 widget 掛入後才作處理. 如果 2 秒不足, 可以加長時間, e.g. 3秒 即是 3000 .

第二段即是 <form>....</form>
主要是網頁上顯示的文字, 以及 input 的選擇結構. 有多個修改的位置.
每一個 input 選項便是一個 widget, 基本是這樣子...
<label><input .... value="Widget ID">顯示文字</label><br/>
需要處理多少個 widget, 就應該有多少句. (如我的例子, 共有4句.)
藍色字是需要換上你的 Widget ID , 顯示文字 也是換上你自己的.
(找得 Widget ID, 請看最下方的圖片說明)

文字顏色  <font color="blue"> </font> ,把這2句刪除, 文字是用系統色彩.
也可以自己設定顏色. 十六基本可用顏色是...
Aqua; Black; Blue; Fuchsia; Gray; Green; Lime; Maroon;
Navy; Olive; Purple; Red; Silver; Teal; White; Yellow;

type="radio" 是收音機模式, 即是有一個預設的選項. 由 checked 這個字管理.
把 checked 放到那一句, 那句便是預設.
效果是一開始會 展示 一個 widget, 點選轉換, 也只會是 展示 一個.
(我的網誌上用的是 Radio 模式)

另外也可以把 radio 換成 checkbox ,
type="checkbox" 是多項選擇模式, 預設選項也是由 checked 這個字管理.
checked 可以多於 1 個, 或是沒有.
效果是一開始有預設的便會 展示, 每次點下而多一個或少一個, 也會同步發生, 全部顯示, 或是全部不顯示都可以.

[設計]> [範本]> [編輯HTML]> 尋找 Widget ID

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