替部落格的側邊欄位加上縮起與展開功能

Sidebar effects
下列網址都是替部落格的側邊欄位加上縮起與展開
能:

就我所知以上二者都是使用jQuery Framework來實作的,以下說明的版本則是以最單純的JavaScript來撰寫。

首先說明樂多的大致寫法。樂多的側邊欄
位結構如下:

Roodo Sidebar structure

側邊的標題欄類別名稱是 sidetitle
對應的內容為平行位置的

,類別名稱是
side

我們要做的是當sidetitle上的某個物件(即程式中新增進去的,上圖中以紅框標示)被按下時,在其
onclick事件處理程
式裡,對 class="side">做隱藏或顯示的切換。程式中用toggleSideBoxRoodo函數實作了需要的功能,請有興趣的讀者自行
閱讀。

Xuite的側邊欄位結構和樂多的稍有不同:Xuite Sidebar Structure

在<div
class="sidetitle">裡還有兩層,程式以toggleSideBoxXuite函數實作。程式裡有做註解說明,應該是不難
理解的。

不想看程式只要使用的讀者,請自行增加一個自由欄位(樂多稱插入欄位),在欄位裡輸入下列指令即可使用:

原始程式:http://emisjerry.googlepages.com/bookmark_buttons.js


知為何,IE執行上會有問題,FireFox則正常。

##

您可能也會有興趣的類似文章

2 則留言 »替部落格的側邊欄位加上縮起與展開功能

  • angus Unknow Unknow

    可以把縮起或展開的 state 存在 cookies 中, 這樣讀者便可以按自己的喜好決定看什麼了

  • 簡睿 Unknow Unknow

    This is a good idea. 但sidetitle或side都沒有id,不好辨識…可能只能用其標題來存…或許有空時可以試看看。若BSP能提供就好了…

填寫回應

 

 

 

您可使用這些HTML標籤

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">

隨機文章

  1. 歡迎使用 Trac 0.10.4 
  2. 487李同學的網誌 (1)
  3. [轉貼] 龍卷風網絡收音機 
  4. 又一個Java寫的資料庫前端工具:Execute Query 3.0 (2)
  5. [Tools] 北斗色彩識別器與Kolorgenerator (1)
  6. [DVD] 令人動容的《翻滾吧!男孩》與《歌舞中國》 
  7. [Sites] 與Bloglines類似的PAIPO Reader 
  8. AutoHotkey與Google+ Commander合用-以滑鼠移動訊息位置 
  9. Xuite自動書籤按鈕 V1.1 
  10. 經常找不到文件嗎?試試免費的跨平台桌面搜尋工具:DocFetcher (3)

歷史熱門文章

  1. 如何手動輸入Plurk的表情圖示? (353,110 點擊/2008-09-29)
  2. 簡單放大Plurk輸入區的方法[修訂] (86,930 點擊/2008-09-29)
  3. 啟用&關閉中華電信ZyXEL P874的無線網路連線功能的步驟[修訂] (84,086 點擊/2011-06-01)
  4. Plurk CSS樣式自訂修改全攻略 (83,129 點擊/2009-07-04)
  5. 網路升級光世代50M/3M與設定ZyXEL P874 (53,340 點擊/2011-05-28)
  6. 輕鬆學會彈指神功-揭露AutoHotkey絕技 (43,183 點擊/2008-04-10)
  7. iPad新手入門技巧 (40,449 點擊/2011-02-05)
  8. 分享世博台灣館主題曲『台灣的心跳聲』MV(附歌詞+下載連結+新歌詞) (38,152 點擊/2010-04-27)
  9. 把HTC Touch HD操作介面換成Spb Mobile Shell,美觀又便利! (37,959 點擊/2009-02-18)
  10. 另一套適用手機的影片轉檔工具:WinAVI 3GP/MP4/PSP/iPod Video Converter (35,925 點擊/2009-04-18)