292 lines
7.9 KiB
HTML
292 lines
7.9 KiB
HTML
|
<!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">
|
|||
|
|
<style>
|
|||
|
|
html,
|
|||
|
|
body {
|
|||
|
|
background-color: #efeff4;
|
|||
|
|
}
|
|||
|
|
p {
|
|||
|
|
text-indent: 22px;
|
|||
|
|
}
|
|||
|
|
span.mui-icon {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #007aff;
|
|||
|
|
margin-left: -15px;
|
|||
|
|
padding-right: 10px;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<header class="mui-bar mui-bar-nav">
|
|||
|
|
<a class="mui-action-menu mui-icon mui-icon-bars mui-pull-left"></a>
|
|||
|
|
<a class="mui-action-back mui-btn mui-btn-link mui-pull-right">关闭</a>
|
|||
|
|
<h1 class="mui-title">off canvas（侧滑导航）</h1>
|
|||
|
|
</header>
|
|||
|
|
<div class="mui-content">
|
|||
|
|
<div class="mui-content-padded">
|
|||
|
|
<p>这是webview模式右滑导航示例，主页面和菜单在不同的webview中，
|
|||
|
|
优点是支持菜单内容在多页面的复用，缺点是不支持拖动手势（跟手）；
|
|||
|
|
当前页面为主界面，你可以在主界面放置任何内容；
|
|||
|
|
打开侧滑菜单有多种方式：
|
|||
|
|
1、在当前页面快速向右滑动（swipe）；
|
|||
|
|
2、点击页面左上角的
|
|||
|
|
<span class="mui-icon mui-icon-bars"></span> 图标；
|
|||
|
|
3、通过JS API触发（例如点击如下蓝色按钮体验）；
|
|||
|
|
<span class="android-only">4、Android手机按menu键；</span>
|
|||
|
|
</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>
|
|||
|
|
<p >侧滑菜单的移动动画，支持多种效果，切换如下选项体验不同动画效果：</p>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<form class="mui-input-group" style="margin-bottom: 15px;">
|
|||
|
|
<div class="mui-input-row mui-radio">
|
|||
|
|
<label>主界面移动、菜单不动</label>
|
|||
|
|
<input name="style" type="radio" checked="" value="main-move">
|
|||
|
|
</div>
|
|||
|
|
<div class="mui-input-row mui-radio">
|
|||
|
|
<label>主界面不动、菜单移动</label>
|
|||
|
|
<input name="style" type="radio" value="menu-move">
|
|||
|
|
</div>
|
|||
|
|
<div class="mui-input-row mui-radio mui-hidden" id="move-togger">
|
|||
|
|
<label>整体移动</label>
|
|||
|
|
<input name="style" type="radio" value="all-move">
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
<script src="../js/mui.min.js"></script>
|
|||
|
|
<script>
|
|||
|
|
var main,menu, mask = mui.createMask(_closeMenu);
|
|||
|
|
var showMenu = false,mode = 'main-move';
|
|||
|
|
|
|||
|
|
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
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
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: 'offcanvas-drag-right-plus-menu',
|
|||
|
|
url: 'offcanvas-drag-right-plus-menu.html',
|
|||
|
|
styles: {
|
|||
|
|
left: 0,
|
|||
|
|
width: '70%',
|
|||
|
|
zindex: 9997
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},300);
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
/**
|
|||
|
|
* 显示菜单菜单
|
|||
|
|
*/
|
|||
|
|
function openMenu() {
|
|||
|
|
if (!showMenu) {
|
|||
|
|
//侧滑菜单处于隐藏状态，则立即显示出来；
|
|||
|
|
//显示完毕后，根据不同动画效果移动窗体；
|
|||
|
|
menu.show('none', 0, function() {
|
|||
|
|
switch (mode){
|
|||
|
|
case 'main-move':
|
|||
|
|
//主窗体开始侧滑；
|
|||
|
|
main.setStyle({
|
|||
|
|
left: '70%',
|
|||
|
|
transition: {
|
|||
|
|
duration: 150
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
break;
|
|||
|
|
case 'menu-move':
|
|||
|
|
menu.setStyle({
|
|||
|
|
left: '0%',
|
|||
|
|
transition: {
|
|||
|
|
duration: 150
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
break;
|
|||
|
|
case 'all-move':
|
|||
|
|
main.setStyle({
|
|||
|
|
left: '70%',
|
|||
|
|
transition: {
|
|||
|
|
duration: 150
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
menu.setStyle({
|
|||
|
|
left: '0%',
|
|||
|
|
transition: {
|
|||
|
|
duration: 150
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
//显示遮罩
|
|||
|
|
mask.show();
|
|||
|
|
showMenu = true;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
/**
|
|||
|
|
* 关闭侧滑菜单
|
|||
|
|
*/
|
|||
|
|
function closeMenu () {
|
|||
|
|
_closeMenu();
|
|||
|
|
//关闭遮罩
|
|||
|
|
mask.close();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 关闭侧滑菜单（业务部分）
|
|||
|
|
*/
|
|||
|
|
function _closeMenu() {
|
|||
|
|
if (showMenu) {
|
|||
|
|
//关闭遮罩；
|
|||
|
|
switch (mode){
|
|||
|
|
case 'main-move':
|
|||
|
|
//主窗体开始侧滑；
|
|||
|
|
main.setStyle({
|
|||
|
|
left: '0',
|
|||
|
|
transition: {
|
|||
|
|
duration: 150
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
break;
|
|||
|
|
case 'menu-move':
|
|||
|
|
//主窗体开始侧滑；
|
|||
|
|
menu.setStyle({
|
|||
|
|
left: '-70%',
|
|||
|
|
transition: {
|
|||
|
|
duration: 150
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
break;
|
|||
|
|
case 'all-move':
|
|||
|
|
//主窗体开始侧滑；
|
|||
|
|
main.setStyle({
|
|||
|
|
left: '0',
|
|||
|
|
transition: {
|
|||
|
|
duration: 150
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
//menu页面同时移动
|
|||
|
|
menu.setStyle({
|
|||
|
|
left: '-70%',
|
|||
|
|
transition: {
|
|||
|
|
duration: 150
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//等窗体动画结束后，隐藏菜单webview，节省资源；
|
|||
|
|
setTimeout(function() {
|
|||
|
|
menu.hide();
|
|||
|
|
}, 200);
|
|||
|
|
//改变标志位
|
|||
|
|
showMenu = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//变换侧滑动画移动效果；
|
|||
|
|
mui('.mui-input-group').on('change', 'input', function() {
|
|||
|
|
if (this.checked) {
|
|||
|
|
switch (this.value) {
|
|||
|
|
case 'main-move':
|
|||
|
|
//仅主窗口移动的时候，menu页面的zindex值要低一点；
|
|||
|
|
menu.setStyle({left:'0',zindex:9997});
|
|||
|
|
if(mode=='all-move'){
|
|||
|
|
menu.setStyle({
|
|||
|
|
left: '0%'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
mode = 'main-move';
|
|||
|
|
break;
|
|||
|
|
case 'menu-move':
|
|||
|
|
menu.setStyle({left:'-70%',zindex:9999});
|
|||
|
|
if(mode=='all-move'){
|
|||
|
|
menu.setStyle({
|
|||
|
|
left: '0%'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
mode = 'menu-move';
|
|||
|
|
break;
|
|||
|
|
case 'all-move':
|
|||
|
|
//切换为整体移动
|
|||
|
|
//首先改变移动标志
|
|||
|
|
slideTogether = true;
|
|||
|
|
//变换menu界面初始化位置，整体移动时，Menu界面left需要在-70%的地方；
|
|||
|
|
menu.setStyle({
|
|||
|
|
left: '-70%'
|
|||
|
|
});
|
|||
|
|
mode = 'all-move';
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
//点击左上角图标，打开侧滑菜单；
|
|||
|
|
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>
|