<!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 {
background-color: #efeff4;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 id="title" class="mui-title">首页</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a id="defaultTab" class="mui-tab-item mui-active" href="tab-webview-subpage-about.html">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item" href="tab-webview-subpage-chat.html">
<span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
<span class="mui-tab-label">消息</span>
</a>
<a class="mui-tab-item" href="tab-webview-subpage-setting.html">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</a>
</nav>
<script src="js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
mui.plusReady(function(){
var pages = ["pages/home/home.html","pages/study/study.html","pages/my/my.html"];
var arr = document.getElementsByClassName("mui-tab-item")
var styles = {
top:"45px",
bottom:"51px"
}
var pageArr = [];
var title=document.getElementById('title');
var slef = plus.webview.currentWebview();
for(var i=0; i<arr.length; i++){
// 有几个选项卡，须要建立几个子页面
var page = plus.webview.create(pages[i],pages[i],styles);
pageArr.push(page);
!function(i){
arr[i].addEventListener("tap",function(){
// 让当前页面(i)显示，不是当前页面隐藏
for(var j=0; j<pageArr.length; j++){
if(j!=i) pageArr[j].hide();
else pageArr[j].show();
}
// 设置标题
title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
/* 让新建立的webview，追加合并到当前的窗口上。合并成一个窗口。
* 目的：将父子窗口合并成一个页面，实现同开同关的效果。 避免点击返回安监室，子页面先关闭，而父页面的头部和尾部没有关闭的BUG。
*/
slef.append(pageArr[i]);
})
}(i);
}
// 默认触发第0个选项卡的tap事件。
mui.trigger(arr[0],"tap");
});
</script>
</body>
</html>