样式
原生单选 select 组件
在 <select>
元素上添加类 .mdui-select
即可为该元素赋予美化后的样式,无需调用 JavaScript。
Example
<select class="mdui-select">
<option value="1" selected>State 1</option>
<option value="2">State 2</option>
<option value="3">State 3</option>
<option value="4">State 4</option>
<option value="5">State 5</option>
<option value="6">State 6</option>
</select>
原生多选 select 组件
也可以在 <select multiple>
元素上添加类 .mdui-select
,使之可多选。但并不是所有浏览器都能很好的展示此样式。
Example
<select multiple size="8" class="mdui-select">
<optgroup label="Fonts">
<option>Roboto</option>
<option>Calibri</option>
<option>Courier New</option>
<option>Verdana</option>
</optgroup>
<optgroup label="Size">
<option>50%</option>
<option>75%</option>
<option>90%</option>
<option>100%</option>
</optgroup>
<optgroup label="header">
<option>h1</option>
<option>h2</option>
<option>h3</option>
<option>h4</option>
</optgroup>
</select>
调用方式
通过自定义属性调用
使用该方式无需编写 JavaScript 代码。只需在 <select>
元素上添加类 .mdui-select
和 mdui-select="options"
属性即可。
若组件是动态生成的,则需要调用 mdui.mutation()
进行初始化。
Example
<select class="mdui-select" mdui-select>
<option value="1">State 1</option>
<option value="2">State 2</option>
<option value="3" disabled>State 3</option>
<option value="4">State 4</option>
<option value="5">State 5</option>
<option value="6">State 6</option>
</select>
Example
<select class="mdui-select" mdui-select="{position: 'top'}">
<option value="1">State 1</option>
<option value="2">State 2</option>
<option value="3" disabled>State 3</option>
<option value="4">State 4</option>
<option value="5">State 5</option>
<option value="6">State 6</option>
</select>
Example
<select class="mdui-select" mdui-select="{position: 'bottom'}">
<option value="1">State 1</option>
<option value="2">State 2</option>
<option value="3" disabled>State 3</option>
<option value="4">State 4</option>
<option value="5">State 5</option>
<option value="6">State 6</option>
</select>
通过 JavaScript 调用
实例化组件:
// selector 为 <select> 元素的 CSS 选择器或 DOM 元素或 HTML 字符串
// options 为配置参数,见下面的参数列表
var inst = new mdui.Select(selector, options);
Example
<select class="mdui-select" id="demo-js">
<option value="1">State 1</option>
<option value="2">State 2</option>
<option value="3" disabled>State 3</option>
<option value="4">State 4</option>
<option value="5">State 5</option>
<option value="6">State 6</option>
</select>
<script>
var inst = new mdui.Select('#demo-js');
</script>
参数
参数名 |
类型 |
默认值 |
描述 |
position |
string |
auto |
选择菜单所处位置。包括 auto 、top 、bottom |
gutter |
int |
16 |
选择菜单距离窗口上下边框至少保持多少间距,单位为 px。该参数仅在 position 为 auto 时有效。 |
方法
方法名 |
描述 |
open() |
打开下拉菜单。 |
close() |
关闭下拉菜单。 |
toggle() |
切换下拉菜单的打开状态。 |
handleUpdate() |
当你动态修改了 <select> 元素的内容时,需要调用该方法来重新生成下拉菜单。 |
getState |
返回当前下拉菜单的打开状态。共包含四种状态(opening 、opened 、closing 、closed )。 |
事件
事件 |
描述 |
目标 |
参数 |
open.mdui.select |
下拉菜单开始打开动画时,事件将被触发。 |
<select class="mdui-select"></select>
|
event._detail.inst :实例
|
opened.mdui.select |
下拉菜单结束打开动画时,事件将被触发。 |
close.mdui.select |
下拉菜单开始关闭动画时,事件将被触发。 |
closed.mdui.select |
下拉菜单结束关闭动画时,事件将被触发。 |
CSS 类名列表
类名 |
效果 |
.mdui-select |
定义一个 Select 组件。 |