yb
/
wms-pda-app
Fork de project/wms-pda-app


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292
							<!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>