Movie/index.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
	</head>

	<body>

		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" id="hotMovies.html">
				<span class="mui-icon mui-icon-eye"></span>
				<span class="mui-tab-label">热映</span>
			</a>
			<a class="mui-tab-item" id="boxOffice.html">
				<span class="mui-icon mui-icon-compose"></span>
				<span class="mui-tab-label">北美票房榜</span>
			</a>
			<a class="mui-tab-item" id="comingSoon.html">
				<span class="mui-icon mui-icon-forward"></span>
				<span class="mui-tab-label">即将上映</span>
			</a>
			<a class="mui-tab-item" id="mouthList.html">
				<span class="mui-icon mui-icon-chat"></span>
				<span class="mui-tab-label">口碑榜</span>
			</a>
			<a class="mui-tab-item" id="mine.html">
				<span class="mui-icon mui-icon-person"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>

		<script type="text/javascript" charset="utf-8">
			mui.init();
			//要切换的子页面
			var subpages = ['hotMovies.html', 'boxOffice.html', 'comingSoon.html', 'mouthList.html', 'mine.html'];
			//子页面样式，这里只有主页的底部是公用的，所以距离底部51个px,距离顶部0个px
			var subpage_style = {
				top: "0px", //子页面顶部位置
				bottom: "50px", //子页面底部位置
				width: "100%" //, //子页面宽度，默认为100%
			};
			mui.plusReady(function() {
				//获取webview容器
				var self = plus.webview.currentWebview();
				//1. 首先将各个webview创建出来
				for(var i = 0; i < subpages.length; i++) {
					var temp = {};
					//utr:URIStirng,id:WebviewIdString,style:plus.webview.WebviewStyle,extras:JSON
					var sub = plus.webview.create(subpages[i], subpages[i], subpage_style, {});
					sub.hide();					
					self.append(sub);
				}
				//2. 显示第一个webview
				plus.webview.show(subpages[0]);
				//3.当前激活选项
				mui('.mui-bar-tab').on('tap','.mui-tab-item',function(){
				  	//获取点击的webview的id
				  	var page=this.getAttribute("id");
				  	plus.webview.show(page);
				}) 
			});
		</script>
	</body>

</html>