首页 > 代码库 > mui跳转页面关闭侧导航
mui跳转页面关闭侧导航
主页面带有menu按钮，点击侧滑页面出来，点击侧滑页面的<li>标签，跳转到新页面，点击新页面，menu关闭。
主页面代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="http://www.mamicode.com/css/mui.min.css">
<link rel="stylesheet" href="http://www.mamicode.com/css/mian.css" />
<style>
html,
body {
background-color: #efeff4;
}
p {
text-indent: 22px;
}
.mui-icon {
cursor: pointer;
}
/*#slider{
height: 300px;
}
.mui-slider-item{
height: 300px;
}
.mui-slider-item img{
height: 300px;
}*/
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-menu mui-icon mui-icon-bars mui-pull-left"></a>
<h1 class="mui-title"></h1>
<a href="http://www.mamicode.com/setting.html" class="mui-icon-gear mui-icon mui-pull-right"></a>
</header>
<div class="mui-content">
</div>
</body>
<script src="http://www.mamicode.com/js/mui.min.js"></script>
<script src="http://www.mamicode.com/js/mui.enterfocus.js"></script>
<script src="http://www.mamicode.com/js/app.js"></script>
<script src="http://www.mamicode.com/js/jquery.min.js"></script>
<script>
//一些变量的定义，这是menu-move的一个动画，可以到官方demo查看其他动画
var main,menu, mask = mui.createMask(_closeMenu);
var showMenu = false,mode = ‘menu-move‘;
//ios手机
if (!mui.os.android) {
//整体滑动暂不支持android手机，因为两个页面的移动动画，无法保证同步性；
//document.getElementById("move-togger").classList.remove(‘mui-hidden‘);
var spans = document.querySelectorAll(‘.android-only‘);
for (var i=0,len=spans.length;i<len;i++) {
spans[i].style.display = "none";
}
}
mui.init({
swipeBack: false,
beforeback: back,
});
var aniShow = {};
function back() {
if (showMenu) {
//菜单处于显示状态，返回键应该先关闭菜单,阻止主窗口执行mui.back逻辑；
closeMenu();
return false;
} else {
//菜单处于隐藏状态，执行返回时，要先close菜单页面，然后继续执行mui.back逻辑关闭主窗口；
menu.close(‘none‘);
return true;
}
}
//plusReady事件后，自动创建menu窗口；
mui.plusReady(function() {
main = plus.webview.currentWebview();
//setTimeout的目的是等待窗体动画结束后，再执行create webview操作，避免资源竞争，导致窗口动画不流畅；
setTimeout(function () {
//侧滑菜单默认隐藏，这样可以节省内存；
menu = mui.preload({
id: ‘menu‘,
url: ‘menu.html‘,
styles: {
left: 0,
width: ‘70%‘,
zindex: 9997
}
});
},300);
});
/**
* 显示菜单菜单
*/
function openMenu() {
if (!showMenu) {
//alert(plus.storage.getItem(‘account‘));
//侧滑菜单处于隐藏状态，则立即显示出来；
//显示完毕后，根据不同动画效果移动窗体；
menu.show(‘none‘, 0, function() {
menu.setStyle({
left: ‘0%‘,
transition: {
duration: 150
}
});
});
//显示遮罩
mask.show();
showMenu = true;
}
}
/**
* 关闭侧滑菜单
*/
function closeMenu () {
_closeMenu();
//关闭遮罩
mask.close();
}
/**
* 关闭侧滑菜单（业务部分）
*/
function _closeMenu() {
if (showMenu) {
//关闭遮罩；
//主窗体开始侧滑；
menu.setStyle({
left: ‘-70%‘,
transition: {
duration: 150
}
});
//等窗体动画结束后，隐藏菜单webview，节省资源；
setTimeout(function() {
menu.hide();
}, 200);
//改变标志位
showMenu = false;
}
}
window.addEventListener("menu:close", closeMenu);
//变换侧滑动画移动效果；
mui(‘.mui-input-group‘).on(‘change‘, ‘input‘, function() {
if (this.checked) {
menu.setStyle({left:‘-70%‘,zindex:9999});
if(mode==‘all-move‘){
menu.setStyle({
left: ‘0%‘
});
}
mode = ‘menu-move‘;
}
});
//点击左上角图标，打开侧滑菜单；
document.querySelector(‘.mui-icon-bars‘).addEventListener(‘tap‘, openMenu);
//document.getElementById("show-btn").addEventListener(‘tap‘,openMenu);
//在android4.4中的swipe事件，需要preventDefault一下，否则触发不正常
//故，在dragleft，dragright中preventDefault
window.addEventListener(‘dragright‘, function(e) {
e.detail.gesture.preventDefault();
});
window.addEventListener(‘dragleft‘, function(e) {
e.detail.gesture.preventDefault();
});
//主界面向右滑动，若菜单未显示，则显示菜单；否则不做任何操作；
window.addEventListener("swiperight", openMenu);
//主界面向左滑动，若菜单已显示，则关闭菜单；否则，不做任何操作；
window.addEventListener("swipeleft", closeMenu);
//menu页面向左滑动，关闭菜单；
window.addEventListener("menu:swipeleft", closeMenu);-------------这是关键
//重写mui.menu方法，Android版本menu按键按下可自动打开、关闭侧滑菜单；
mui.menu = function() {
if (showMenu) {
closeMenu();
} else {
openMenu();
}
}
</script>
</html>
menu页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="http://www.mamicode.com/css/mui.min.css">
<style>
body, .mui-content {
background-color: #333;
color: #fff;
}
header.mui-bar{
display: none;
}
.mui-bar-nav~.mui-content{
padding: 0;
}
.title{
margin: 35px 15px 10px 25px;
}
#Aimg{
background-image: url(images/plug.png);
background-repeat:no-repeat;
background-size:20px 20px;
}
.title+.content{
margin: 10px 15px 35px;
color: #bbb;
text-indent: 1em;
font-size: 14px;
line-height: 24px;
}
.mui-table-view{
margin-bottom: 35px;
}
#lfoot{
background:#CCC;border-top:1px solid #000; padding:10px 0 30px 0; width:100%;
margin-left: 0px ;
margin-bottom: 0px;
}
#hfoot{
margin-left:0px ;
margin-bottom: 0px;
}
#footer{
margin-top: 100px;
margin-left: 15px;
margin-bottom: 0px;
}
</style>
</head>
<body>
<div class="mui-content">
<div id="Aimg">
<div class="title">智冷云控</div></div>
<div class="content">
<span class="android-only">
<!--<img src="http://www.mamicode.com/images/plug.png"/>-->
</span>
<p style="margin: 10px 15px;">
<label id="close-btn" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;"></label>
</p>
</div>
<div class="title1" style="margin-bottom: 25px;">系统</div>
<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
<li class="mui-table-view-cell" id="warnText">
<a href="http://www.mamicode.com/waring.html" class="mui-navigate-right" >
信息
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="http://www.mamicode.com/maps_map.html">
信息
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
状态
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="http://www.mamicode.com/historyPage_02.html">
湿度
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
item
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="http://www.mamicode.com/devicestatus.html">
item2
</a>
</li>
</ul>
</div>
<div id="footer">
</div>
<script src="http://www.mamicode.com/js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
var aniShow = "slide-in-right";
//关于backbutton和menubutton两个按键的说明，在iOS平台不存在，故需隐藏
if(!mui.os.android) {
var span = document.getElementById("android-only")
if(span) {
span.style.display = "none";
}
}
var subWebview = null,
template = null,
index = null;
mui.plusReady(function() {
//获得主页面webview引用；父页面
index = plus.webview.currentWebview().opener();
var _self = plus.webview.currentWebview();
_self.drag({
direction: "left",
moveMode: "followFinger"
}, {
view: index,
moveMode: "follow"
}, function(e) {});
})
mui(‘.mui-table-view‘).on(‘tap‘, ‘a‘, function() {
var id = this.getAttribute("href");
var type = this.getAttribute("open-type");
var href = http://www.mamicode.com/this.href;
var webview_style = {
popGesture: "close"
}
var extras = {
};
var titleType = this.getAttribute("data-title-type");
//侧滑菜单需动态控制一下zindex值；
if(~id.indexOf(‘offcanvas-‘)) {
webview_style.zindex = 9998;
webview_style.popGesture = ~id.indexOf(‘offcanvas-with-right‘) ? "close" : "none";
}
var webview = plus.webview.create(this.href, id, webview_style, extras);
webview.addEventListener("loaded", function() {
webview.show(aniShow, 300);
});
//}
});
/**
* 关闭侧滑菜单
*/
function closeMenu () {
mui.fire(index,"menu:swipeleft");获得父页面的自定义事件
}
//优化显示出来的侧滑菜单，只需监听该菜单的左滑事件，然后将其关闭即可；在菜单上右滑，不做任何操作；
window.addEventListener("swipeleft",closeMenu);
mui(‘.mui-table-view‘).on(‘tap‘,‘.mui-table-view-cell‘,closeMenu);绑定关闭侧滑导航
mui.menu = closeMenu;
//点击“关闭侧滑菜单”按钮处理逻辑
//document.getElementById("close-btn").addEventListener("tap", close);
mui.init({
swipeBack: false,
keyEventBind: {
backbutton: false //关闭back按键监听
}
});
</script>
</body>
</html>
mui跳转页面关闭侧导航