用select结构直接生成dropdown组件
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="../avalon.js"></script>
<script type="text/javascript">
require(["dropdown/avalon.dropdown.js", "ready!"], function() {
avalon.define('dropdown', function(vm) {
});
avalon.scan();
});
</script>
<style>
html, body {
height: 100%;
}
.frame {
width: 100%;
height: 100%;
position: relative;
}
.top {
position: absolute;
top: 0;
left: 0;
}
.bottom {
position: absolute;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class="frame" ms-controller="dropdown">
<div class="top">
<h2>dropdown（下拉框）</h2>
<p>用select结构直接生成dropdown组件</p>
<select ms-widget="dropdown">
<optgroup label="group1">
<option value="value1">Value 1</option>
<option>textValue</option>
<option label="label" value="labelValue">with label</option>
<option value="value2" selected>Value 2</option>
<option value="value3">Value 3</option>
</optgroup>
<optgroup label="group2">
<option value="value4">Value 4</option>
<option value="value5" disabled>Value 5</option>
<option value="value6">Value 6</option>
</optgroup>
</select>
</div>
<div class="bottom">
<select ms-widget="dropdown">
<optgroup label="group1">
<option value="value1">Value 1</option>
<option>textValue</option>
<option label="label" value="labelValue">with label</option>
<option value="value2" selected>Value 2</option>
<option value="value3">Value 3</option>
</optgroup>
<optgroup label="group2">
<option value="value4">Value 4</option>
<option value="value5" disabled>Value 5</option>
<option value="value6">Value 6</option>
</optgroup>
</select>
</div>
</div>
</body>
</html>