左边栏视图
请在移动浏览器或打开chrome开发人员工具模拟移动浏览器查看demo。
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">
<link href="//g.alicdn.com/kissy/k/5.0.1/css/base.css" rel="stylesheet"/>
<link href="//g.alicdn.com/kissy/k/5.0.1/navigation-view/assets/dpl.css" rel="stylesheet">
<link href="//g.alicdn.com/kissy/k/5.0.1/scroll-view/assets/dpl.css" rel="stylesheet"/>
<style>
html, body {
height: 100%;
}
.wrap {
display: -webkit-box;
height: 100%;
}
.sidebar {
width: 200px;
position: relative;
border: 1px solid red;
}
.content {
-webkit-box-flex: 2;
border: 1px solid green;
}
.list-item {
padding: 10px;
border: 1px solid #000000;
}
</style>
</head>
<body>
<div class="wrap">
<div class="sidebar"></div>
<div class="content">
right content here
right content here
right content here
</div>
</div>
<script src="//g.alicdn.com/kissy/k/5.0.1/seed-debug.js"></script>
<script>
require(['navigation-view','navigation-view/bar','node','scroll-view','scroll-view/plugin/scrollbar'],function (NavigationView, Bar, $, ScrollView, ScrollBar) {
var win = $(window);
var navigationView = new NavigationView({
render: '.sidebar'
}).render();
var bar = new Bar({
navigationView: navigationView,
elBefore: navigationView.get('contentEl')
}).render();
var TbDetailView = ScrollView.extend({}, {
xclass: 'tb-detail-view',
ATTRS: {
plugins: [ScrollBar]
}
});
var IndexView = ScrollView.extend({
bindUI: function () {
this.get('contentEl').delegate('click', '.list-item', this.onSelect, this);
},
onSelect: function (e) {
var content = e.currentTarget.innerHTML;
navigationView.push({
xclass: 'tb-detail-view',
content: content + ' detail!'
});
},
enter: function () {
this.sync();
win.on('resize', this.sync, this);
},
leave: function () {
win.detach('resize', this.sync, this);
},
createDom: function () {
var ret = [];
for (var i = 0; i < 20; i++) {
ret.push('<div class="list-item">' + i + '</div>');
}
this.get('contentEl').html(ret.join(''));
}
}, {
xclass: 'tb-index-view',
ATTRS: {
plugins: [ScrollBar]
}
});
navigationView.push({
xclass: 'tb-index-view'
});
});
</script>
</body>
</html>