2008/04/06

在部落格頁面加多個開關效果 (prototype)




上回介紹 讓部落格頁面也有開開關關的效果! , 主要是設定單個開關, 如果想同時讓兩個以上的網頁元素都有開關效果, 可以怎麼做呢? 其實只要加入關閉的設定就可以了.



要讓多個開關發揮效果, 主要是當開一個開關時, 就要關掉其他的開關.舉例來說, 如果有三個網頁元素, 當開啟一個網頁元素時, 另兩個網頁元素要關掉. 而這部份的程式碼, 是要寫在 控制開關區.

1.以兩個網頁元素來說明, 如 留言板的div ID 為cbox, 標籤雲的 div ID為 tagcloud



在網頁元素區, 兩個要設定開關的網頁元素, 都放在文章區上方.


2. 開啟 控制開關 的程式區, 進入編輯.


3. 在標籤雲(tagcloud)的開關區, 設定關掉留言板(cbox)的語法, 如Element.hide('cbox'); 同樣地, 記得在留言板的開關區, 加入這行關掉標籤雲(tagcloud)的程式碼.Element.hide('tagcloud'); 如果多個開關, 就要在每一個開關, 關掉其他的開關.以此類推.



相關文章 :

25 comments:

Lushnsy 提到...

感謝skyvee這篇教學文,使小弟受益良多,
Blog整體也活躍了許多。

但標籤雲開關的排列位子問題,小弟不知如何解決,可能小弟在標籤雲開關的第一篇教學意見當中發問的不是很清楚:
http://aycu40.webshots.com/image/51759/2004262134206618887_rs.jpg

新增了第二個開關,小弟想讓第二個開關出現在第一個右邊,不知該如何修改,要設定水平排列開關是不是需要有相容的模板呢?

Skyvee 提到...

lushnsy,位置問題, 是要由版型決定, 如果你希望放兩個開關的位置, 是可以左右方式呈現, 在網頁元素頁面時, 應該是可以拖拉方式把第二個開關的網頁元素放在第一個開關右邊. 至於水平列開關, 只要你找得到對應的標籤, 應該都可以用.

Lushnsy 提到...

skyvee,感謝你給了我一個方向-^.^-

Skyvee 提到...

lushnsy, 別這麼說, blogger用久了, 就會發現彈性很大, 只不過還是要花一段時間熟悉介面. ^^

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

恩恩,其實是這樣的,老實說開關這個程式碼的東西我還搞不太清楚...

skyvee 提到...

嘿嘿, 表示矛今改的經驗還不夠多, 多改幾次, 就會無師自通了!(逃) :P

nick 提到...

這是個好玩的東西,Blogger的自訂彈性真的很大,越玩越好玩

Skyvee 提到...

是啊,Nick, 有時候會改到欲罷不能

Puppy 提到...

Skyvee大大,我是just music那位^^,我今天終於成功把menubar改成我要的樣子了,不過我又有問題了,我在menubar放的兩個元素,想要開啟一個就關閉另一個,都一直無法成功,看了很久發現我的語法和最後一張有一點點不一樣,我的沒有class="SmallIcon",我後來有試著加進去,不過還是沒有用,可以幫我看一下嗎?^^

Skyvee 提到...

puppy,不好意思, 昨天忙一天,回到家累敝了,現在才回你的信.你不用加smallicon啦, 那是指我左手邊那5個小圈圈.. 我剛去看你的blog,LabelCloud跟LP PR兩個都可以開關正常啊!你已經改好囉!^^

Puppy 提到...

我有試過是都可以開,不過我想用的是開起一個就自動關閉另一個的效果,都一直用不好的說...

Skyvee 提到...

puppy,抱歉,剛才才發現有[開了沒關]的現象,主要是當你把 labelscloud開起來時,要設lp pr關掉的動作,同樣地,開lp pr,就要關labelscloud,就像 <li><a href="#" onclick="new Effect.toggle('LabelsCloud','blind');Element.hide('LP PR');return false;" title="點一下,展開標籤雲">LabelCloud</a>
</li>
<li><a href="#" onclick="new Effect.toggle('LP PR','blind');Element.hide('LabelsCloud');return false;" title="Linkin Park Project Revolution">LP PR</a>
</li>

Puppy 提到...

Skyvee大大我試過了,按照你上面打的語法,會出現我之前的問題(就是有小點還有我想隱藏的按鈕),然後我把不想不出的都去掉後,就是我現在剩下的語法,另外,我發現原本出現的按紐,就可以自動關閉另一個,我用在menubar的就無法自動關閉,這會不會和其他的語法有衝突? 我截圖放在這http://0rz.tw/0f49E 麻煩了^^

skyvee 提到...

puppy, 不是要加那二行程式碼, 而是要在LabelsCloud的開關,加入關掉LP PR的程式碼,如Element.hide('LP PR'); <==分號也要有,而LP PR的開關,要加入關掉LabelsCloud的程式碼,Element.hide('LabelsCloud');<==分號要加上去.
加完後的程式碼,就是我copy在上一個回應.我有試過了.不知你是否了解我意思?

skyvee 提到...

加完後的效果,應該像這樣http://img444.imageshack.us/my.php?image=snap1fe5.jpghttp://img92.imageshack.us/my.php?image=snap2gc8.jpg

Puppy 提到...

skyvee大大,我想了好久,終於知道為什麼了,就是我放錯位子啦,我把語法放在原本的網頁元素,而不是放在開關的地方,還麻煩大大,真是不好意思,看來改blog的路又進了一步...

skyvee 提到...

puppy,呵,改錯反而印象深刻,學到更多啊! :)

charlie 提到...

skyvee大大你好:在架構部落格時有幸看到你的blog,解決了我不少問題,真是感謝。現在我的blog差不多快好了,可是好像放了太多的widget,每次開啟都很慢,我有使用你講的開關模式,有沒有什麼方式是一開始先不下載一些widget,直到我按了開關之後,相關設定的widget才會開始下載並顯示出來,謝謝!!

skyvee 提到...

Charlie您好,剛去你的blog看了一下,拖慢的元件好像是萬年曆呢~你要不要把它放到開關裡試試?或是先移掉,看blog速度有否變快?

王子 提到...

skyvee, 我不大大明白这个功能, 是不是 [+/-] 的功能? 我想用一个开关按钮,隐藏和显示在我的sidebar 多个link lists widgets, 可以的吗?

王子上

Skyvee 提到...

你需要的功能,應該在這篇文章讓blogspot的側邊欄 sidebar 伸縮自如

史帝芬.羊 提到...

您好,Skyvee
我想請問您一個功能,如果有三個開關,可以預設一個開關在進入頁面後就自動啟動嗎?變成使用者進入頁面就可以看到其中一個開關打開。
謝謝

Skyvee 提到...

這個想法不錯,可以辦到喔.
1. 希望預設一個開關自動開啟,那這個開關就不要設 style='display:none'
2. 預設開關的動作,設為 Element.show('開關名字');

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

張貼留言

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