jQuery EasyDropDown 一款select下拉菜单美化插件

jQuery EasyDropDown 一款select下拉菜单美化插件
 点击预览  点击下载

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

特点:

  1. 清洁,语义标记

  2. 形式验证了兼容性

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

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

  5. 全功能的IE8 +

使用步骤

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

  1. <select class="dropdown"> 
  2.     <option value="1">Option 1</option> 
  3.     <option value="2">Option 2</option> 
  4.     <option value="3">Option 3</option> 
  5.     <option value="4">Option 4</option> 
  6. </select> 

如果你使用标签内的元素,找出它们与类标签:

  1. <select class="dropdown"> 
  2.     <option value="" class="label">Month</option> 
  3.     <option value="1">January</option> 
  4.     <option value="2">February</option> 
  5.     <option value="3">March</option> 
  6.     ... 
  7. </select> 

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

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

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

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

没有自定义JS!

它的样式

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

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

  1. <div class="dropdown"> 
  2.     <span class="old"> 
  3.         <select>...</select> 
  4.     </span> 
  5.     <span class="selected">Option 1</span> 
  6.     <span class="carat"></span> 
  7.     <div> 
  8.         <ul> 
  9.             <li>Option 1</li> 
  10.             <li>Option 2</li> 
  11.             <li>Option 3</li> 
  12.             <li>Option 4</li> 
  13.         </ul> 
  14.     </div> 
  15. </div> 

以下类动态添加/删除:

.focus (container) 在输入焦点

.open (container) 菜单中打开

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

.bottom (container) 滚动末位淘汰

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

.disabled (container) 禁用时

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

.active (menu item) 选择菜单项

转载请注明:代码家园 » jQuery EasyDropDown 一款select下拉菜单美化插件

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)