當網頁技術發展成熟到一個階段, 連部落格都可以做到像 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
2008/03/27
讓部落格頁面也有開開關關的效果!
75 comments:
點擊標籤雲之後，頁面會自動捲至最上方，應該是超連結#的關係，請問這能避免嗎？
The element type "b:includable" must be terminated by the matching end-tag 哈哈我又不行了XDD
謝謝該隱的意見, 在 onclick 語法裡, 加上一段 return false; 就不會有捲到頂的問題,已在文章中補上!
矛今,
看起來問題出在第三步驟, 所以b:includable 的結束標籤沒對上.
來skyvee這邊總是能夠學到很多，感謝。
漢斯
tzuche 客氣了, 這是互相交流啊! 從您的遊記, 看到的是另一種角度, 我也收獲很多.^^
小弟嘗試使用兩個小裝置，想水平顯示標籤雲開關，但第二個開關都只出現在第一個下面...
小弟非常期待Skyvee的待續篇-^.^-
lushnsy, 不好意思, 會儘快補上文章.
skyvee,首先很感謝昨天你回應我blog區塊修改法，已經改好了^^
但現在又遇到隱藏開關的問題了，不好意思，我問題這麼多~~"
問題就是我想隱藏html/javaScript區塊，準備好要加入div_id='html' style='display:none時，卻意外發現多了
--only display title if it's non-empty-- 這行。
其他區塊按照您的做法都能隱藏，就唯有html區塊不知如何是好....
lushnsy,或許你修改一下 div id, 避免以html命名, 試看看? 因為我也是用html/javascript 的裝置元素.
確實id更換後結果就正確了，由此可見，blog語法方面真是奇妙的玩意，在次感謝skyvee的大力相助^^
lushnsy,是啊,就算有程式背景,要熟悉blogger版面配置,還是要花點時間. ^^
你好,我按照你的方法做了,可是最後頁面標籤雲的連結有出現卻按不出東西,不知道是哪出了問題,而且我覺得我的開關怎麼做起來怪怪的,可以請你幫我看一下嗎?謝謝 ^^
我的blogger http://0rz.tw/413Zi
這是因為id指定錯誤了,請把 "new Effect.toggle('Label Cloud','blind');return false;"改成"new Effect.toggle('LabelsCloud','blind');return false;"
測試了很多次，都一直無法成功！隱藏widge跟blind的動作指令應該都OK！因為widge有消失，觸發時blog也會跳回頁首... 但就是無法開關成功！不曉得是什麼問題...
自然捲你好,可能要看到實際情況,我比較能知道哪裡有問題呢?widget一開始就要先設display:none; 直到觸發blind時,才出現.
我能傳我的html給你看看嗎？實在很想使用開關的功能
自然捲你好,點一下我的大頭,就有email了!不過我最近要趕東西,可能不能太快回覆哦!
我已經mail給你了！靜待你的回音:)
你好,從你的網頁原始碼看起來, 你並沒有放這段開關的程式啊?? O,O
你好~
我想要跟你一樣用CBOX當做留言版，想說用得跟你一樣可以滑動出來~那第二步驟我要找哪個程式碼去做更動?
jonas,首先你要先在網頁元素的頁面,先新增一個網頁元素(javascript/html),在 版面配置-->修改HTML-->打勾 小裝置,可以先找到你的CBOX的 widget id='XXXXX' ,有可能是htmlXX,這個ID在步驟4就會用到了!然後從第二步驟開始改,試看看吧!
不好意思~我還是用不好
還是我把我的網誌語法Mail給你~你幫我看看我要怎麼用?
jonas,步驟2及步驟4,是要在新增網頁元素的那個介面設定的,尤其第4步驟,不是加在原始檔的,所以您寄給我原始檔,可能也無法加上去呢!只好請您多費心先設好,如果還有問題,再幫您看看.
可是我看你寫的步驟2好像都在修改原始碼區域裡面~我看你的參考圖也是這樣唷!!
jonas, 是在原始碼區修改,不過要先在網頁元素區新增一個網頁元素,才能在原碼區找到這個新增的網頁元素ID.
我都試過了~沒有反應!!
jonas,你的profile關閉了,所以我連不到你的blog.還是你可以把這幾段程式碼貼上來看看.
很實用的一個小技巧XD"...
我最近嘗試想把開關放在左側的導覽列裡面
(不想額外增設一條功能選單)
可是發現語法好像...不大一樣
冏...
有破解方法嗎XD?
左側導覽列所有的連結都在同一個div 裡, 我是沒試過這樣的用法,如果你想試看看,或許把每個連結單獨放在不同div區段?
skyvee您好
我也想把文章分類弄成可以開關，(沒有使用標籤雲)
按造步驟增加code，結果好像沒有作用，是不是哪裡需要修改？
感謝
我的blog：http://xingfengxieyu.blogspot.com/
我錯了....可以了XD
星風,真是好消息! XD
blogger上半部區塊如何修改跟標題圖案一樣大呀?
kimihu 你好,
可以調整header-wrapper的寬度與圖片一致.
我跟着你的方式做了，但是却无法显示处我要的widget，之后出现页面往上滑的效果~
我成功弄到了~
终于发现我所做错的地方了~
谢谢你~
Celestine, 能解決真是太好了!!謝謝您還回來留言,:)
Skyvee,你好
我也依照此教學,很成功弄ok..
但有個問題..我研究老半天..想不出來
可否想請教
如果想要
點選B小工具選單(出現),則A小工具自動消失隱藏
反之,只要點選任何一個小工具選單,則另一個則會自動消失隱藏...
這樣,有辦法嗎?
謝謝你
St, 請參考這篇,看是否符合你的需求? 在部落格頁面加多個開關效果 (prototype)
這個效果最近怪怪的，按了都沒反應
不曉得是不是連結的http://bloggertips.googlecode.com/files/prototype.js檔案出了問題
可不可以麻煩Skyvee檢查一下 ><
我的也是,開關效果不見了,可不可以麻煩Skyvee幫忙檢查一下呢
謝謝
九月,Han,
謝謝兩位的提醒,因為原來放js的地方,流量太大,已被限制存取. 我去下載了較新版的js, 目前已先上傳到google sites, 在 FF可以正常執行, 但在IE, chrome下還無法正常運作, 我可能要再花些時間去解.而且我的blog可能需要重整了...一整個沒力中..orz
總之, 請先參考文章中有註明更新的地方,再幫我測看看瀏覽器是否能運作?
謝謝!
補充一下, 如果兩位的blog是blogspot網域, 放在sites上的js, 是可以執行的, 我剛在FF是登入sites,所以可執行.
看來我要另外找地方放js了.
感謝Skyvee，已經可以運作了
我測試了三個瀏覽器（Firefox、Safari和Google瀏覽器）都正常^^
js的存放點不曉得google付費會員幫不幫得上忙？
九月,
謝謝你的資訊,:)
只要你的blog網址是XXX.blogspot.com, 放在google sites 上的js,就能夠正常執行.
我因為是另外申請的網域, 所以 google sites上的js就無作用.不過,我已暫時找到一個地方放js了.謝謝你的幫忙! :)
謝謝你的回覆
我會找個時間再研究看看
謝謝~
想請問一下Skyvee，本章是用自行安裝的標籤及網頁，那如果使用Blogger所提供的呢?如同貴站目前的網頁一樣，感謝!
Leo,
我不是用Blogger提供的網頁功能,而是用這個方法http://www.skyvee.net/2007/07/bloggerblogspot-menu-bar.html, 先建立出一個水平功能列,再套用這篇文章裡加入開關效果.
我照著步驟做出來的結果是
標籤清單還是顯示在頁尾,沒辦法像你一樣顯示在水平功能列的下方
不知道是哪裡沒做好,可以麻煩您幫忙解決嗎?
謝謝
Alice,
標籤清單應該是要放在文章區的上方, 你是不是放到文章區下方了, 才會出現在頁尾.
謝謝,我再試試看!
我放到文章上方,確實有出現在上方了
但標籤放到上方,就不會像放在sidebar或footer一樣,用list的方式呈現,而是像Tab一樣呈現,是不是可以建議一下,怎麼調整?謝謝!
Alice, 你是否可以抓一下 設計-->網頁元素的截圖? 如果方便的話, 可以抓完後, 上傳到google sites上. 如果是放在文章區的上方,應該不會是以tab方式呈現.
把截圖放在flickr
設定
http://flic.kr/p/97aFkf
顯示
http://flic.kr/p/977Arr
先謝謝你囉!
Alice,
謝謝你幫忙截圖,是我沒說清楚,標籤的小工具是要跟文章放在同一區的,如下圖, 參考一下. :)
http://img338.imageshack.us/i/skyvee.png/
謝謝你哦,可以了吔!
接著，我有個需求，不知道你可不可以給個建議
我想在首頁（用你提供的方法，做了一個永久置頂的文章）取得某個標籤的最新一篇文章標題及摘要顯示，如果那篇文章有使用圖片，也希望能取得第一張圖片來顯示，不知道有什麼好方法可以用
謝謝！
我目前沒有看過有"指定標籤,而可以把文章自動置頂"的hack,我倒是很希望blogger未來會提供.因為要加工這個功能,應該要花不少力氣.或許你可以用關鍵字google看看,是否有人已這麼做?
我是用文章→編輯網頁→新網頁
再使用新增小工具(網頁)來取帶大大前篇教的標籤雲。
可是我依大大教學結果是"標籤雲開關"出現在「每個」網頁下，會出"標籤雲開關"幾個字而且點他也會有出現和隱藏沒錯。但是我是要像大大一樣，點標籤雲才會出現和隱藏，怎麼都做不出來。麻煩大大教我一下，我研究到快瘋了...超級新手..
我做出來的樣子圖片:
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
1.上上面的PO文題請大大勿略，因為我已經改用大大教的"在blogger(blogspot) 標題列下加入一個水平列的功能選單(menu bar)"然後是用絕對位置做的，做出標籤雲了。
2. 但有二個問題：在上面的圖片已更新和問題說明。
麻煩大大了，試了好幾個小時了，感謝大大幫忙。
Kyle
因為沒有你的blog template html,所以我不確定你的css 是否一致, 你可以先找一下 .widget ul, 在裡面加入
list-style: none;
就 可以將 . 這符號移除.
另外的一個問題, 我猜是你的小工具位置沒有放在header區?
大大，謝謝您的回答。不好意思，那麼久才回，因為之前忘了把大大的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;
}
附上我的 html:
http://dl.dropbox.com/u/17453089/template-6994453465376166182.xml
我發現..是不是我亂放...放在header-inner 裡面是不行的..因為我沒有#header 找都找不到...唉
kyle,
你的檔案我無法連結, 建議先把內容複製下來,貼到notepad,存成txt檔, 再上傳到dropbox.
或是你加一段 css 試看看.
#navmenu ul
{
list-style: none;
}
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是否懂我的表達..
謝謝
st,
新年快樂!! 抱歉,晚回信了.
如果你受robots.txt限制的URL都是 http://******.blogspot.com/search/label 下的文章, 應該是不用太擔心. 並不是文章被封鎖住, 而是像這類型的文章,是屬於內容重複出現,並不會被index.
你也可以自己輸入網址看看是不是能正常出現.
:)
喔~原來是這樣
聽Skyvee如此講解,我就放心了
感謝~感謝~
張貼意見
謝謝您願意在此分享心得, 讓文章內容更豐富.