jQuery select 菜单

所属分类:输入-选择框

 158446  416  查看评论 (9)
分享到微信朋友圈
X
jQuery select 菜单 ie兼容9

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) 选择菜单项

相关插件-选择框

jQuery自定义select、单选、复选

jQuery自定义单选、复选插件select.jquery.js
  选择框
 36137  355

jQuery左右选择切换

左右选择切换,兼容主流浏览器
  选择框
 50266  357

强大的下拉框美化插件

Select2是一款基于jQuery的专门针对下拉框的美化插件
  选择框
 53170  350

jQuery首字母搜索全国省市区插件

一款简单实用的响应式首字母搜索全国省市区插件适合手机页面和网站页面
  选择框
 23918  297

讨论这个项目(9)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    厚德载雾 0
    2022/4/14 14:23:41
    同问 联动咋写啊 回复
    默想 0
    2017/11/21 14:38:43
    歌神王司徒 0
    2017/7/21 9:54:39

    我只想说怎么获取被选中的value值

        ? ??1
        2020/8/11 22:17:12
        不是吧?大佬,很简单的
        首先,你给<select>标签加个class, 就像这样:<select class="data-select"></select>
        然后,在<script>标签中使用 console.log($(".data-select").val()); 即可获取选中的值,
    回复
    便便叔叔 0
    2016/12/30 14:12:58
    请叫我:陌路、笑红尘 0
    2016/8/11 12:08:25
    在弹框上没法使用  UI不显示啊 回复
    yiyo 0
    2016/3/18 15:03:59
    garlic1008 0
    2015/11/19 11:11:48

    相当不错的一个联动插件

        我站在原点 → 始终很怀念0
        2016/3/21 16:03:56
        这个怎么做联动啊
        我站在原点 → 始终很怀念0
        2016/3/21 16:03:30
        他把select结构改了,放到了div里
    回复
    arka009 0
    2015/8/17 19:08:17
    张小鱼 0
    2015/8/16 13:08:47

    三级联动的时候 可以回调吗?

    回复
    激情奢华的魅力 0
    2015/6/10 10:57:26
    配合选项卡的话 好像是有一点问题的 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复