網頁

2013年10月26日

|

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

Views:
上次網誌介紹了一個 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
(簡易安裝方式, 按圖了解 )

9 則留言:

  1. 我見你右邊個TEST好像想add text to comment box,如果做到就好。

    我前日試,估blogger comment box只接受blogger.com的code,我出permission denied之類。
    (我用chrome javascript console試)。

    回覆刪除
    回覆
    1. 大約追蹤過它的位置, 相信由一個 iFrame 載入另一個網址.
      它並不是自家網頁的一個 元件, 所以 document.getelementbyid('commentbodyfield') 會是 null.
      可能永遠不會成功的. 因為 google 過, 前人也找不到.
      退而求其次, 可以用 複製+貼上的方法.
      e.g. 點一下公仔圖, 已經做好 "複製", 自行"貼上"適合位置
      那麼用家可以不用理會代碼, 也可以把代碼修改, 避開 ">" "&" 之類等定控制字元

      刪除
    2. 如果用copy to clipboard,要用flash⋯⋯

      刪除
  2. 請問何解我的 "最近留言 & 各路來賓" 做不到 "展開/隱藏 " 效果嘅?
    可否賜教?

    回覆刪除
    回覆
    1. 因為我自己是用上第三方的程式, 所以在的 HTML 內的 id 是 "HTML1" & "HTML2"
      這個跟你用的一定不會相同.

      網誌最下方有一圖, 介紹如何找到你的 widget ID, 試試看.
      [設計]> [範本]> [編輯HTML]> 尋找 Widget ID
      找到後, 再修改程式碼. 應該可以. *-:)

      刪除
    2. 我到你的 blog 睇過,
      你"最近留言" 的 widget ID 是 HTML3
      而程式上你設定為 HTML2, 所以控制不了.

      刪除
    3. Visitors 是 HTML6
      把程式的 HTML1 改為 HTML6 便可以. :))

      刪除
    4. 睇咗個Widget ID,真喺有D難揾,好彩睇咗你嘅提亦先!Thanks a lot ! ^:)^
      見你又整賣個checkbox ,原來可以共存的! =D> :o3

      刪除
    5. 我特意做一個共存模式, 為了展示之用. :)>-
      當中有多處程式修改, 不建議一般用家模仿. 8-X
      事實上, 兩個共存沒有什麼實際作用. L-)

      刪除

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