设计规范

开发者文档
下拉菜单,可以结合结合下拉框使用,也可以单独使用。 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设置不正确导致下拉菜单会被其他按钮遮住的问题。
不同样式和大小
- <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>
- <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);">北京</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);">圣彼得堡</a></li>
- <li role="presentation" class="divider"></li>
- <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="javascript:void(0);">杭州</a></li>
- </ul></span></span>
- <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>
- <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);">北京</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);">圣彼得堡</a></li>
- <li role="presentation" class="divider"></li>
- <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="javascript:void(0);">杭州</a>
- <ul role="menu" aria-labelledby="drop2" class="sui-dropdown-menu">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);">北京</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);">圣彼得堡</a></li>
- <li role="presentation" class="divider"></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);">莫斯科</a></li>
- </ul>
- </li>
- </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>
- <ul role="menu" aria-labelledby="drop2" class="sui-dropdown-menu">
- <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="javascript:void(0);">北京</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);">圣彼得堡</a></li>
- <li role="presentation" class="divider"></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);">杭州</a></li>
- </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>
- <ul role="menu" aria-labelledby="drop3" class="sui-dropdown-menu">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);">北京</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);">圣彼得堡</a></li>
- <li role="presentation" class="divider"></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);">莫斯科</a></li>
- </ul></span></span>
- <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>
- <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);">北京</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);">圣彼得堡</a></li>
- <li role="presentation" class="divider"></li>
- <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="javascript:void(0);">杭州</a></li>
- </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>
- <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);">北京</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);">圣彼得堡</a></li>
- <li role="presentation" class="divider"></li>
- <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="javascript:void(0);">杭州</a>
- <ul role="menu" aria-labelledby="drop2" class="sui-dropdown-menu">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);">北京</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);">圣彼得堡</a></li>
- <li role="presentation" class="divider"></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);">莫斯科</a></li>
- </ul>
- </li>
- </ul></span></span>
- <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>
- <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);">北京</a></li>
- <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="javascript:void(0);">圣彼得堡</a></li>
- <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="javascript:void(0);">杭州</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);">武汉</a></li>
- </ul></span></span>
下拉菜单有两种样式:默认样式和带边框的样式,添加 .dropdown-borderd
是带边框的样式。
带边框的下拉菜单有三种尺寸:默认,.dropdown-large
,.dropdown-xlarge
在li上添加 '.active' 则表示默认选中
在容器上添加 .disabled
禁用。
- 复制代码代码已复制
不同的触发方式
- <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>
- <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">北京</a></li>
- <li role="presentation"></li>
- <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">杭州</a></li>
- </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>
- <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">北京</a></li>
- <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">杭州</a></li>
- </ul></span></span>
- <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>
- <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">北京</a></li>
- <li role="presentation"></li>
- <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">杭州</a></li>
- </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>
- <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">北京</a></li>
- <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">杭州</a></li>
- </ul></span></span>
下拉菜单有两种样式:默认样式和带边框的样式,添加 .dropdown-borderd
是带边框的样式。
带边框的下拉菜单有三种尺寸:默认,.dropdown-large
,.dropdown-xlarge
在li上添加 '.active' 则表示默认选中
- 复制代码代码已复制
下拉分组
只需要在 li 上加上 .group-title
即可
- <span class="sui-dropdown"><span class="dropdown-inner"><a role="button" data-toggle="dropdown" href="#" class="dropdown-toggle">杭州 <i class="caret"></i></a>
- <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
- <li role="presentation" class="group-title">湖北</li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">武汉</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">襄阳</a></li>
- <li role="presentation" class="group-title">浙江</li>
- <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">杭州</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">嘉兴</a></li>
- </ul></span></span>
- 复制代码代码已复制
不同下拉位置和对齐方式
默认的下拉菜单是和触发元素左对齐,通过添加 .align-right
可以实现右对齐
- <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>
- <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">北京</a></li>
- <li role="presentation"></li>
- <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">杭州</a></li>
- </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>
- <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">北京</a></li>
- <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">杭州</a></li>
- </ul></span></span>
- <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>
- <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">北京</a></li>
- <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">杭州</a></li>
- </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>
- <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">北京</a></li>
- <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">杭州</a></li>
- </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>
- <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">北京</a></li>
- <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">杭州</a></li>
- </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>
- <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">北京</a></li>
- <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">杭州</a></li>
- </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>
- <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">北京</a></li>
- <li role="presentation" class="dropdown-submenu"><a role="menuitem" tabindex="-1" href="#">
- <i class="sui-icon icon-angle-right pull-right"></i>
- 武汉</a>
- <ul class="sui-dropdown-menu">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">汉口</a></li>
- <li role="presentation" class="dropdown-submenu"><a role="menuitem" tabindex="-1" href="#">
- <i class="sui-icon icon-angle-right pull-right"></i>
- 武昌</a>
- <ul class="sui-dropdown-menu">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">武汉大学</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">华中科技大学</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">华中师范大学</a></li>
- </ul>
- </li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">汉阳</a></li>
- </ul>
- </li>
- <li role="presentation" class="divider"></li>
- <li role="presentation" class="dropdown-submenu"><a role="menuitem" tabindex="-1" href="#">
- <i class="sui-icon icon-angle-right pull-right"></i>
- 杭州</a>
- <ul class="sui-dropdown-menu">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">西湖区</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">余杭区</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">东城区</a></li>
- </ul>
- </li>
- </ul></span></span>
- 复制代码代码已复制
按钮下拉菜单
- <div class="sui-btn-toolbar">
- <div class="sui-btn-group">
- <button data-toggle="dropdown" class="sui-btn btn-primary dropdown-toggle"><i class="caret"></i>杭州</button>
- <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">北京</a></li>
- <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">杭州</a></li>
- </ul>
- </div>
- <div class="sui-btn-group">
- <button data-toggle="dropdown" class="sui-btn btn-danger dropdown-toggle"><i class="caret"></i>杭州</button>
- <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">北京</a></li>
- <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">杭州</a></li>
- </ul>
- </div>
- </div>
- 复制代码代码已复制
单独使用菜单
- <ul role="menu" class="sui-dropdown-menu">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">北京</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">上海</a></li>
- <li role="presentation" class="divider"></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">广州</a></li>
- </ul>
- 复制代码代码已复制
在表单中使用
在表单中使用下拉菜单来模拟select。注意,这里的html结构和上面仅仅当做下拉菜单是不同的。
使用隐藏input来存储用户选中的值,如果用户有选择则会在input上触发change事件。如果需要监听用户选中事件,可以通过input的onchange来做。如果想通过js来设置,目前未提供接口,可以通过js同时修改input值和span中的文案来实现。
- <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">
- <input value="hz" name="city" type="hidden"><i class="caret"></i><span>选择店铺类目</span></a>
- <ul role="menu" aria-labelledby="drop4" class="sui-dropdown-menu">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="bj">北京</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="sb">圣彼得堡</a></li>
- <li role="presentation" class="divider"></li>
- <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="hz">杭州</a></li>
- </ul></span></span>
- <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">
- <input value="" name="city" type="hidden"><i class="caret"></i><span>选择地址</span></a>
- <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
- <li role="presentation" class="group-title">湖北</li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="wh">武汉</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="xy">襄阳</a></li>
- <li role="presentation" class="group-title">浙江</li>
- <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="hz">杭州</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="jx">嘉兴</a></li>
- </ul></span></span>
- <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">
- <input value="" name="city" type="hidden"><i class="caret"></i><span>选择地址</span></a>
- <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="wh">武汉</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="xy">襄阳</a></li>
- <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="wh">莫斯科</a></li>
- <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="hz">杭州</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="jx">嘉兴</a></li>
- </ul></span></span>
用户选择的值会写入隐藏的input中。改变值时会在隐藏input上触发change事件。
- 复制代码代码已复制
自动补全
用一个简单的input结构加上一个箭头来模拟下拉菜单的样式.
- <form class="sui-form">
- <div class="sui-dropdown-like">
- <input type="text" value="" data-toggle="autocomplete" data-lookup="["dasd1231das2s", "tuigjhhigjdif", "ndjksvkjshf", "fhekxoshlf", "pqowizljmv"]" data-minchars="0" class="input-large"><i class="sui-icon icon-pc-chevron-bottom"></i>
- </div>
- </form>
- 复制代码代码已复制