新版本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>