hltmapp-mui
/
index-menu.html

<!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">
		<link rel="stylesheet" href="css/app.css" />
		<style type="text/css">
			.mui-table-view {
				margin-bottom: 35px;
				background-color: transparent;
			}

			.logo {
				padding: 12px;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div class="logo">
				<img src="http://www.hltm.tv/statics/tp/images/logo.png" width="100%" alt="" />
			</div>
			<ul class="mui-table-view mui-table-view-chevron">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" data-url="week-update.html" href="javascript:;">
						一周更新
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" data-url="lastest.html" href="javascript:;">
						最新更新
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" data-url="hot.html" href="javascript:;">
						热门新番
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" data-url="animate-7.html" href="javascript:;">
						连载动漫
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" data-url="animate-18.html" href="javascript:;">
						完结动漫
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" data-url="news.html" href="javascript:;">
						新闻列表
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" data-url="topic-news.html" href="javascript:;">
						榜单资讯
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" data-url="topics.html" href="javascript:;">
						专题列表
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" data-url="about.html" href="javascript:;">
						关于
					</a>
				</li>
			</ul>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/common.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";
				}
				aniShow = "pop-in";
			}
			var subWebview = null,
				template = null,
				index = null;
			mui.plusReady(function() {
				//获得主页面webview引用；
				index = plus.webview.currentWebview().opener();
			})
			mui('.mui-table-view').on('tap', 'a', function() {
				var url = this.getAttribute("data-url");
				close();
				mui.openWindow({
					id: url,
					url: url,
					waiting: {
						autoShow: false
					}
				});
			});

			/**
			 * 关闭侧滑菜单
			 */
			function close() {
				mui.fire(mui.currentWebview.opener(), "menu: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('dragleft', 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>