简单使用Toolbar
Source
Output
QRCode
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<title>简单使用toolbar</title>
<link rel="stylesheet" type="text/css" href="//g.alicdn.com/kissy/k/5.0.1/css/base.css">
<link rel="stylesheet" type="text/css" href="//g.alicdn.com/kissy/k/5.0.1/button/assets/dpl.css">
<link rel="stylesheet" type="text/css" href="//g.alicdn.com/kissy/k/5.0.1/menubutton/assets/dpl.css">
<link rel="stylesheet" type="text/css" href="//g.alicdn.com/kissy/k/5.0.1/menu/assets/dpl.css">
<style type="text/css">
.ks-toolbar {
background-color: #f2f2f2;
background-image: -moz-linear-gradient(top, #f5f5f5, #eeeeee);
background-image: -ms-linear-gradient(top, #f5f5f5, #eeeeee);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#eeeeee));
background-image: -webkit-linear-gradient(top, #f5f5f5, #eeeeee);
background-image: -o-linear-gradient(top, #f5f5f5, #eeeeee);
background-image: linear-gradient(top, #f5f5f5, #eeeeee);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#eeeeee', GradientType=0);
border: 1px solid #e5e5e5;
border-radius: 4px;
outline: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-box-shadow: inset 0 1px 0 #ffffff, 0 1 px 5 px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px 0 #ffffff, 0 1 px 5 px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 0 #ffffff, 0 1 px 5 px rgba(0, 0, 0, 0.1);
}
.ks-toolbar .ks-button {
background: transparent;
border: none;
text-shadow: none;
padding: 11px 12px 11px 12px;
color: #0088cc;
margin: 0;
border-left: 1px solid #f5f5f5;
border-right: 1px solid #e5e5e5;
border-radius: 0;
background-image: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.ks-toolbar .ks-button:first-child {
border-left: 0;
padding-left: 13px;
}
.ks-toolbar .ks-button:last-child {
border-right: 0;
padding-right: 13px;
}
.ks-toolbar .ks-button-hover {
color: #005580;
background-color: #eeeeee;
border-right-color: #dddddd;
}
.ks-toolbar .ks-button-checked,
.ks-toolbar .ks-button-active {
color: #777777;
background-color: #e9e9e9;
padding-left: 13px;
border-left: 0;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.05);
}
.ks-toolbar .ks-menu-button-dropdown {
border-top-color: #0088cc;
}
.ks-toolbar .ks-button-hover .ks-menu-button-dropdown {
border-top-color: #777777;
}
.ks-toolbar .ks-menu-button-open {
color: #ffffff;
background-color: #999999;
border-color: #999999;
}
.ks-toolbar .ks-menu-button-open .ks-menu-button-dropdown {
border-top-color: #ffffff;
}
</style>
<script type="text/javascript" src="//g.alicdn.com/kissy/k/5.0.1/seed-debug.js"></script>
</head>
<body>
<div style="width:90%;margin:0 auto;">
<h1>简单使用toolbar</h1>
<p>toolbar 本身只是一个容器，继承自 Component.Container。它的子节点children默认使用 button 组件，所以若设置了子节点则需要手动引入button模块，或者使用xclass则需要确保直接或间接引入相应的模块。如使用了 xclass:menu-button 则需要手动引入 menubuton 模块。</p>
<p>注意引入需要的css样式表或利用prefixCls自定义样式</p>
<div id="wrap">
</div>
</div>
<script type="text/javascript">
require(['toolbar', 'button', 'menubutton'], function(Toolbar){
var simpleToolbar = new Toolbar({
render : '#wrap',
width : '80%',
children : [
{
xclass : 'button',
content : 'Home'
},
{
xclass : 'button',
content : 'QuickStart'
},
{
xclass : 'menu-button',
content : 'Docs',
matchElWidth : false,
menu : {
children : [
{
content : 'API'
},
{
content : 'Guide'
}
]
}
},
{
xclass : 'button',
content : 'Contribute'
}
],
listeners : {
click : function(ev){
simpleToolbar.get('highlightedItem');
console.log(ev.target.get('content'));
}
}
}).render();
});
</script>
</body>
</html>