EasyDropDown是什么？
EasyDropDown是一个jQuery插件，很轻松制作一个精美的下拉菜单（ EasyDropDown 精美的jQuery下拉菜单 ）…
基本特征：
- 清洁，语义标记
- 形式验证了兼容性
- 全键盘控制与文本搜索
- 内容滚动长列表
- 在触摸设备上的原生UI降解
- 全功能的IE8 +
如何使用：
在页面中引入 jquery.easydropdown.min.js 并未 <select> 标签加上 class dropdown：
| 1 2 3 4 5 6 | <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：
| 1 2 3 4 5 6 7 | <select class="dropdown"> <option class="label">Month</option> <option value="1">January</option> <option value="2">February</option> <option value="3">March</option> ...</select> |
自定义风格
可以创建自己的样式，以符合您的设计和品牌，或者使用现成的主题之一。我们建议开始使用默认主题和定制。每个下拉功能都有以下基本标记结构：
| 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 | <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) 选中的菜单项样式
高级用法
上面这样就可以使用了，当然你可以自己定制选项：
| 01 02 03 04 05 06 07 08 09 10 11 | $(function(){ var $selects = $('select'); $selects.easyDropDown({ cutOff: 10, wrapperClass: 'my-dropdown-class', onSelect: function(selected){ // do something } });}); |
你也可以把配置以 JSON 数据的格式写在 data-settings 属性中：
| 1 2 3 4 5 6 | <select class="dropdown" data-settings='{"cutOff":6}'> <option value="1">Option 1</option> <option value="2">Option 2</option> ..</select> |
评论回复