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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384
							<!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 {
				min-height: 100%;
				background-color: #efeff4;
			}
			.animated {
				-webkit-animation-duration: 0.5s;
				animation-duration: 0.5s;
				-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
			}
			@-webkit-keyframes bounceInDown {
				0%, 60%, 75%, 90%, 100% {
					-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
					transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
				}
				0% {
					opacity: 0;
					-webkit-transform: translate3d(0, -100%, 0);
					transform: translate3d(0, -100%, 0);
				}
				60% {
					opacity: 1;
					-webkit-transform: translate3d(0, 25px, 0);
					transform: translate3d(0, 25px, 0);
				}
				75% {
					-webkit-transform: translate3d(0, -10px, 0);
					transform: translate3d(0, -10px, 0);
				}
				90% {
					-webkit-transform: translate3d(0, 5px, 0);
					transform: translate3d(0, 5px, 0);
				}
				100% {
					-webkit-transform: none;
					transform: none;
				}
			}
			@keyframes bounceInDown {
				0%, 60%, 75%, 90%, 100% {
					-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
					transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
				}
				0% {
					opacity: 0;
					-webkit-transform: translate3d(0, -100%, 0);
					transform: translate3d(0, -100%, 0);
				}
				60% {
					opacity: 1;
					-webkit-transform: translate3d(0, 25px, 0);
					transform: translate3d(0, 25px, 0);
				}
				75% {
					-webkit-transform: translate3d(0, -10px, 0);
					transform: translate3d(0, -10px, 0);
				}
				90% {
					-webkit-transform: translate3d(0, 5px, 0);
					transform: translate3d(0, 5px, 0);
				}
				100% {
					-webkit-transform: none;
					transform: none;
				}
			}
			.bounce-in-down {
				-webkit-animation-name: bounceInDown;
				animation-name: bounceInDown;
			}
			@-webkit-keyframes fadeInDown {
				0%, 60%, 75%, 90%, 100% {
					-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
					transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
				}
				0% {
					opacity: 0;
					-webkit-transform: translate3d(0, -100%, 0);
					transform: translate3d(0, -100%, 0);
				}
				60% {
					opacity: 1;
					-webkit-transform: translate3d(0, 0px, 0);
					transform: translate3d(0, 0px, 0);
				}
				75% {
					-webkit-transform: translate3d(0, 0px, 0);
					transform: translate3d(0, 0px, 0);
				}
				90% {
					-webkit-transform: translate3d(0, 0px, 0);
					transform: translate3d(0, 0px, 0);
				}
				100% {
					-webkit-transform: none;
					transform: none;
				}
			}
			@keyframes fadeInDown {
				0%, 60%, 75%, 90%, 100% {
					-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
					transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
				}
				0% {
					opacity: 0;
					-webkit-transform: translate3d(0, -100%, 0);
					transform: translate3d(0, -100%, 0);
				}
				60% {
					opacity: 1;
					-webkit-transform: translate3d(0, 0px, 0);
					transform: translate3d(0, 0px, 0);
				}
				75% {
					-webkit-transform: translate3d(0, 0px, 0);
					transform: translate3d(0, 0px, 0);
				}
				90% {
					-webkit-transform: translate3d(0, 0px, 0);
					transform: translate3d(0, 0px, 0);
				}
				100% {
					-webkit-transform: none;
					transform: none;
				}
			}
			.fade-in-down {
				-webkit-animation-name: fadeInDown;
				animation-name: fadeInDown;
			}
			@-webkit-keyframes bounceOutUp {
				20% {
					-webkit-transform: translate3d(0, -10px, 0);
					transform: translate3d(0, -10px, 0);
				}
				40%,
				45% {
					opacity: 1;
					-webkit-transform: translate3d(0, 20px, 0);
					transform: translate3d(0, 20px, 0);
				}
				100% {
					opacity: 0;
					-webkit-transform: translate3d(0, -100%, 0);
					transform: translate3d(0, -100%, 0);
				}
			}
			@keyframes bounceOutUp {
				20% {
					-webkit-transform: translate3d(0, -10px, 0);
					transform: translate3d(0, -10px, 0);
				}
				40%,
				45% {
					opacity: 1;
					-webkit-transform: translate3d(0, 20px, 0);
					transform: translate3d(0, 20px, 0);
				}
				100% {
					opacity: 0;
					-webkit-transform: translate3d(0, -100%, 0);
					transform: translate3d(0, -100%, 0);
				}
			}
			.bounce-out-up {
				-webkit-animation-name: bounceOutUp;
				animation-name: bounceOutUp;
			}
			@-webkit-keyframes fadeOutUp {
				20% {
					-webkit-transform: translate3d(0, 0px, 0);
					transform: translate3d(0, 0px, 0);
				}
				40%,
				45% {
					opacity: 1;
					-webkit-transform: translate3d(0, 0px, 0);
					transform: translate3d(0, 0px, 0);
				}
				100% {
					opacity: 0;
					-webkit-transform: translate3d(0, -100%, 0);
					transform: translate3d(0, -100%, 0);
				}
			}
			@keyframes fadeOutUp {
				20% {
					-webkit-transform: translate3d(0, 0px, 0);
					transform: translate3d(0, 0px, 0);
				}
				40%,
				45% {
					opacity: 1;
					-webkit-transform: translate3d(0, 0px, 0);
					transform: translate3d(0, 0px, 0);
				}
				100% {
					opacity: 0;
					-webkit-transform: translate3d(0, -100%, 0);
					transform: translate3d(0, -100%, 0);
				}
			}
			.fade-out-up {
				-webkit-animation-name: fadeOutUp;
				animation-name: fadeOutUp;
			}
			.menu-open {
				height: 100%;
				width: 100%;
			}
			.menu-open .mui-scroll-wrapper {
				position: absolute;
				top: 48;
				bottom: 0;
				left: 0;
				z-index: 1;
				width: 100%;
				overflow: hidden;
				-webkit-backface-visibility: hidden;
			}
			.menu-backdrop {
				display: none;
			}
			.menu-open .menu-backdrop {
				position: fixed;
				top: 0;
				bottom: 0;
				height: 100%;
				width: 100%;
				display: block;
				z-index: 998;
			}
			.menu-wrapper {
				position: absolute;
				top: 48px;
				left: 0;
				right: 0;
				z-index: 999;
				text-align: center;
				background-color: #333;
				width: 100%;
			}
			.menu-wrapper.hidden {
				-webkit-transform: translate3d(0, -100%, 0);
				transform: translate3d(0, -100%, 0);
				z-index: -1;
			}
			.menu {
				width: 100%;
			}
			.menu .mui-table-view-inverted {
				color: gray;
				font-size: 19px;
			}
			.menu .mui-table-view-inverted .mui-table-view-cell:after {
				height: 2px;
				left: 0;
				right: 0;
			}
			.menu-wrapper.mui-active,
			.menu-wrapper.mui-active .menu {
				-webkit-transform: translate3d(0, 0, 0);
				transform: translate3d(0, 0, 0);
			}
			#info{
			  	padding: 20px 10px ;
			 }
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a id="icon-menu" 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">div模式下拉菜单</h1>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded" >
				<p>这是div模式下沉菜单示例，主页面和菜单在一个HTML文件中，
					
					当前页面为主界面，你可以在主界面放置任何内容；
					 打开侧滑菜单有多种方式：  1、点击页面左上角的
					<span class="mui-icon mui-icon-bars"></span> 图标；
					 2、通过JS API触发（例如点击如下蓝色按钮体验）；
					 <span class="android-only">3、Android手机按menu键；</span>
				</p>
				<p style="padding: 5px 20px;margin-bottom: 5px;">
					<button id="menu-btn" type="button" class="mui-btn mui-btn-primary mui-btn-block" style="padding: 10px;">
						显示下拉菜单
					</button>
				</p>
				<div id="info"></div>
			</div>
			
		</div>
		<div id="menu-wrapper" class="menu-wrapper hidden">
			<div id="menu" class="menu">
				<ul class="mui-table-view mui-table-view-inverted">
					<li class="mui-table-view-cell">
						<a href="javascript:;">Item 1</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="javascript:;">Item 2</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="javascript:;">Item 3</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="javascript:;">Item 4</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="javascript:;">Item 5</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="javascript:;">Item 6</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="javascript:;">Item 7</a>
					</li>
				</ul>
			</div>
		</div>
		<div id="menu-backdrop" class="menu-backdrop"></div>
		<script src="../js/mui.min.js"></script>
		<script>
			mui.init({
				swipeBack:true //启用右滑关闭功能
			});
			var menuWrapper = document.getElementById("menu-wrapper");
			var menu = document.getElementById("menu");
			var menuWrapperClassList = menuWrapper.classList;
			var backdrop = document.getElementById("menu-backdrop");
			var info = document.getElementById("info");
			
			backdrop.addEventListener('tap', toggleMenu);
			document.getElementById("menu-btn").addEventListener('tap', toggleMenu);
			document.getElementById("icon-menu").addEventListener('tap',toggleMenu)
			//下沉菜单中的点击事件
			mui('#menu').on('tap', 'a', function() {
				toggleMenu();
				info.innerHTML = '你已选择：'+this.innerHTML;
			});
			var busying = false;

			function toggleMenu() {
				if (busying) {
					return;
				}
				busying = true;
				if (menuWrapperClassList.contains('mui-active')) {
					document.body.classList.remove('menu-open');
					menuWrapper.className = 'menu-wrapper fade-out-up animated';
					menu.className = 'menu bounce-out-up animated';
					setTimeout(function() {
						backdrop.style.opacity = 0;
						menuWrapper.classList.add('hidden');
					}, 500);
				} else {
					document.body.classList.add('menu-open');
					menuWrapper.className = 'menu-wrapper fade-in-down animated mui-active';
					menu.className = 'menu bounce-in-down animated';
					backdrop.style.opacity = 1;
				}
				setTimeout(function() {
					busying = false;
				}, 500);
			}
		</script>
	</body>

</html>