模拟 selectbox
Source
Output
QRCode
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>模拟 selectbox</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 */
/** pix theme */
.pix-select {
height:28px;
background: #fff;
overflow: hidden;
width:280px;
zoom:1;
}
.pix-menu-button-content {
float: left;
width:248px;
height:26px;
line-height:26px;
border: 1px solid #BFBFBF;
border-right: none;
font-size: 12px;
padding-left:10px;
}
.pix-menu-button-dropdown {
float: left;
background:url(http://img03.taobaocdn.com/tps/i3/T1gJJgXdRBXXaCwpjX.png) no-repeat;
width:19px;
height:26px;
border: 1px solid #A0A0A0;
}
.pix-popupmenu {
position: absolute;
width: 280px;
overflow: hidden;
border: 1px solid #BFBFBF;
}
.pix-popupmenu-hidden {
visibility: hidden;
}
.pix-popupmenu .pix-option {
height: 34px;
line-height: 34px;
font-size: 12px;
padding-left:10px;
background: #fff;
}
.pix-popupmenu .pix-option-hover {
background: #F2F2F2;
}
</style>
<script src="//g.alicdn.com/kissy/k/5.0.1/seed-debug.js" data-config="{combine:true}"></script>
</head>
<body>
<h1>模拟 selectbox</h1>
<p>调用 MenuButton.Select.decorate 接口替换已有的 select 元素，点击菜单项触发click事件弹出相应的value值</p>
<div id="container" style="margin-left:50px;">
<p>c2c 主题样式:</p>
<div>
<select name="decorateSelect" id="decorateSelect">
<option value="-1">请选择</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">天津</option>
<option value="4">南京</option>
<option value="5">杭州</option>
<option value="6">其他</option>
</select>
</div>
<p>pix 主题样式:</p>
<div>
<select name="decorateSelect2" id="decorateSelect2">
<option value="-1">请选择</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">天津</option>
<option value="4">南京</option>
<option value="5">杭州</option>
<option value="6">其他</option>
</select>
</div>
</div>
<script type="text/javascript">
require(['menu', 'menubutton'], function(Menu, MenuButton){
(function(){
// 调用 MenuButton.Select.decorate 接口替换已有的 select 元素
var select = MenuButton.Select.decorate('#decorateSelect', {
width:80,
prefixCls:"c2c-",
// 设置对齐方式, 与普通的 Align 大体一致
// 该配置同菜单配置项
menu:{
align:{
points : ['bl', 'tl'], //默认就是这个配置，可写可不写，或根据需要进行自定义定位
offset:[0, -1]
},
height:150,
elStyle:{
overflow:"auto",
overflowX:"hidden"
}
}
});
select.on("click", function (e) {
alert('当前值为: ' + select.get("value"));
});
})();
(function(){
// 调用 MenuButton.Select.decorate 接口替换已有的 select 元素
var select = MenuButton.Select.decorate('#decorateSelect2', {
prefixCls:"pix-",
// 设置对齐方式, 与普通的 Align 大体一致
// 该配置同菜单配置项
menu:{
align:{
points : ['bl', 'tl'], //默认就是这个配置，可写可不写，或根据需要进行自定义定位
offset:[0, -1]
},
height:150,
elStyle:{
overflow:"auto",
overflowX:"hidden"
}
}
});
select.on("click", function (e) {
alert('当前值为: ' + select.get("value"));
});
})();
});
</script>
</body>
</html>