SUI
新版本1.4.2发布了。第一次升级到 1.4.x 版本请注意在1.4.0版本的重大变动，具体请阅读更新日志。

设计规范

开发者文档

下拉菜单，可以结合结合下拉框使用，也可以单独使用。 JS使用文档见 dropdown-js
组件不会自动适应每个选项的大小，如果出现有些选项过长，可以手动设定 a.dropdown-toggle 的宽度。
注意：下拉菜单有两种用法，一种是当做菜单来用，只放链接，另外一种是在表单中用来代替原生select，表单中的用法见这里 表单中使用下拉菜单。

  • 更新 v1.4.2：修复了表单中使用 .sui-dropup 样式时无法选中的bug。
  • 更新 v1.4.1：修复了1.4.0版本由于分离图标文件导致下拉图标无法显示的bug。
  • 更新 v1.2.1：大幅改进了易用性：
    • 使用proxy实现下拉逻辑，异步加载的情况下也不需要手动初始化
    • 增加了分组功能
    • 增加了单条选项禁用功能
    • 按钮下拉菜单增加了一个icon
  • 更新 v1.1.5：增加了disabled状态，只要在容器上增加一个 .disabled 即可。
  • 更新 v1.1.3：修复在某些情况下下拉菜单高度会变高的bug。
  • 更新 v1.0.1：修复按钮下拉菜单z-index设置不正确导致下拉菜单会被其他按钮遮住的问题。

不同样式和大小

  1. <h3>默认样式</h3><span class="sui-dropdown"><span class="dropdown-inner"><a role="button" data-toggle="dropdown" href="javascript:void(0);" class="dropdown-toggle">杭州 <i class="caret"></i></a>
  2.     <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
  3.       <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);">北京</a></li>
  4.       <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);">圣彼得堡</a></li>
  5.       <li role="presentation" class="divider"></li>
  6.       <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="javascript:void(0);">杭州</a></li>
  7.     </ul></span></span>
  8. <h3>带边框</h3><span class="sui-dropdown dropdown-bordered"><span class="dropdown-inner"><a role="button" data-toggle="dropdown" href="javascript:void(0);" class="dropdown-toggle"><i class="caret"></i>杭州</a>
  9.     <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
  10.       <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);">北京</a></li>
  11.       <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);">圣彼得堡</a></li>
  12.       <li role="presentation" class="divider"></li>
  13.       <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="javascript:void(0);">杭州</a>
  14.         <ul role="menu" aria-labelledby="drop2" class="sui-dropdown-menu">
  15.           <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);">北京</a></li>
  16.           <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);">圣彼得堡</a></li>
  17.           <li role="presentation" class="divider"></li>
  18.           <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);">莫斯科</a></li>
  19.         </ul>
  20.       </li>
  21.     </ul></span></span><span class="sui-dropdown dropdown-bordered dropdown-large"><span class="dropdown-inner"><a role="button" data-toggle="dropdown" href="javascript:void(0);" class="dropdown-toggle"><i class="caret"></i>北京</a>
  22.     <ul role="menu" aria-labelledby="drop2" class="sui-dropdown-menu">
  23.       <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="javascript:void(0);">北京</a></li>
  24.       <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);">圣彼得堡</a></li>
  25.       <li role="presentation" class="divider"></li>
  26.       <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);">杭州</a></li>
  27.     </ul></span></span><span class="sui-dropdown dropdown-bordered dropdown-xlarge"><span class="dropdown-inner"><a role="button" data-toggle="dropdown" href="javascript:void(0);" class="dropdown-toggle"><i class="caret"></i>更大一点的</a>
  28.     <ul role="menu" aria-labelledby="drop3" class="sui-dropdown-menu">
  29.       <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);">北京</a></li>
  30.       <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);">圣彼得堡</a></li>
  31.       <li role="presentation" class="divider"></li>
  32.       <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);">莫斯科</a></li>
  33.     </ul></span></span>
  34. <h3>禁用的</h3><span class="sui-dropdown disabled"><span class="dropdown-inner"><a role="button" data-toggle="dropdown" href="javascript:void(0);" class="dropdown-toggle">杭州 <i class="caret"></i></a>
  35.     <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
  36.       <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);">北京</a></li>
  37.       <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);">圣彼得堡</a></li>
  38.       <li role="presentation" class="divider"></li>
  39.       <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="javascript:void(0);">杭州</a></li>
  40.     </ul></span></span><span class="sui-dropdown dropdown-bordered disabled"><span class="dropdown-inner"><a role="button" data-toggle="dropdown" href="javascript:void(0);" class="dropdown-toggle"><i class="caret"></i>杭州</a>
  41.     <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
  42.       <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);">北京</a></li>
  43.       <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);">圣彼得堡</a></li>
  44.       <li role="presentation" class="divider"></li>
  45.       <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="javascript:void(0);">杭州</a>
  46.         <ul role="menu" aria-labelledby="drop2" class="sui-dropdown-menu">
  47.           <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);">北京</a></li>
  48.           <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);">圣彼得堡</a></li>
  49.           <li role="presentation" class="divider"></li>
  50.           <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);">莫斯科</a></li>
  51.         </ul>
  52.       </li>
  53.     </ul></span></span>
  54. <h3>禁用部分选项</h3><span class="sui-dropdown"><span class="dropdown-inner"><a role="button" data-toggle="dropdown" href="javascript:void(0);" class="dropdown-toggle">杭州 <i class="caret"></i></a>
  55.     <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
  56.       <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);">北京</a></li>
  57.       <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="javascript:void(0);">圣彼得堡</a></li>
  58.       <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="javascript:void(0);">杭州</a></li>
  59.       <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);">武汉</a></li>
  60.     </ul></span></span>

下拉菜单有两种样式：默认样式和带边框的样式，添加 .dropdown-borderd 是带边框的样式。

带边框的下拉菜单有三种尺寸：默认，.dropdown-large，.dropdown-xlarge

在li上添加 '.active' 则表示默认选中

在容器上添加 .disabled 禁用。

不同的触发方式

  1. <h3>点击触发</h3><span class="sui-dropdown"><span class="dropdown-inner"><a role="button" data-toggle="dropdown" href="#" class="dropdown-toggle">杭州 <i class="caret"></i></a>
  2.     <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
  3.       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">北京</a></li>
  4.       <li role="presentation"></li>
  5.       <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">杭州</a></li>
  6.     </ul></span></span><span class="sui-dropdown dropdown-bordered"><span class="dropdown-inner"><a role="button" data-toggle="dropdown" href="#" class="dropdown-toggle"><i class="caret"></i>杭州</a>
  7.     <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
  8.       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">北京</a></li>
  9.       <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">杭州</a></li>
  10.     </ul></span></span>
  11. <h3>hover触发</h3><span class="sui-dropdown"><span class="dropdown-inner"><a role="button" href="javascript:void(0);" data-toggle="dropdown" data-trigger="hover" class="dropdown-toggle">杭州 <i class="caret"></i></a>
  12.     <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
  13.       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">北京</a></li>
  14.       <li role="presentation"></li>
  15.       <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">杭州</a></li>
  16.     </ul></span></span><span class="sui-dropdown dropdown-bordered"><span class="dropdown-inner"><a role="button" href="javascript:void(0);" data-toggle="dropdown" data-trigger="hover" class="dropdown-toggle">杭州 <i class="caret"></i></a>
  17.     <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
  18.       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">北京</a></li>
  19.       <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">杭州</a></li>
  20.     </ul></span></span>

下拉菜单有两种样式：默认样式和带边框的样式，添加 .dropdown-borderd 是带边框的样式。

带边框的下拉菜单有三种尺寸：默认，.dropdown-large，.dropdown-xlarge

在li上添加 '.active' 则表示默认选中

下拉分组

只需要在 li 上加上 .group-title 即可

  1. <span class="sui-dropdown"><span class="dropdown-inner"><a role="button" data-toggle="dropdown" href="#" class="dropdown-toggle">杭州 <i class="caret"></i></a>
  2.                       <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
  3.                         <li role="presentation" class="group-title">湖北</li>
  4.                         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">武汉</a></li>
  5.                         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">襄阳</a></li>
  6.                         <li role="presentation" class="group-title">浙江</li>
  7.                         <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">杭州</a></li>
  8.                         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">嘉兴</a></li>
  9.                       </ul></span></span>

不同下拉位置和对齐方式

默认的下拉菜单是和触发元素左对齐，通过添加 .align-right 可以实现右对齐

  1. <h4>左右对齐</h4><span class="sui-dropdown"><span class="dropdown-inner"><a role="button" href="javascript:void(0);" data-toggle="dropdown" data-trigger="hover" class="dropdown-toggle">左对齐 <i class="caret"></i></a>
  2.     <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
  3.       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">北京</a></li>
  4.       <li role="presentation"></li>
  5.       <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">杭州</a></li>
  6.     </ul></span></span><span style="margin-left: 20px;" class="sui-dropdown align-right"><span class="dropdown-inner"><a role="button" href="javascript:void(0);" data-toggle="dropdown" data-trigger="hover" class="dropdown-toggle">右对齐 <i class="caret"></i></a>
  7.     <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
  8.       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">北京</a></li>
  9.       <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">杭州</a></li>
  10.     </ul></span></span>
  11. <h4>上拉和下拉</h4><span class="sui-dropdown"><span class="dropdown-inner"><a role="button" href="javascript:void(0);" data-toggle="dropdown" data-trigger="hover" class="dropdown-toggle">下拉菜单 <i class="caret"></i></a>
  12.     <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
  13.       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">北京</a></li>
  14.       <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">杭州</a></li>
  15.     </ul></span></span><span class="sui-dropdown dropdown-bordered"><span class="dropdown-inner"><a role="button" href="javascript:void(0);" data-toggle="dropdown" data-trigger="hover" class="dropdown-toggle">下拉菜单 <i class="caret"></i></a>
  16.     <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
  17.       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">北京</a></li>
  18.       <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">杭州</a></li>
  19.     </ul></span></span><span class="sui-dropup"><span class="dropdown-inner"><a role="button" href="javascript:void(0);" data-toggle="dropdown" data-trigger="hover" class="dropdown-toggle">上拉菜单 <i class="caret"></i></a>
  20.     <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
  21.       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">北京</a></li>
  22.       <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">杭州</a></li>
  23.     </ul></span></span><span class="sui-dropup dropdown-bordered"><span class="dropdown-inner"><a role="button" href="javascript:void(0);" data-toggle="dropdown" data-trigger="hover" class="dropdown-toggle">上拉菜单 <i class="caret"></i></a>
  24.     <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
  25.       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">北京</a></li>
  26.       <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">杭州</a></li>
  27.     </ul></span></span>

多级下拉

  1. <span class="sui-dropdown dropdown-bordered"><span class="dropdown-inner"><a role="button" data-toggle="dropdown" href="#" class="dropdown-toggle"><i class="caret"></i>杭州</a>
  2.                       <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
  3.                         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">北京</a></li>
  4.                         <li role="presentation" class="dropdown-submenu"><a role="menuitem" tabindex="-1" href="#">
  5.                             <i class="sui-icon icon-angle-right pull-right"></i>
  6.                             武汉</a>
  7.                           <ul class="sui-dropdown-menu">
  8.                             <li role="presentation"><a role="menuitem" tabindex="-1" href="#">汉口</a></li>
  9.                             <li role="presentation" class="dropdown-submenu"><a role="menuitem" tabindex="-1" href="#">
  10.                                 <i class="sui-icon icon-angle-right pull-right"></i>
  11.                                 武昌</a>
  12.                               <ul class="sui-dropdown-menu">
  13.                                 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">武汉大学</a></li>
  14.                                 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">华中科技大学</a></li>
  15.                                 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">华中师范大学</a></li>
  16.                               </ul>
  17.                             </li>
  18.                             <li role="presentation"><a role="menuitem" tabindex="-1" href="#">汉阳</a></li>
  19.                           </ul>
  20.                         </li>
  21.                         <li role="presentation" class="divider"></li>
  22.                         <li role="presentation" class="dropdown-submenu"><a role="menuitem" tabindex="-1" href="#">
  23.                             <i class="sui-icon icon-angle-right pull-right"></i>
  24.                             杭州</a>
  25.                           <ul class="sui-dropdown-menu">
  26.                             <li role="presentation"><a role="menuitem" tabindex="-1" href="#">西湖区</a></li>
  27.                             <li role="presentation"><a role="menuitem" tabindex="-1" href="#">余杭区</a></li>
  28.                             <li role="presentation"><a role="menuitem" tabindex="-1" href="#">东城区</a></li>
  29.                           </ul>
  30.                         </li>
  31.                       </ul></span></span>

按钮下拉菜单

  1. <div class="sui-btn-toolbar">
  2.   <div class="sui-btn-group">
  3.     <button data-toggle="dropdown" class="sui-btn btn-primary dropdown-toggle"><i class="caret"></i>杭州</button>
  4.     <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
  5.       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">北京</a></li>
  6.       <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">杭州</a></li>
  7.     </ul>
  8.   </div>
  9.   <div class="sui-btn-group">
  10.     <button data-toggle="dropdown" class="sui-btn btn-danger dropdown-toggle"><i class="caret"></i>杭州</button>
  11.     <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
  12.       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">北京</a></li>
  13.       <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">杭州</a></li>
  14.     </ul>
  15.   </div>
  16. </div>

单独使用菜单

  1. <ul role="menu" class="sui-dropdown-menu">
  2.   <li role="presentation"><a role="menuitem" tabindex="-1" href="#">北京</a></li>
  3.   <li role="presentation"><a role="menuitem" tabindex="-1" href="#">上海</a></li>
  4.   <li role="presentation" class="divider"></li>
  5.   <li role="presentation"><a role="menuitem" tabindex="-1" href="#">广州</a></li>
  6. </ul>

在表单中使用

在表单中使用下拉菜单来模拟select。注意，这里的html结构和上面仅仅当做下拉菜单是不同的。
使用隐藏input来存储用户选中的值，如果用户有选择则会在input上触发change事件。如果需要监听用户选中事件，可以通过input的onchange来做。如果想通过js来设置，目前未提供接口，可以通过js同时修改input值和span中的文案来实现。

  1. <h3>简单用法</h3><span class="sui-dropdown dropdown-bordered select"><span class="dropdown-inner"><a id="select" role="button" href="javascript:void(0);" data-toggle="dropdown" class="dropdown-toggle">
  2.       <input value="hz" name="city" type="hidden"><i class="caret"></i><span>选择店铺类目</span></a>
  3.     <ul role="menu" aria-labelledby="drop4" class="sui-dropdown-menu">
  4.       <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="bj">北京</a></li>
  5.       <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="sb">圣彼得堡</a></li>
  6.       <li role="presentation" class="divider"></li>
  7.       <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="hz">杭州</a></li>
  8.     </ul></span></span>
  9. <h3>选项分组</h3><span class="sui-dropdown dropdown-bordered select"><span class="dropdown-inner"><a id="select" role="button" href="javascript:void(0);" data-toggle="dropdown" class="dropdown-toggle">
  10.       <input value="" name="city" type="hidden"><i class="caret"></i><span>选择地址</span></a>
  11.     <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
  12.       <li role="presentation" class="group-title">湖北</li>
  13.       <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="wh">武汉</a></li>
  14.       <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="xy">襄阳</a></li>
  15.       <li role="presentation" class="group-title">浙江</li>
  16.       <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="hz">杭州</a></li>
  17.       <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="jx">嘉兴</a></li>
  18.     </ul></span></span>
  19. <h3>禁用部分选项</h3><span class="sui-dropdown dropdown-bordered select"><span class="dropdown-inner"><a id="select" role="button" href="javascript:void(0);" data-toggle="dropdown" class="dropdown-toggle">
  20.       <input value="" name="city" type="hidden"><i class="caret"></i><span>选择地址</span></a>
  21.     <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
  22.       <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="wh">武汉</a></li>
  23.       <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="xy">襄阳</a></li>
  24.       <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="wh">莫斯科</a></li>
  25.       <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="hz">杭州</a></li>
  26.       <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="jx">嘉兴</a></li>
  27.     </ul></span></span>

用户选择的值会写入隐藏的input中。改变值时会在隐藏input上触发change事件。

自动补全

用一个简单的input结构加上一个箭头来模拟下拉菜单的样式.

  1. <form class="sui-form">
  2.   <div class="sui-dropdown-like">
  3.     <input type="text" value="" data-toggle="autocomplete" data-lookup="[&quot;dasd1231das2s&quot;, &quot;tuigjhhigjdif&quot;, &quot;ndjksvkjshf&quot;, &quot;fhekxoshlf&quot;, &quot;pqowizljmv&quot;]" data-minchars="0" class="input-large"><i class="sui-icon icon-pc-chevron-bottom"></i>
  4.   </div>
  5. </form>
  • @time 2014.03.07
  • @author [本站仅为SUI文档保留的镜像站，与官方无关]