當網頁技術發展成熟到一個階段, 連部落格都可以做到像 flash 般的動態效果.一旦按一下標題, 可指定某個區域發生消失,滑動或出現(blind, slide, appear)的動作.
利用Prototype的技術, 可以達成這類動態效果.
方法就是先將網頁上的一個小裝置設成看不到(display:none), 一旦按下了水平列的某一個標題頁籤, 再讓這個小裝置滑動出現.
如果再按一次就收起來, 這就是 blind 的效果.
除了 blind ,還有許多特效, 有興趣的話, 不妨可深入研究Prototype. 現在就先以 blind 的應用來說明一下.
簡單來說, 這裡發生了兩個事件, 一 按(click) , 二 觸發blind動作. 也就是說先有按的動作, 才有觸發的效果!
1. 在 <head> </head> 之間加入以下程式碼,<script src='http://bloggertips.googlecode.com/files/prototype.js'
type='text/javascript'/>
<script src='http://bloggertips.googlecode.com/files/scriptaculous.js?load=effects' type='text/javascript'/>
2. 接下來, 在要產生效果的小裝置(或區塊), 先加一組 div 標籤, 設定 id 值(此 id 不能重覆)及加入藏起來(style="display:none")的語法.
以 blogger 為例, 這裡如果我想把 b:widget id='Label1' 做成動態呈現效果, 那麼就在 版面配置-->修改HTML-->打勾 小裝置, 先找到 b:widget id='Label1' 後, 在 b:includable id='main' 之後, 加入以下這行.<div id='LabelsCloud' style='display:none'>
3.然後加 div 的結束標籤, 在</b:includable> 之前加入 </div>
參考下圖說明(點一下圖片, 可放大檢視).
4. 接著就是要設定按的動作了! 回到網頁元素, 在水平列頁籤的程式區, 把標籤雲的程式修改如下,紅字部份請記得修改!(此處的id 要跟 步驟2的id 一樣.)<li><a href="#" onclick="new Effect.toggle('LabelsCloud','blind');return false;">標籤雲開關</a></li>
5. 至於要發生開關動作的小裝置,在這個例子中, 是放在文章的上方.
目前Prototype 的最新版本增加更多新花樣, 有興趣的話可研究一番!
另外,如果想讓兩個以上的小裝置有動態效果, 要怎麼做呢? 這部份下次再聊吧!
Prototypejs : http://www.prototypejs.org/
scriptaculous : http://wiki.script.aculo.us/scriptaculous/show/Usage
43 comments:
3/28/2008
點擊標籤雲之後，頁面會自動捲至最上方，應該是超連結#的關係，請問這能避免嗎？
3/28/2008
The element type "b:includable" must be terminated by the matching end-tag 哈哈我又不行了XDD
3/28/2008
謝謝該隱的意見, 在 onclick 語法裡, 加上一段 return false; 就不會有捲到頂的問題,已在文章中補上!
3/28/2008
矛今,
看起來問題出在第三步驟, 所以b:includable 的結束標籤沒對上.
3/28/2008
來skyvee這邊總是能夠學到很多，感謝。
漢斯
3/28/2008
tzuche 客氣了, 這是互相交流啊! 從您的遊記, 看到的是另一種角度, 我也收獲很多.^^
4/04/2008
小弟嘗試使用兩個小裝置，想水平顯示標籤雲開關，但第二個開關都只出現在第一個下面...
小弟非常期待Skyvee的待續篇-^.^-
4/05/2008
lushnsy, 不好意思, 會儘快補上文章.
4/11/2008
skyvee,首先很感謝昨天你回應我blog區塊修改法，已經改好了^^
但現在又遇到隱藏開關的問題了，不好意思，我問題這麼多~~"
問題就是我想隱藏html/javaScript區塊，準備好要加入div_id='html' style='display:none時，卻意外發現多了
--only display title if it's non-empty-- 這行。
其他區塊按照您的做法都能隱藏，就唯有html區塊不知如何是好....
4/11/2008
lushnsy,或許你修改一下 div id, 避免以html命名, 試看看? 因為我也是用html/javascript 的裝置元素.
4/12/2008
4/12/2008
確實id更換後結果就正確了，由此可見，blog語法方面真是奇妙的玩意，在次感謝skyvee的大力相助^^
4/13/2008
lushnsy,是啊,就算有程式背景,要熟悉blogger版面配置,還是要花點時間. ^^
5/01/2008
你好,我按照你的方法做了,可是最後頁面標籤雲的連結有出現卻按不出東西,不知道是哪出了問題,而且我覺得我的開關怎麼做起來怪怪的,可以請你幫我看一下嗎?謝謝 ^^
我的blogger http://0rz.tw/413Zi
5/02/2008
這是因為id指定錯誤了,請把 "new Effect.toggle('Label Cloud','blind');return false;"改成"new Effect.toggle('LabelsCloud','blind');return false;"
5/02/2008
5/02/2008
6/16/2008
6/16/2008
7/04/2008
測試了很多次，都一直無法成功！隱藏widge跟blind的動作指令應該都OK！因為widge有消失，觸發時blog也會跳回頁首... 但就是無法開關成功！不曉得是什麼問題...
7/04/2008
自然捲你好,可能要看到實際情況,我比較能知道哪裡有問題呢?widget一開始就要先設display:none; 直到觸發blind時,才出現.
7/04/2008
我能傳我的html給你看看嗎？實在很想使用開關的功能
7/06/2008
自然捲你好,點一下我的大頭,就有email了!不過我最近要趕東西,可能不能太快回覆哦!
7/07/2008
我已經mail給你了！靜待你的回音:)
7/10/2008
你好,從你的網頁原始碼看起來, 你並沒有放這段開關的程式啊?? O,O
8/04/2008
你好~
我想要跟你一樣用CBOX當做留言版，想說用得跟你一樣可以滑動出來~那第二步驟我要找哪個程式碼去做更動?
8/07/2008
jonas,首先你要先在網頁元素的頁面,先新增一個網頁元素(javascript/html),在 版面配置-->修改HTML-->打勾 小裝置,可以先找到你的CBOX的 widget id='XXXXX' ,有可能是htmlXX,這個ID在步驟4就會用到了!然後從第二步驟開始改,試看看吧!
8/09/2008
不好意思~我還是用不好
還是我把我的網誌語法Mail給你~你幫我看看我要怎麼用?
8/10/2008
jonas,步驟2及步驟4,是要在新增網頁元素的那個介面設定的,尤其第4步驟,不是加在原始檔的,所以您寄給我原始檔,可能也無法加上去呢!只好請您多費心先設好,如果還有問題,再幫您看看.
8/11/2008
可是我看你寫的步驟2好像都在修改原始碼區域裡面~我看你的參考圖也是這樣唷!!
8/11/2008
jonas, 是在原始碼區修改,不過要先在網頁元素區新增一個網頁元素,才能在原碼區找到這個新增的網頁元素ID.
8/12/2008
我都試過了~沒有反應!!
8/13/2008
jonas,你的profile關閉了,所以我連不到你的blog.還是你可以把這幾段程式碼貼上來看看.
1/11/2009
很實用的一個小技巧XD"...
我最近嘗試想把開關放在左側的導覽列裡面
(不想額外增設一條功能選單)
可是發現語法好像...不大一樣
冏...
有破解方法嗎XD?
1/12/2009
左側導覽列所有的連結都在同一個div 裡, 我是沒試過這樣的用法,如果你想試看看,或許把每個連結單獨放在不同div區段?
7/15/2009
skyvee您好
我也想把文章分類弄成可以開關，(沒有使用標籤雲)
按造步驟增加code，結果好像沒有作用，是不是哪裡需要修改？
感謝
我的blog：http://xingfengxieyu.blogspot.com/
7/15/2009
我錯了....可以了XD
7/15/2009
星風,真是好消息! XD
10/05/2009
blogger上半部區塊如何修改跟標題圖案一樣大呀?
10/06/2009
kimihu 你好,
可以調整header-wrapper的寬度與圖片一致.
4/11/2010
我跟着你的方式做了，但是却无法显示处我要的widget，之后出现页面往上滑的效果~
4/13/2010
我成功弄到了~
终于发现我所做错的地方了~
谢谢你~
4/14/2010
Celestine, 能解決真是太好了!!謝謝您還回來留言,:)
我要留言
謝謝您願意在此分享心得, 讓文章內容更豐富.
這篇文章被引用到...