EasyDropDown – 很棒的下拉選單 含精美主題

　　EasyDropDown 是一個 jQuery 外掛，你可以毫不費力地將簡陋的 Select 元素設定為可定製風格的下拉選單，用於表單或者一般的導航。和著名的下拉外掛 Chosen 很像，但是具有自己的特點，例如：簡潔，語義標記，相容表單驗證，完整的鍵盤控制，滾動支援，在觸控裝置上降級為原生UI 等等眾多優點。

　　另外，提供了 Default、Metro、Flat 三套不同風格的主題，相信能夠滿足你的需要。

　　如何使用：

　　在頁面中引入 jquery.easydropdown.min.js 並未 <select> 標籤加上 class dropdown：

<select class="dropdown">
	<option value="1">Option 1</option>
	<option value="2">Option 2</option>
	<option value="3">Option 3</option>
	<option value="4">Option 4</option>
</select>

　　如果你在 <select> 元素中使用了 label 標籤，則需要為它們加上 class label：

<select class="dropdown">
	<option class="label">Month</option>
	<option value="1">January</option>
	<option value="2">February</option>
	<option value="3">March</option>
	...
</select>

　　自定義風格

　　可以建立自己的樣式，以符合您的設計和品牌，或者使用現成的主題之一。我們建議開始使用預設主題和定製。每個下拉功能都有以下基本標記結構：

<div class="dropdown">
	<span class="old">
		<select>...</select>
	</span>
	<span class="selected">Option 1</span>
	<span class="carat"></span>
	<div>
		<ul>
			<li>Option 1</li>
			<li>Option 2</li>
			<li>Option 3</li>
			<li>Option 4</li>
		</ul>
	</div>
</div>

　　下面這些 class 會被自動新增或者移除：

• .focus (container) 輸入焦點樣式
• .open (container) 選單開啟樣式
• .scrollable (container) 滾動模式樣式
• .bottom (container) 滾動到底部樣式
• .touch (container) 原生裝置樣式
• .focus (menu item) 懸浮或者鍵盤焦點樣式
• .active (menu item) 選中的選單項樣式

　　高階用法

　　上面這樣就可以使用了，當然你可以自己定製選項：

$(function(){
	var $selects = $('select');
						
	$selects.easyDropDown({
		cutOff: 10,
		wrapperClass: 'my-dropdown-class',
		onSelect: function(selected){
			// do something
		}
	});
});

　　你也可以把配置以 JSON 資料的格式寫在 data-settings 屬性中：

<select class="dropdown" 
	data-settings='{"cutOff":6}'>
	<option value="1">Option 1</option>
	<option value="2">Option 2</option>
	..
</select>

　　下載地址：https://github.com/patrickkunka/easydropdown/archive/master.zip

　　演示地址：http://patrickkunka.github.io/easydropdown/