男丁格爾's 脫殼玩

沒錯!只要 300 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

select_box_replacement

有時候真的不想用瀏覽器內建的醜下拉選單，尤其是 IE 的看起來更是...，因此有能力的就會自己用 JavaScript 及 CSS 來做裝飾。那如果能力還不到家的怎麼辦？！沒關係~~Select Box replacement 套件就是一個來取代內建下拉選單用的啦！

套件名稱：Select Box replacement
套件版本：0.5
作者網站：http://www.brainfault.com/2007/07/23/select-box-replacement/
套件網址：http://plugins.jquery.com/project/selectbox
發佈日期：2008-02-10
檔案大小：5.16 KB
檔案下載：jquery.selectbox-0.5.js selectbox.css

參數說明：

檢視原始碼 JavaScript

inputClass(選填)
描述： 裝飾下拉選單用的 className
預設值： "selectbox"
 
containerClass(選填)
描述： 用來放置下拉選單區塊的 className
預設值： "selectbox-wrapper"
 
hoverClass(選填)
描述： 當滑鼠移到選項時的 className
預設值： "current"
 
currentClass(選填)
描述： 目前已選擇選項的 className
預設值： "selected"
 
debug(選填)
描述： 是否啟用除錯模式；會使用 window.console 的方式來輸出
預設值： false

方法說明：

檢視原始碼 JavaScript

1 2	// 幫指定的元素轉換成新的下拉選單 $(selector).selectbox(options);

使用範例：

檢視原始碼 JavaScript

<script type="text/javascript" src="jquery.js"></script>
<link type="text/css" rel="stylesheet" href="selectbox.css">
<script type="text/javascript" src="jquery.selectbox-0.5.js"></script>
<script type="text/javascript">
	$(function(){
		$('#myselectbox').selectbox();
	});
</script>
 
<body>
	<select id="myselectbox" name="myselectbox">
		<option value="abgne.tw">男丁格爾</option>
		<option value="jquery" selected>jQuery</option>
		<option value="css">CSS</option>
		<option value="html">HTML</option>
		<option value="js">JavaScript</option>
	</select>
</body>

範例 1

檔案描述
基本的範例檔案(免空)	開始下載
基本的範例檔案	會員限定

下拉選單的外型圖片：

16 筆針對 [jQ]Select Box replacement 0.5 的迴響

纜欄於 2010-04-11 04:10:21 說：

請問這種模式下
框有辦法拉的更大嗎?

我有改過CSS改這裡
div.selectbox-wrapper {
width:600px;
}
但是似乎都沒效果一樣短短的
我是照範例下去跟著改
可是不管數值填多少都跟範例一樣短短的

登入後再回覆
- 男丁格爾於 2010-04-12 09:04:11 說：
  
  修改 .selectbox 的寬度即可撐大它..但別忘了也要換背景圖片 bg_select.png。
  
  登入後再回覆
Kate 於 2010-05-05 17:48:17 說：

大大好~
請問大大有試過..Add option嗎?
使用了..$.create('option', {'value': 'val'}, 'myText').appendTo('#myselect');

一直會出錯說..><..

登入後再回覆
- 男丁格爾於 2010-05-05 20:00:00 說：
  
  $.create() 這方法從那來的?!
  
  登入後再回覆
Kate 於 2010-05-06 09:11:56 說：

網路上查來的@@..
參考網址:
http://zh-tw.how-to.mobi/index.php?id=170986

試了幾種方法..只要在$('#myselectbox').selectbox();之後加add option..就不行了~..

登入後再回覆
- 男丁格爾於 2010-05-06 18:50:30 說：
  
  $.create() 應該是另一個外掛所提供的功能...
  
  你可以先移除 #myselectbox_container, #myselectbox_input 後再加入新的 option..
  最後再產生一次 selectbox()
  
  或者看能不能改它的外掛
  
  登入後再回覆
citypig 於 2010-10-10 01:59:20 說：

可惜加了 multple 也不能有多選的功能

登入後再回覆
anthony 於 2011-02-15 10:39:22 說：

男丁老師:
請問一下在雅虎信箱中的下拉式選單點下去時會有個載入的效果
那要如何寫呢?
https://picasaweb.google.com/s920002625/cTgVfK#5573739695165944338

登入後再回覆
- 男丁格爾於 2011-02-15 10:41:26 說：
  
  它網頁一開始載入時並沒有載入選單的資料，而是當使用者點選下拉選單時才利用 ajax 的方式去取得選單的資料的。
  所以這樣的功能通常是利用 ajax 來完成的。
  
  登入後再回覆
RogerHu 於 2011-03-30 18:07:53 說：

老師：
那有下拉選單，有沒有Scrollbar的範例？

登入後再回覆
- 男丁格爾於 2011-03-31 11:07:19 說：
  
  不知道你要的 scrollbar 是指什麼..?
  參考這是不是你要的: Tiny Scrollbar 1.43
  
  登入後再回覆
bumb1213 於 2011-06-09 22:12:40 說：

大大您好~
請問如果要在 mouseover 的時候替換上另一張下拉選單的圖(select_focus.png),
該如何更改程式呢..? 謝謝!

登入後再回覆
- 男丁格爾於 2011-06-13 12:30:17 說：
  
  改 selectbox.css 中的 .selectbox 及 select 吧~
  
  登入後再回覆
bumb1213 於 2011-06-14 17:37:00 說：

您好~
我在 selectbox.css 加入
.selectbox:hover{
background: url('../images/select_focus.jpg') no-repeat;
}
可是沒有作用, 請問是哪裡出了問題了呢..? 謝謝!

登入後再回覆
- 男丁格爾於 2011-06-15 17:08:20 說：
  
  依我原來的範例來看, 本身就有寫 css 來設定圖片了, 你先取代該圖片試看看。
  
  登入後再回覆
bumb1213 於 2011-06-30 20:26:19 說：

您好~
請問要如何指定其中的 option 選項為選定..?
document.getElementById("myselectbox").value = "html"; 這樣寫好像沒有作用..
是要修改 .js 檔嗎..? 謝謝!

登入後再回覆