级联菜单
Source
Output
QRCode
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>级联菜单</title>
<link rel="stylesheet" type="text/css" href="//g.alicdn.com/kissy/k/5.0.1/css/base.css">
<style type="text/css">
.c2c-button {
display: inline-block;
*display: inline;
*zoom: 1;
margin: 2px;
border: 0;
padding: 0;
text-decoration: none;
list-style: none;
vertical-align: middle;
cursor: default;
outline: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
background-color: #FFF;
border-style: solid;
border-color: #8ab6dd;
white-space: nowrap;
border-width: 1px;
border-radius: 2px;
}
/* State: disabled. */
.c2c-button-disabled {
background-image: none !important;
opacity: 0.3;
filter: alpha(opacity = 30);
}
.c2c-menu-button {
position: relative;
line-height: 20px;
padding-right: 20px;
}
.c2c-button-disabled {
border-color: #999 !important;
}
/* State: hover. */
.c2c-button-hover,
.c2c-button-focused,
.c2c-menu-buttonmenu-button-open {
border-color: #ffad33 !important; /* Hover border wins. */
}
::root .c2c-menu-button-content,
::root .c2c-menu-button-dropdown {
/* Required to make pseudo-rounded corners work on Safari. */
line-height: normal;
}
/* State: disabled. */
.c2c-menu-button-disabled {
background-image: none !important;
opacity: 0.3;
filter: alpha(opacity = 30);
}
.c2c-menu-button-disabled,
.c2c-menu-button-disabled .c2c-menu-button-content,
.c2c-menu-button-disabled .c2c-menu-button-dropdown {
border-color: #999 !important;
}
/* Pre-IE7 IE hack; ignored by IE7 and all non-IE browsers. */
* html .c2c-menu-button-disabled {
margin: 2px 1px !important;
padding: 0 1px !important;
}
/* IE7-only hack; ignored by all other browsers. */
*:first-child+html .c2c-menu-button-disabled {
margin: 2px 1px !important;
padding: 0 1px !important;
}
/* State: hover. */
.c2c-menu-button-hover {
border-color: #9cf #69e #69e #7af !important; /* Hover border wins. */
}
/* State: focused. */
.c2c-menu-button-focused {
border-color: orange;
}
/* Caption style. */
.c2c-menu-button-content {
padding: 0 4px 0 0;
vertical-align: top;
display: inline-block;
*display: inline;
*zoom: 1;
}
/* Dropdown arrow style. */
.c2c-menu-button-dropdown {
height: 20px;
width: 20px;
/* Client apps may override the URL at which they serve the sprite. */
background: url(http://img01.taobaocdn.com/tps/i1/T1xqXwXmRuXXXXXXXX-22-44.png) no-repeat -1px -1px;
vertical-align: top;
position: absolute;
right: 0;
top: 0;
}
.c2c-button-hover .c2c-menu-button-dropdown,
.c2c-button-focused .c2c-menu-button-dropdown,
.c2c-menu-buttonmenu-button-open .c2c-menu-button-dropdown {
background-position: -1px -23px;
}
.c2c-menu-buttonmenu-button-open .c2c-menu-button-dropdown,
.c2c-button-hover .c2c-menu-button-dropdown {
border-color: #ffad33;
}
/* menu arrow icon end */
/* menu begin */
.c2c-popupmenu {
position: absolute;
left: -9999px;
top: -9999px;
}
.c2c-popupmenu-hidden{
visibility: hidden;
}
.c2c-menu {
background: #fff;
border: 1px solid #ffad33;
cursor: default;
margin: 0;
outline: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
padding: 4px 0;
position: absolute;
z-index: 20000; /* Arbitrary, but some apps depend on it... */
}
/* menu end */
/* menu item begin */
/* State: resting. */
.c2c-menuitem {
list-style: none;
margin: 0;
/* 28px on the left for icon or checkbox; 7em on the right for shortcut. */
padding: 4px;
white-space: nowrap;
}
/* If a menu doesn't have checkable items or items with icons, remove padding. */
.c2c-menu-nocheckbox .c2c-menuitem,
.c2c-menu-noicon .c2c-menuitem {
padding-left: 12px;
}
/*
* If a menu doesn't have items with shortcuts, leave just enough room for
* submenu arrows, if they are rendered.
*/
.c2c-menu-noaccel .c2c-menuitem {
padding-right: 20px;
}
.c2c-menuitem-content {
font: normal 13px Arial, sans-serif;
}
/* State: disabled. */
.c2c-menuitem-disabled .c2c-menuitem-accel,
.c2c-menuitem-disabled .c2c-menuitem-content {
}
.c2c-menuitem-disabled .c2c-menuitem-icon {
opacity: 0.3;
-moz-opacity: 0.3;
filter: alpha(opacity = 30);
}
/* State: hover. */
.c2c-menuitem-active,
.c2c-menuitem-hover {
background-color: #ffefd6;
/* Use an explicit top and bottom border so that the selection is visible
* in high contrast mode. */
border: 1px solid #ffe0b2;
padding-bottom: 3px;
padding-top: 3px;
margin: 0 3px;
padding-left: 0;
padding-right: 0;
}
/* State: selected/checked. */
.c2c-menuitem-checkbox,
.c2c-menuitem-icon {
background-repeat: no-repeat;
height: 16px;
left: 6px;
position: absolute;
right: auto;
vertical-align: middle;
width: 16px;
}
/* Keyboard shortcut ("accelerator") style. */
.c2c-menuitem-accel {
/* Keyboard shortcuts are untranslated; always left-to-right. */
/* @noflip */
direction: ltr;
left: auto;
padding: 0 6px;
position: absolute;
right: 0;
text-align: right;
}
.c2c-menuitem-content {
display: inline;
}
/* menu item end */
</style>
<script src="//g.alicdn.com/kissy/k/5.0.1/seed-debug.js" data-config="{combine:true}"></script>
</head>
<body>
<h1>级联菜单</h1>
<p>创建两个Menu.Select实例，监听第一个实例的click事件并通过update函数来同步状态</p>
<div id="container" style="margin-left:50px;">
</div>
<script type="text/javascript">
require(['menu', 'menubutton'], function(Menu, MenuButton){
var data = {
"上海":["上海市", "崇明"],
"河南":["焦作", "洛阳"],
"浙江":["杭州", "温州"]
};
var children = [];
// 给第一个菜单添加各个项
for (var d in data) {
children.push({
xclass:'menuitem',
content:d
});
}
var select = new MenuButton.Select({
render : '#container',
width : 80,
prefixCls : 'c2c-',
menu : {
xclass : 'popupmenu',
align:{
offset:[0, -1]
},
children:children,
listeners : {
click : function(ev){
update(ev.target.get('content'));
}
}
}
});
select.set('value','上海');
select.render();
// 初始化第二个菜单
var select2 = new MenuButton.Select({
render : '#container',
prefixCls:"c2c-",
width:80,
menu:{
xclass:'popupmenu',
align:{
offset:[0, -1]
}
}
});
update('上海');
select2.render();
function update(province){
var cities = data[province];
select2.removeItems(true); //先删除 select2 的所有菜单项
for(var i = 0; i < cities.length; i++){ //根据当前省份重新新增相应的城市
select2.addItem({
value : cities[i],
content : cities[i],
prefixCls : 'c2c-'
});
}
select2.set('value', cities[0]); //设置第一项选中
}
});
</script>
</body>
</html>