master

分支 (1)

管理

管理

master

aps-PDA
/
index_menu.html

<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<style>
			body,
			.mui-content {
				background-color: #333;
				color: #fff;
			}

			.title {
				margin: 35px 15px 10px;
			}

			.title+.content {
				margin: 10px 15px 35px;
				color: #bbb;
				text-indent: 1em;
				font-size: 14px;
				line-height: 24px;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div class="title">侧滑导航</div>
			<div class="content">
				这个页面是侧滑导航页面，是单独的一个页面，作为侧滑页面出现。关闭这个侧滑菜单的方式：1.点击这个侧滑菜单页面之外的任意位置；2.点击下面这个红色按钮<span id="android-only">；3.Android手机按back键;4.Android手机按menu键</span>。
			</div>
			<p style="margin: 10px 15px;">
				<button id="close-btn" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">关闭侧滑菜单</button>
			</p>
		</div>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init(); //初始化
			var aniShow = null;
			/*因为back按键和menu按键在ios平台不存在，所以ios平台下面需要隐藏，避免尴尬症。*/
			if(!mui.os.android) {
				var span = document.getElementById("android-only");
				if(span) {
					span.style.display = 'none';
				}
				aniShow = 'pop-in'; //页面显示动画
			}
			/*关闭侧滑菜单*/
			function close() {
				mui.fire(mui.currentWebview.opener(), "menu:close")
			}
			/*点击"关闭侧滑菜单"按钮处理逻辑*/
			document.getElementById("close-btn").addEventListener('tap', close);
			/*在Android4.4.2中的swipe事件,需要preventDefault一下,否则触发不正常*/
			window.addEventListener('dragstart', function(e) {
				mui.gestures.touch.lockDirection = true; //锁定方向
				mui.gestures.touch.startDirection = e.detail.direction;
			});
			window.addEventListener('swipe', function(e) {
				if(!mui.isScrolling) {
					e.detail.gesture.preventDefault();
				}
			});
			//监听左滑事件，若菜单已展开，左滑要关闭菜单
			window.addEventListener('swipeleft', function(e) {
				if(Math.abs(e.detail.angle) > 170) {
					close();
				}
			})
		</script>
	</body>

</html>