首页»JavaScript»EasyDropDown – 很棒的下拉菜单 含精美主题

EasyDropDown – 很棒的下拉菜单 含精美主题

来源:Web武松娱乐 发布时间:2013-09-09 阅读次数:
  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 会被自动添加或者移除:
  1. .focus (container) 输入焦点样式
  2. .open (container) 菜单打开样式
  3. .scrollable (container) 滚动模式样式
  4. .bottom (container) 滚动到底部样式
  5. .touch (container) 原生设备样式
  6. .focus (menu item) 悬浮或者键盘焦点样式
  7. .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/
QQ群: WEB武松娱乐官方总群(83010142) 加群密码:关注下方微信公众号,发送消息 mm 获取
提示:更多精彩内容关注微信公众号:全栈武松娱乐中心(fsder-com)
网友评论(共0条评论) 正在载入评论......
理智评论文明上网,拒绝恶意谩骂 发表评论 / 共0条评论
登录会员中心
武松娱乐官网