<!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>
