用juery 实现的select特效 jquery.easydropdown.min.js

来源：互联网发布：软件开发年终工作总结编辑：程序博客网时间：2024/06/12 20:39

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

下载地址：http://download.csdn.net/detail/shaowm88/8415907

特点:

清洁，语义标记
形式验证了兼容性
全键盘控制与文本搜索
在触摸设备上的原生UI降解
全功能的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) 选择菜单项

0 0