- 软件开发
- mui中webview模式实现侧滑菜单子页面、导航子页面（原创转载请附上博文链接）
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
</head>
<body id="body">
<header class="mui-bar mui-bar-nav">
<a class="mui-icon mui-pull-left" id="sideMenuBtn"></a>
<h1 class="mui-title">标题
</h1>
</header>
<div class="mui-content">
</div>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" id="tab0">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页
</span>
</a>
<a class="mui-tab-item" id="tab1">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">电话
</span>
</a>
<a class="mui-tab-item" id="tab2">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">邮件
</span>
</a>
<a class="mui-tab-item" id="tab3">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置
</span>
</a>
</nav>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init();
var subPageUrl = ['tab1.html','tab2.html','tab3.html','tab4.html'];
var subWebview = {};
var menu = null;
var currentTabIndex = 0;
mui.plusReady(function(){
var main = plus.webview.currentWebview();
for(i in subPageUrl){
subWebview[i] = mui.preload({
id: subPageUrl[i],
url: subPageUrl[i],
styles: {
top: '44px',
bottom: '51px',
left: '0px',
bounce: 'vertical',
bounceBackground: '#DCDCDC'
},
waiting: {
autoShow: false
}
})
subWebview[i].hide();
main.append(subWebview[i]);
}
subWebview[currentTabIndex].show();
menu = mui.preload({
url: "side.html",
id: "side.html",
styles: {
left: '-80%',
width: "80%",
mask: 'rgba(0,0,0,0)'
},
show: {
aniShow: "none"
}
});
menu.show();
mui(".mui-bar-tab").on("tap","a",function(){
var id = mui(this)[0].getAttribute("id");
var tabIndex = id.replace("tab","");
if(currentTabIndex == tabIndex){
return;
}else{
currentTabIndex = tabIndex;
var tabUrl = subPageUrl[tabIndex];
subWebview[currentTabIndex].hide();
subWebview[tabIndex].show();
}
})
var menuIsShow = false;
main_slide("right");
function main_slide(direction){
main.drag({
direction: direction,
callbackStep: 10,
moveMode: 'silent'
}, {
view: menu,
moveMode: 'follow'
}, function(e, s) {
if(!menuIsShow){
main.setStyle({
mask: "rgba(0,0,0,0.4)"
});
if(e.type === "end" && e.progress === "100"){
menuIsShow = true;
}
if(e.type === "end" && e.progress === "0"){
main.setStyle({
mask: "none"
});
}
}else{
if(e.type === "end" && e.progress === "100"){
main.setStyle({
mask: "none"
});
menuIsShow = false;
}
}
});
}
main.addEventListener("maskClick", function(){
if(menuIsShow){
menuIsShow = false;
menu.setStyle({
mask: "rgba(0,0,0,0)",
left: "-80%",
transition: {
duration: 200
}
});
mui.later(function() {
main.setStyle({
mask: 'none'
});
}, 200);
}
});
})
</script>
</body>
</html>
