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>
您可能感興趣的相關文章