關於部落格
除了忙與盲之外,也要停下來想一想、看一看... 建議使用 FireFox 或 IE7 以上版本瀏覽。
使用 IE6 若看不到網頁請留個言唷








☞ 網誌分類列表 ☜

※ 網誌分類列表 ※
  自製軟體
  程式語言
  ├ 程式語言.BCB
  └ 程式語言.C#
  應用軟體
  └ MSN
  網站架設
  └ 部落軌道
  Ubuntu
  電腦硬體
  遊戲育樂
  日常生活
  └ 乾癬
  網路硬碟
 ◎不分類網誌列表◎ 





jQuery(document).ready(function(){
jQuery("#boxVisit a[class!='boxVisitSelf'],#boxRecommend a,#boxRecommended a").unbind('click');
jQuery("#boxVisit a[class!='boxVisitSelf'],#boxRecommend a,#boxRecommended a").click(function(){
window.open(this.href);return false;
}).attr('target','');
});



function toggle() {
var ele = document.getElementById("chromemenu");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "☞ 顯示工具列 ☜";
}
else {
ele.style.display = "block";
text.innerHTML = "☞ 隱藏工具列 ☜";
}
}


☞ 顯示工具列 ☜
  • 749394

    累積人氣

  • 6

    今日人氣

    0

    訂閱人氣

下拉式選單之部落格連結


先來看看基本選單的範例及語法:
<form>
<select>
    <option value="儲存值1">選項顯示字串1</option>
    <option value="儲存值2">選項顯示字串2</option>
    <option value="儲存值3">選項顯示字串3</option>
</select>
</form>

透過表單(form)建立選項(select/option),就可以建立下拉式選單。不過,這樣的選單,什麼事也沒做,就只是可以下拉而已。

最常見的選單連結是再加一個按鈕,在按鈕按下時,開啟連結,例如:

<form>
<select name="choice">
     <option value="http://blog.yam.com/dllee">dllee @ 天空</option>
     <option value="http://dllee.pixnet.net/blog">dllee @ 痞客</option>
     <option value="http://dllee.blogspot.com/">dllee @ BlogSpot</option>
</select>
<input class="button" type="button" value="去逛逛" 
onclick="window.open(this.form.choice.options[this.form.choice.selectedIndex].value)">
</form>

其中,select 之後的 name="choice" 是給定選單一個名稱,以利按鈕按下時,取得指定選單的資料。而 input TAG 則是要產生按鈕,在按鈕 onclick 事件中,可以設定想要執行的程式。

佶也家的作法,則是省略掉按鈕,只要選好指定的選單項目,就可以開啟對方的網頁。使用的方法,就是改用 select 的 onchange 事件,只要選擇不同的選單項目,select 的 onchange 事件就會觸發。例如:

<form>
<select name="choice"
onchange="window.open(this.form.choice.options[this.form.choice.selectedIndex].value)">
     <option>點我看好站 ^__^</option>
     <option value="http://blog.yam.com/dllee">dllee @ 天空</option>
     <option value="http://dllee.pixnet.net/blog">dllee @ 痞客</option>
     <option value="http://dllee.blogspot.com/">dllee @ BlogSpot</option>
</select>
</form>

進一步簡化:
<form>
<select onchange="window.open(this.options[this.selectedIndex].value)">
     <option>踢寶看這邊 ^__^</option>
     <option value="http://blog.yam.com/dllee">dllee @ 天空</option>
     <option value="http://dllee.pixnet.net/blog">dllee @ 痞客</option>
     <option value="http://dllee.blogspot.com/">dllee @ BlogSpot</option>
</select>
</form>

省掉按鈕,對於側欄空間版面有限的狀況下,真的是不錯 ,不過,因為必需得在選項改變時,onchange 事件才會觸發,再加上瀏覽器預設會顯示第一項,因此,第一項通常不會放連結,會加入一些文字來吸引訪客點選。

企鵝家及家,則使用了多個連結選單,如同佶也家的連結選單,是沒有按鈕的型式,不過,他們的 onchange 事件比較複雜一些,增加的部份是可以設定每個連結是否要開新頁(_blank)或是在原頁面開啟。我只想要在新頁開啟連結,所以使用佶也的方式就可以了。

我想要的連結選單,除了上述功能外,還想要有隨機點閱的功能,外觀像是:


在這一週來,看了很多 JavaScript/Form 的資料,我想要的功能,幾乎都快達成了,心想應該沒問題了,於是在本週一開始,陸續整理我的最愛,一邊整理,一邊測試。但在昨晚測試時,卻發現功能似乎相同的 JavaScript,只是程式碼前後調整,在開新頁時,有時會讓 FireFox 視為自動開新頁而攔下,改回舊的,竟然連原本不會被 FireFox 攔下的寫法,也變成會被 FireFox 攔下。被 FireFox 攔下後,再去企鵝家試,同樣也被攔下 這讓我又開始傷腦筋了

暫時先把目前測試的結果放上來實測一下,等確定後再把程式釋出。




P.S. 整理連結, 比寫程式還要花時間呀!! 目前還在整理中... 為了選單美觀,我按格名的字數排列,我猜想,在我整理完成時,可能又得想新的花樣,因為全列在同一個實在是太多了,也難怪企鵝都使用多個連結選單。

2009-02-26
今天使用 IE 測試,結果更慘...
必需要用按鈕的型式才行,此外,也無法一次看一格以上,IE 只會開第一格,其他的都被封鎖快顯
另外,在痞客也放了測試,同樣的語法,同樣的效果,同樣被 IE 封鎖快顯
得再傷腦筋囉 ~ ~ ~

看到許多人已想要自己試了,先說明簡單的兩種選單連結作法。

※ 無按鈕選單連結
<form>
<select onchange="window.open(this.options[this.selectedIndex].value)">
     <option>改成您的選單標題</option>
     <option value="http://格友1連結">格友1站名</option>
     <option value="http://格友2連結">格友2站名</option>
     <option value="http://格友3連結">格友3站名</option>
</select>
</form>

以上紅色的部分按紅色的內容修改,或參考上述「踢寶看這邊 ^__^」的實例。格友的部分按相同的格式一直加下去就可以了,非紅色字的部分不要更動,貼文時使用一般編輯器(純文字編輯器/HTML/原始碼 格式),不要自動換行,這樣應該就可以了。

※ 有按鈕選單連結
<form>
<select name="choice">
     <option>可以有選單標題或這項不要也可以</option>
     <option value="http://格友1連結">格友1站名</option>
     <option value="http://格友2連結">格友2站名</option>
     <option value="http://格友3連結">格友3站名</option>
</select>
<input class="button" type="button" value="改成您按鈕要顯示的文字" 
onclick="window.open(this.form.choice.options[this.form.choice.selectedIndex].value)">
</form>

以上紅色的部分按紅色的內容修改,或參考上述「去逛逛」的按鈕實例。格友的部分按相同的格式一直加下去就可以了,非紅色字的部分不要更動,貼文時同樣使用一般編輯器(純文字編輯器/HTML/原始碼 格式),不要自動換行
相簿設定
標籤設定
相簿狀態