yb
/
wms-pda-app
forked from project/wms-pda-app


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293
							<!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-right"></a>
			<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></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>
		<script src="../js/mui.min.js"></script>
		<script>
			var main,menu, mask = mui.createMask(_closeMenu);
			var showMenu = false,
				mode = 'main-move';

			 //整体滑动暂不支持android手机，因为两个页面的移动动画，无法保证同步性；
			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-left-plus-menu',
						url: 'offcanvas-drag-left-plus-menu.html',
						styles: {
							left: "30%",
							width: '70%',
							zindex: 9997
						}
					});
				},300);
			});

			/*
			 * 显示菜单菜单
			 */
			function openMenu() {
					if (!showMenu) {
						//解决android 4.4以下版本webview移动时，导致fixed定位元素错乱的bug;
						if (mui.os.android && parseFloat(mui.os.version) < 4.4) {
							document.querySelector("header.mui-bar").style.position = "static";
							//同时需要修改以下.mui-contnt的padding-top，否则会多出空白；
							document.querySelector(".mui-bar-nav~.mui-content").style.paddingTop = "0px";
						}

						//侧滑菜单处于隐藏状态，则立即显示出来；
						//显示完毕后，根据不同动画效果移动窗体；
						menu.show('none', 0, function() {
							switch (mode){
								case 'main-move':
									//主窗体开始侧滑；
									main.setStyle({
										left: '-70%',
										transition: {
											duration: 150
										}
									});
									break;
								case 'menu-move':
									menu.setStyle({
										left: '30%',
										transition: {
											duration: 150
										}
									});
									break;
								case 'all-move':
									main.setStyle({
										left: '-70%',
										transition: {
											duration: 150
										}
									});
									menu.setStyle({
										left: '30%',
										transition: {
											duration: 150
										}
									});
									break;
							}
						});
						//显示主窗体遮罩
						mask.show();
						showMenu = true;
					}
				}
			function closeMenu () {
				//窗体移动
				_closeMenu();
				//关闭遮罩
				mask.close();
			}
			
			/**
			 * 关闭侧滑菜单(业务部分)
			 */
			function _closeMenu() {
				if (showMenu) {
					//解决android 4.4以下版本webview移动时，导致fixed定位元素错乱的bug;
					if (mui.os.android && parseFloat(mui.os.version) < 4.4) {
						document.querySelector("header.mui-bar").style.position = "fixed";
						//同时需要修改以下.mui-contnt的padding-top，否则会多出空白；
						document.querySelector(".mui-bar-nav~.mui-content").style.paddingTop = "44px";
					}

					switch (mode){
						case 'main-move':
							//主窗体开始侧滑；
							main.setStyle({
								left: '0',
								transition: {
									duration: 150
								}
							});
							break;
						case 'menu-move':
							//主窗体开始侧滑；
							menu.setStyle({
								left: '100%',
								transition: {
									duration: 150
								}
							});
							break;
						case 'all-move':
							//主窗体开始侧滑；
							main.setStyle({
								left: '0',
								transition: {
									duration: 150
								}
							});
							//menu页面同时移动
							menu.setStyle({
								left: '100%',
								transition: {
									duration: 150
								}
							});
							
							break;
					}
					//等窗体动画结束后，隐藏菜单webview，节省资源；
					setTimeout(function() {
						menu.hide();
					}, 300);
					showMenu = false;
				}
			}
			
			//变换侧滑动画移动效果；
			mui('.mui-input-group').on('change', 'input', function() {
				if (this.checked) {
					switch (this.value) {
						case 'main-move':
							//仅主窗口移动的时候，menu页面的zindex值要低一点；
							menu.setStyle({left:'30%',zindex:9997});
//							menu.hide();
							mode = 'main-move';
							break;
						case 'menu-move':
							menu.setStyle({left:'100%',zindex:9999});
							mode = 'menu-move';
							break;
						case 'all-move':
							//切换为整体移动
							//变换menu界面初始化位置，整体移动时，Menu界面left需要在-70%的地方；
							menu.setStyle({
								left: '100%'
							});
							mode = 'all-move';
							break;
					}
				}
			});
			
			
			document.getElementById("show-btn").addEventListener('tap',openMenu);
			 //点击侧滑图标，打开侧滑菜单；
			document.querySelector('.mui-action-menu').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("swipeleft", openMenu);
			 //主界面向右滑动，若菜单已显示，则关闭菜单；否则，不做任何操作；
			window.addEventListener("swiperight", closeMenu);
			 //menu页面向右滑动，关闭菜单；
			window.addEventListener("menu:swiperight", closeMenu);

			 //重写mui.menu方法，Android版本menu按键按下可自动打开、关闭侧滑菜单；
			mui.menu = function() {
				if (showMenu) {
					closeMenu();
				} else {
					openMenu();
				}
			}
		</script>
	</body>
</html>