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仍然存在

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。