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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
							<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="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 type="text/css">
			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;
			}
			
			.mui-table-view {
				margin-bottom: 35px;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div class="title">侧滑导航</div>
			<div class="content">
				这是首页侧滑导航示例，你可以在这里放置任何内容；<span style="display: none;">关闭侧滑菜单有多种方式： 1.点击本侧滑菜单页之外的任意位置; 2.点击如下红色按钮
				<span id="android-only">；3.Android手机按back键；4.Android手机按menu键。
				</span></span>
				<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>
			<div class="title" style="margin-bottom: 25px;">mui典型控件</div>
			<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted" style="color: #ddd;">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="examples/pullrefresh_main.html">
						下拉刷新
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="examples/offcanvas-drag-left.html">
						侧滑导航
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" data-title-type="native" href="examples/switches.html">
						开关控件
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" data-title-type="native" href="examples/tableviews-with-swipe.html">
						列表左滑菜单
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="examples/tab-with-viewpagerindicator.html">
						可拖动式选项卡
					</a>
				</li>
			</ul>
		</div>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			var aniShow = "slide-in-right";
			//关于backbutton和menubutton两个按键的说明，在iOS平台不存在，故需隐藏
			if(!mui.os.android) {
				var span = document.getElementById("android-only")
				if(span) {
					span.style.display = "none";
				}
			}

			var subWebview = null,
				template = null,
				index = null;
			mui.plusReady(function() {
				//获得主页面webview引用；
				index = plus.webview.currentWebview().opener();
				var _self = plus.webview.currentWebview();
				_self.drag({
					direction: "left",
					moveMode: "followFinger"
				}, {
					view: index,
					moveMode: "follow"
				}, function(e) {});

			})
			mui('.mui-table-view').on('tap', 'a', function() {
				var id = this.getAttribute("href");
				var type = this.getAttribute("open-type");
				var href = this.href;
				
				var webview_style = {
					popGesture: "close",
					statusbar : {
						background: "#f7f7f7"
					}
				}
				
				var extras = {};

				var titleType = this.getAttribute("data-title-type");

				if(titleType == "native") {

					if(!~id.indexOf('pullrefresh.html')) {
						webview_style.bounce = "vertical";
					}

					var webview = plus.webview.create(href, id, webview_style);
					var view = new plus.nativeObj.View("title", {
						top: 0,
						height: "44px",
						width: "100%",
						dock: "top",
						position: "dock"
					});

					view.drawRect("#f7f7f7"); //绘制背景色
					view.drawRect("#cccccc", {
						top: "43px",
						left: "0px"
					}); //绘制底部边线

					var bitmap = new plus.nativeObj.Bitmap("back");
					bitmap.loadBase64Data("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAb1BMVEUAAAAAev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8AAACubimgAAAAI3RSTlMAGfUTGfQTGPMSGPIYGhgaGBsXGxcbFxwXHBccFhwWHRYdHWufDPQAAAABYktHRACIBR1IAAAAB3RJTUUH4QETEBwooeTlkQAAAJVJREFUSMft1EkSgkAQRNFGUXFWHBDBibr/HTUwD5B/48Ig1y+io7u6MqUhf5hsNEY+j5hMgZ/FJ8Xc9ovos3T96utjbfqN/Nb0O/m96Uv5g+mP8ifTn+Ur01/ka9Nf5RvTt/I309/lH6Z/yr9Mn+Q71/MT8B34K/E58Enzv8R/K98HvnF8p3lr8F7izce7lbf3kJ/lDQp9HdBhgg3PAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTAxLTE5VDE2OjI4OjQwKzA4OjAwpTDFwQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0wMS0xOVQxNjoyODo0MCswODowMNRtfX0AAAAASUVORK5CYII=");
					view.drawBitmap(bitmap, {}, {
						top: "10px",
						left: "10px",
						width: "24px",
						height: "24px"
					});
					view.drawText(this.innerText.trim(), {}, {
						size: "17px",
						weight: "normal"
					});

					view.setTouchEventRect({
						top: "0px",
						left: "0px",
						width: "44px",
						height: "100%"
					});
					view.interceptTouchEvent(true);
					view.addEventListener("click", function(e) {
						webview.evalJS("mui.back();");
					}, false);
					webview.append(view);

					webview.addEventListener("loaded", function() {
						webview.show(aniShow, 300, null, extras);
					})

				} else {
					//侧滑菜单需动态控制一下zindex值；
					if(~id.indexOf('offcanvas-')) {
						webview_style.zindex = 9998;
						webview_style.popGesture = ~id.indexOf('offcanvas-with-right') ? "close" : "none";
					}

					var webview = plus.webview.create(this.href, id, webview_style, extras);
					webview.addEventListener("loaded", function() {
						webview.show(aniShow, 300);
					});
				}
			});

			/**
			 * 关闭侧滑菜单
			 */
			function close() {
				mui.fire(mui.currentWebview.opener(), "menu:close");
			}

			//点击“关闭侧滑菜单”按钮处理逻辑
			document.getElementById("close-btn").addEventListener("tap", close);

			mui.init({
				swipeBack: false,
				keyEventBind: {
					backbutton: false //关闭back按键监听
				}
			});
		</script>
	</body>

</html>