[MUI框架]-滑动侧边栏-webview模式

第一步：引入必要的文件

<link href="css/mui.min.css" rel="stylesheet"/>
<script src="js/mui.min.js"></script>

第二步：写出必要的结构

<header class="mui-bar mui-bar-nav">
<a class="mui-action-menu mui-icon mui-icon-bars mui-pull-right"></a>
<h1 class="mui-title">off canvas（侧滑导航）</h1>
</header>

<div class="mui-content">
<div class="mui-content-padded">
<p>这是webview模式右滑导航示例，主页面和菜单在不同的webview中，
优点是支持菜单内容在多页面的复用，缺点是不支持拖动手势（跟手）；
当前页面为主界面，你可以在主界面放置任何内容；
</p>
<p style="padding: 5px 20px;margin-bottom: 5px;">
<button id="show-btn" type="button" class="mui-btn mui-btn-primary mui-btn-block" style="padding: 10px;">显示侧滑菜单</button>
</p>
</div>
</div>

第三步：写上必要的启动js

<script>
//生成2个对象分别控制主窗口和菜单窗口；
var menu = null,main = null;
var showMenu = false;
var isInTransition = false;
//开始预加载菜单页；
mui.plusReady(function() {
main = plus.webview.currentWebview();
main.addEventListener('maskClick', closeMenu);
//处理侧滑导航，为了避免和子页面初始化等竞争资源，延迟加载侧滑页面；
setTimeout(function() {
menu = mui.preload({
id: 'sidemenu',
url: 'sidemenu.html',
styles: {
left: 0,
width: '70%',
zindex: -1
}
});
}, 200);
});
//打开侧滑窗口；
function openMenu() {
if (isInTransition) {
return;
}
if (!showMenu) {
//侧滑菜单处于隐藏状态，则立即显示出来；
isInTransition = true;
menu.setStyle({
mask: 'rgba(0,0,0,0)'
}); //menu设置透明遮罩防止点击
menu.show('none', 0, function() {
//主窗体开始侧滑并显示遮罩
main.setStyle({
mask: 'rgba(0,0,0,0.4)',
left: '70%',
transition: {
duration: 200
}
});
mui.later(function() {
isInTransition = false;
menu.setStyle({
mask: "none"
}); //移除menu的mask
}, 200);
showMenu = true;
});
}
};
//关闭侧滑窗口；
function closeMenu() {
if (isInTransition) {
return;
}
if (showMenu) {
//关闭遮罩；
//主窗体开始侧滑；
isInTransition = true;
main.setStyle({
mask: 'none',
left: '0',
transition: {
duration: 200
}
});
showMenu = false;
//等动画结束后，隐藏菜单webview，节省资源；
mui.later(function() {
isInTransition = false;
menu.hide();
}, 200);
}
};
//点击头部菜单小图标，打开侧滑菜单；
document.querySelector('.mui-icon-bars').addEventListener('tap', openMenu);
//点击自定义按钮，打开侧滑菜单；
document.querySelector('#show-btn').addEventListener('tap', openMenu);
//menu页面点击后关闭菜单；
window.addEventListener("menu:tap", closeMenu);
</script>