首页 | 2349 | 708 | 354 | 添加收藏 上一个 下一个
jQuery select 菜单

EasyDropDown是一个jQuery插件,毫不费力地将不起眼的元素设置样式下拉菜单的形式或一般UI /导航使用。


特点:



  1. 清洁,语义标记

  2. 形式验证了兼容性

  3. 全键盘控制与文本搜索

  4. 在触摸设备上的原生UI降解

  5. 全功能的IE8 +


使用步骤


使用时,只需包括jquery.easydropdown.min.js在您的网页上的脚本,并给你的标签类“下拉列表:


<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 class="dropdown">
    <option value="" class="label">Month</option>
    <option value="1">January</option>
    <option value="2">February</option>
    <option value="3">March</option>
    ...
</select>

建立你的下拉列表中任意选择预先选定的,干脆把它像往常一样将选定的属性:


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

同样,一个下拉可能会被禁用:


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

没有自定义JS!


它的样式


创建自己的样式,以符合您的设计和品牌,或者使用现成的主题之一。我们建议开始使用默认主题和定制。


每个下拉具有以下基本标记结构,你可以针对你的CSS:


<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>

以下类动态添加/删除:



  • .focus (container) 在输入焦点

  • .open (container) 菜单中打开

  • .scrollable (container) 在滚动模式(见截止)

  • .bottom (container) 滚动末位淘汰

  • .touch (container)在原生触摸界面模式(见nativeTouch)

  • .disabled (container) 禁用时

  • .focus (menu item) 悬停或键盘焦点

  • .active (menu item) 选择菜单项