mui跳转页面关闭侧导航

时间 2019-11-16

标签 mui 页面关闭导航繁體版

原文原文链接

主页面带有menu按钮，点击侧滑页面出来，点击侧滑页面的<li>标签，跳转到新页面，点击新页面，menu关闭。javascript

主页面代码：css

<!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="css/mui.min.css">
<link rel="stylesheet" href="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="setting.html" class="mui-icon-gear mui-icon mui-pull-right"></a>
</header>
<div class="mui-content">
</div>
</body>
<script src="js/mui.min.js"></script>
<script src="js/mui.enterfocus.js"></script>
<script src="js/app.js"></script>
<script src="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页面：html

<!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="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="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="waring.html" class="mui-navigate-right" >
信息
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="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="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="devicestatus.html">
item2
</a>
</li>
</ul>
</div>
<div id="footer"> 
</div> 
<script src="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 = 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>

整体来讲：java

在主页面添加监听左滑关闭事件即：jquery

window.addEventListener("menu:swipeleft", closeMenu);
在menu页面用fire方法来绑定主页面的左滑关闭事件：
即：

function closeMenu () {
mui.fire(index,"menu:swipeleft");得到父页面的自定义事件 } 
在menu页面添加点击<li>，menu关闭的监听事件：

mui('.mui-table-view').on('tap','.mui-table-view-cell',closeMenu);绑定关闭侧滑导航
关键：打开主页面使用show（），试着用openwindow（），menu第一次关闭不了，之后能够关闭可是mask仍然存在