2008/03/27

讓部落格頁面也有開開關關的效果!




當網頁技術發展成熟到一個階段, 連部落格都可以做到像 flash 般的動態效果.一旦按一下標題, 可指定某個區域發生消失,滑動或出現(blind, slide, appear)的動作.


利用Prototype的技術, 可以達成這類動態效果.

方法就是先將網頁上的一個小裝置設成看不到(display:none), 一旦按下了水平列的某一個標題頁籤, 再讓這個小裝置滑動出現.


如果再按一次就收起來, 這就是 blind 的效果.


除了 blind ,還有許多特效, 有興趣的話, 不妨可深入研究Prototype. 現在就先以 blind 的應用來說明一下.

簡單來說, 這裡發生了兩個事件, 一 按(click) , 二 觸發blind動作. 也就是說先有按的動作, 才有觸發的效果!

1. 在 <head> </head> 之間加入以下程式碼,
(**2010/10/18 更新js的網址)
<script src='https://sites.google.com/site/skyvee/Home/codes-2/prototype.js'
type='text/javascript'/>
<script src='https://sites.google.com/site/skyvee/Home/codes-2/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

相關文章 :

76 comments:

該隱 提到...

點擊標籤雲之後,頁面會自動捲至最上方,應該是超連結#的關係,請問這能避免嗎?

γειισω (矛今) 提到...

The element type "b:includable" must be terminated by the matching end-tag 哈哈我又不行了XDD

Skyvee 提到...

謝謝該隱的意見, 在 onclick 語法裡, 加上一段 return false; 就不會有捲到頂的問題,已在文章中補上!

Skyvee 提到...

矛今,
看起來問題出在第三步驟, 所以b:includable 的結束標籤沒對上.

tzuche 提到...

來skyvee這邊總是能夠學到很多,感謝。

漢斯

skyvee 提到...

tzuche 客氣了, 這是互相交流啊! 從您的遊記, 看到的是另一種角度, 我也收獲很多.^^

Lushnsy 提到...

小弟嘗試使用兩個小裝置,想水平顯示標籤雲開關,但第二個開關都只出現在第一個下面...
小弟非常期待Skyvee的待續篇-^.^-

Skyvee 提到...

lushnsy, 不好意思, 會儘快補上文章.

Lushnsy 提到...

skyvee,首先很感謝昨天你回應我blog區塊修改法,已經改好了^^

但現在又遇到隱藏開關的問題了,不好意思,我問題這麼多~~"

問題就是我想隱藏html/javaScript區塊,準備好要加入div_id='html' style='display:none時,卻意外發現多了
--only display title if it's non-empty-- 這行。

其他區塊按照您的做法都能隱藏,就唯有html區塊不知如何是好....

Skyvee 提到...

lushnsy,或許你修改一下 div id, 避免以html命名, 試看看? 因為我也是用html/javascript 的裝置元素.

Lushnsy 提到...
作者已經移除這則留言。
Lushnsy 提到...

確實id更換後結果就正確了,由此可見,blog語法方面真是奇妙的玩意,在次感謝skyvee的大力相助^^

Skyvee 提到...

lushnsy,是啊,就算有程式背景,要熟悉blogger版面配置,還是要花點時間. ^^

Just Music 提到...

你好,我按照你的方法做了,可是最後頁面標籤雲的連結有出現卻按不出東西,不知道是哪出了問題,而且我覺得我的開關怎麼做起來怪怪的,可以請你幫我看一下嗎?謝謝 ^^
我的blogger http://0rz.tw/413Zi

skyvee 提到...

這是因為id指定錯誤了,請把 "new Effect.toggle('Label Cloud','blind');return false;"改成"new Effect.toggle('LabelsCloud','blind');return false;"

Just Music 提到...
作者已經移除這則留言。
Just Music 提到...
作者已經移除這則留言。
xians 提到...
作者已經移除這則留言。
xians 提到...
作者已經移除這則留言。
驕傲的自然捲 提到...

測試了很多次,都一直無法成功!隱藏widge跟blind的動作指令應該都OK!因為widge有消失,觸發時blog也會跳回頁首... 但就是無法開關成功!不曉得是什麼問題...

skyvee 提到...

自然捲你好,可能要看到實際情況,我比較能知道哪裡有問題呢?widget一開始就要先設display:none; 直到觸發blind時,才出現.

驕傲的自然捲 提到...

我能傳我的html給你看看嗎?實在很想使用開關的功能

Skyvee 提到...

自然捲你好,點一下我的大頭,就有email了!不過我最近要趕東西,可能不能太快回覆哦!

驕傲的自然捲 提到...

我已經mail給你了!靜待你的回音:)

skyvee 提到...

你好,從你的網頁原始碼看起來, 你並沒有放這段開關的程式啊?? O,O

Jonas 提到...

你好~
我想要跟你一樣用CBOX當做留言版,想說用得跟你一樣可以滑動出來~那第二步驟我要找哪個程式碼去做更動?

skyvee 提到...

jonas,首先你要先在網頁元素的頁面,先新增一個網頁元素(javascript/html),在 版面配置-->修改HTML-->打勾 小裝置,可以先找到你的CBOX的 widget id='XXXXX' ,有可能是htmlXX,這個ID在步驟4就會用到了!然後從第二步驟開始改,試看看吧!

Jonas 提到...

不好意思~我還是用不好
還是我把我的網誌語法Mail給你~你幫我看看我要怎麼用?

Skyvee 提到...

jonas,步驟2及步驟4,是要在新增網頁元素的那個介面設定的,尤其第4步驟,不是加在原始檔的,所以您寄給我原始檔,可能也無法加上去呢!只好請您多費心先設好,如果還有問題,再幫您看看.

Jonas 提到...

可是我看你寫的步驟2好像都在修改原始碼區域裡面~我看你的參考圖也是這樣唷!!

skyvee 提到...

jonas, 是在原始碼區修改,不過要先在網頁元素區新增一個網頁元素,才能在原碼區找到這個新增的網頁元素ID.

Jonas 提到...

我都試過了~沒有反應!!

Skyvee 提到...

jonas,你的profile關閉了,所以我連不到你的blog.還是你可以把這幾段程式碼貼上來看看.

就是喜歡 提到...

很實用的一個小技巧XD"...
我最近嘗試想把開關放在左側的導覽列裡面
(不想額外增設一條功能選單)
可是發現語法好像...不大一樣
冏...
有破解方法嗎XD?

skyvee 提到...

左側導覽列所有的連結都在同一個div 裡, 我是沒試過這樣的用法,如果你想試看看,或許把每個連結單獨放在不同div區段?

星風寫語 提到...

skyvee您好
我也想把文章分類弄成可以開關,(沒有使用標籤雲)
按造步驟增加code,結果好像沒有作用,是不是哪裡需要修改?
感謝
我的blog:http://xingfengxieyu.blogspot.com/

星風寫語 提到...

我錯了....可以了XD

Skyvee 提到...

星風,真是好消息! XD

kimihu 提到...

blogger上半部區塊如何修改跟標題圖案一樣大呀?

Skyvee 提到...

kimihu 你好,
可以調整header-wrapper的寬度與圖片一致.

Celestine Lee 提到...

我跟着你的方式做了,但是却无法显示处我要的widget,之后出现页面往上滑的效果~

Celestine Lee 提到...

我成功弄到了~
终于发现我所做错的地方了~
谢谢你~

Skyvee 提到...

Celestine, 能解決真是太好了!!謝謝您還回來留言,:)

St. 提到...

Skyvee,你好
我也依照此教學,很成功弄ok..
但有個問題..我研究老半天..想不出來
可否想請教
如果想要
點選B小工具選單(出現),則A小工具自動消失隱藏
反之,只要點選任何一個小工具選單,則另一個則會自動消失隱藏...

這樣,有辦法嗎?

謝謝你

skyvee 提到...

St, 請參考這篇,看是否符合你的需求? 在部落格頁面加多個開關效果 (prototype)

九月 提到...

這個效果最近怪怪的,按了都沒反應
不曉得是不是連結的http://bloggertips.googlecode.com/files/prototype.js檔案出了問題
可不可以麻煩Skyvee檢查一下 ><

Han 提到...

我的也是,開關效果不見了,可不可以麻煩Skyvee幫忙檢查一下呢
謝謝

Skyvee 提到...

九月,Han,

謝謝兩位的提醒,因為原來放js的地方,流量太大,已被限制存取. 我去下載了較新版的js, 目前已先上傳到google sites, 在 FF可以正常執行, 但在IE, chrome下還無法正常運作, 我可能要再花些時間去解.而且我的blog可能需要重整了...一整個沒力中..orz
總之, 請先參考文章中有註明更新的地方,再幫我測看看瀏覽器是否能運作?
謝謝!

Skyvee 提到...

補充一下, 如果兩位的blog是blogspot網域, 放在sites上的js, 是可以執行的, 我剛在FF是登入sites,所以可執行.

看來我要另外找地方放js了.

九月 提到...

感謝Skyvee,已經可以運作了
我測試了三個瀏覽器(Firefox、Safari和Google瀏覽器)都正常^^

js的存放點不曉得google付費會員幫不幫得上忙?

Skyvee 提到...

九月,
謝謝你的資訊,:)
只要你的blog網址是XXX.blogspot.com, 放在google sites 上的js,就能夠正常執行.
我因為是另外申請的網域, 所以 google sites上的js就無作用.不過,我已暫時找到一個地方放js了.謝謝你的幫忙! :)

st 提到...

謝謝你的回覆
我會找個時間再研究看看
謝謝~

Leo Yang 提到...

想請問一下Skyvee,本章是用自行安裝的標籤及網頁,那如果使用Blogger所提供的呢?如同貴站目前的網頁一樣,感謝!

Skyvee 提到...

Leo,
我不是用Blogger提供的網頁功能,而是用這個方法http://www.skyvee.net/2007/07/bloggerblogspot-menu-bar.html, 先建立出一個水平功能列,再套用這篇文章裡加入開關效果.

alice 提到...

我照著步驟做出來的結果是
標籤清單還是顯示在頁尾,沒辦法像你一樣顯示在水平功能列的下方
不知道是哪裡沒做好,可以麻煩您幫忙解決嗎?
謝謝

Skyvee 提到...

Alice,
標籤清單應該是要放在文章區的上方, 你是不是放到文章區下方了, 才會出現在頁尾.

Alice 提到...

謝謝,我再試試看!

Alice 提到...

我放到文章上方,確實有出現在上方了
但標籤放到上方,就不會像放在sidebar或footer一樣,用list的方式呈現,而是像Tab一樣呈現,是不是可以建議一下,怎麼調整?謝謝!

Skyvee 提到...

Alice, 你是否可以抓一下 設計-->網頁元素的截圖? 如果方便的話, 可以抓完後, 上傳到google sites上. 如果是放在文章區的上方,應該不會是以tab方式呈現.

Alice 提到...

把截圖放在flickr
設定
http://flic.kr/p/97aFkf
顯示
http://flic.kr/p/977Arr
先謝謝你囉!

Skyvee 提到...

Alice,

謝謝你幫忙截圖,是我沒說清楚,標籤的小工具是要跟文章放在同一區的,如下圖, 參考一下. :)
http://img338.imageshack.us/i/skyvee.png/

Alice 提到...

謝謝你哦,可以了吔!

Alice 提到...

接著,我有個需求,不知道你可不可以給個建議
我想在首頁(用你提供的方法,做了一個永久置頂的文章)取得某個標籤的最新一篇文章標題及摘要顯示,如果那篇文章有使用圖片,也希望能取得第一張圖片來顯示,不知道有什麼好方法可以用
謝謝!

Skyvee 提到...

我目前沒有看過有"指定標籤,而可以把文章自動置頂"的hack,我倒是很希望blogger未來會提供.因為要加工這個功能,應該要花不少力氣.或許你可以用關鍵字google看看,是否有人已這麼做?

Kyle 提到...

我是用文章→編輯網頁→新網頁
再使用新增小工具(網頁)來取帶大大前篇教的標籤雲。
可是我依大大教學結果是"標籤雲開關"出現在「每個」網頁下,會出"標籤雲開關"幾個字而且點他也會有出現和隱藏沒錯。但是我是要像大大一樣,點標籤雲才會出現和隱藏,怎麼都做不出來。麻煩大大教我一下,我研究到快瘋了...超級新手..

Kyle 提到...

我做出來的樣子圖片:
http://dl.dropbox.com/u/17453089/%E6%88%91%E8%A9%A6%E5%87%BA%E7%9A%84%E6%A8%A3%E5%AD%90.png

Kyle 提到...

1.上上面的PO文題請大大勿略,因為我已經改用大大教的"在blogger(blogspot) 標題列下加入一個水平列的功能選單(menu bar)"然後是用絕對位置做的,做出標籤雲了。

2. 但有二個問題:在上面的圖片已更新和問題說明。

麻煩大大了,試了好幾個小時了,感謝大大幫忙。

Skyvee 提到...

Kyle
因為沒有你的blog template html,所以我不確定你的css 是否一致, 你可以先找一下 .widget ul, 在裡面加入
list-style: none;
就 可以將 . 這符號移除.
另外的一個問題, 我猜是你的小工具位置沒有放在header區?

Kyle 提到...

大大,謝謝您的回答。不好意思,那麼久才回,因為之前忘了把大大的blog存起來,找了好久才找到。
二個問題我我解決了一個,另一個有符號的問題我用大大的方法還是無解。我之前做標籤雲是用大大回楊大鵬那份如下,我想是這裡出了問題:

#navmenu{
width:390px;
top: 473px;
position: absolute;
text-align: center;
font: bold 11px/11px Verdana, Lucida Grande, Helvetica;
line-height:23px;
margin-left: 75px;
color:#ffffff;
}

#navmenu li{
float:left;
list-style-type:none;
border-left:1px solid #ffffff;
border-top:1px solid #ffffff;
border-right:1px solid #777D85;
border-bottom:1px solid #777D85;
background:#27408b;
white-space:nowrap;
}

#navmenu li a{
display:block;
padding:0 10px;
font-size:10px;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #ffffff;
}

* html #navmenu a {width:1%;} #navmenu .selected,#navmenu a:hover{
background:#80b0da;
color:#ffffff;
text-decoration:none;
}

* +html #navmenu a {width:1%;} #navmenu .selected,#navmenu a:hover{
background:#80b0da;
color:#ffffff;
text-decoration:none;
}

Kyle 提到...

附上我的 html:
http://dl.dropbox.com/u/17453089/template-6994453465376166182.xml

Kyle 提到...

我發現..是不是我亂放...放在header-inner 裡面是不行的..因為我沒有#header 找都找不到...唉

Skyvee 提到...

kyle,
你的檔案我無法連結, 建議先把內容複製下來,貼到notepad,存成txt檔, 再上傳到dropbox.
或是你加一段 css 試看看.
#navmenu ul
{
list-style: none;
}

st 提到...

Skyvee~
我又來請教你,我的blog..搜索受限,猜想是robots.txt來限制搜索引擎抓取,我也曾先作功課..但還是搞不太懂(robots.txt..)

在我的Google的網站管理員工具。顯示網頁檢索錯誤:
受 robots.txt 限制 ‎(179)‎找不到 ‎(8)‎,

也不知要在哪除掉 robots.txt 檔?
檢索器存取方式->測試 robots.txt-->是不是刪除Disallow: /search 就可??

還是在產生 robots.txt->全部允許預設檢索器存取權,選擇允許的動作,->所永漫遊器->(比如我受robots.txt限制的URL是http://******.blogspot.com/search/label ,在目錄和檔案如打 (/search/label)
就可允許所有的標籤被引擎抓取到?

不好意思..說得很亂..也不知到Skyvee是否懂我的表達..

謝謝

Skyvee 提到...

st,

新年快樂!! 抱歉,晚回信了.

如果你受robots.txt限制的URL都是 http://******.blogspot.com/search/label 下的文章, 應該是不用太擔心. 並不是文章被封鎖住, 而是像這類型的文章,是屬於內容重複出現,並不會被index.

你也可以自己輸入網址看看是不是能正常出現.

:)

st 提到...

喔~原來是這樣
聽Skyvee如此講解,我就放心了
感謝~感謝~

Joël Chang 提到...

你好,想請教此效果是否有其他須注意的地方,幾經嘗試都未能成功?

張貼留言

謝謝您願意在此分享心得, 讓文章內容更豐富.