mui 頂部選項卡的兩種切換方式
第一種main頁面
<!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">
</head>
<body>
<div class="mui-content">
<div id="slider" class="mui-slider mui-fullscreen">
<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<div class="mui-scroll">
<a class="mui-control-item mui-active" href="direction.html" data-wid="tab-top-subpage-1.html">
推薦
</a>
<a class="mui-control-item" href="day_rank.html" data-wid="tab-top-subpage-2.html">
熱點
</a>
</div>
</div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script src="js/webviewGroup.js" type="text/javascript" charset="utf-8"></script>
<script>
mui.init();
mui.plusReady(function() {
var group = new webviewGroup("direction.html", {
items: [{
id: "direction.html", //這是子頁1的路徑
url: "direction.html",
extras: {}
}, {
id: "day_rank.html", //這是子頁2的路徑
url: "day_rank.html",
extras: {}
}],
onChange: function(obj) {
var c = document.querySelector(".mui-control-item.mui-active");
if(c) {
c.classList.remove("mui-active");
}
document.querySelector(".mui-scroll .mui-control-item:nth-child(" + (parseInt(obj.index) + 1) + ")").classList.add("mui-active");
}
});
mui(".mui-scroll").on("tap", ".mui-control-item", function(e) {
var wid = this.getAttribute("href");
group.switchTab(wid);
});
});
mui.back = function() {
var _self = plus.webview.currentWebview();
_self.close("auto");
}
</script>
</body>
</html>
index 頁面
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init({
subpages:[{ //下邊是初始化，然后這個頁面顯示我們將插入的頁面
url:"main.html",
id:"main.html",
styles:{
top:"50px",
bottom:"0px"
}
}]
});
</script>
下面是第二種方式 通過JS來實現頁面內嵌（ 缺陷， 每次點擊都會更行）
main頁面
<!doctype html>
<html lang="en" style='height:100%'>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/mui.css"/>
</head>
<body>
<div class="mui-content">
<div class="mui-segmented-control"style="width:90%;text-align: center;">
<a class="mui-control-item mui-btn-warning mui-active mui-btn-outlined" href="day_rank.html">選項卡1</a>
<a class="mui-control-item mui-btn-warning mui-btn-outlined" href="direction.html">選項卡2</a>
</div>
</div>
</div>
</body>
<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
mui.init();
//設置默認打開首頁顯示的子頁序號；
var Index=0;
//把子頁的路徑寫在數組里面
var subpages = ['day_rank.html','direction.html'];
//所有的plus-*方法寫在mui.plusReady中或者后面。
mui.plusReady(function() {
//獲取當前頁面所屬的Webview窗口對象
var self = plus.webview.currentWebview();
for (var i = 0; i < subpages.length; i++) {
//創建webview子頁
var sub = plus.webview.create(
subpages[i], //子頁url
subpages[i], //子頁id
{
top: '500px',//設置距離頂部的距離
bottom: '100px'//設置距離底部的距離
}
);
//如不是我們設置的默認的子頁則隱藏，否則添加到窗口中
if (i != Index) {
sub.hide();
}
//將webview對象填充到窗口
self.append(sub);
}
});
//當前激活選項
var activeTab = subpages[Index],title=document.querySelector(".mui-title");
//選項卡點擊事件
mui('.mui-segmented-control').on('tap', 'a', function(e) {
//獲取目標子頁的id
var targetTab = this.getAttribute('href');
if (targetTab == activeTab) {
return;
}
//更換標題
// title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
//顯示目標選項卡
//獲取當前窗口對象
var self=plus.webview.currentWebview();
//如果是第一個頁面那么選擇 第一個頁面的樣式 第一個頁面底部有選項卡
if(targetTab==subpages[0]){
//主頁面 index_style
var sub=plus.webview.create('day_rank.html','day_rank.html',{top:'500px',bottom:'0px'});
}else{
//主頁面 其余頁面的樣式 subpage_style
var sub=plus.webview.create('direction.html','direction.html',{top:'500px'});
}
//把子頁面添加到當前窗口對象里
self.append(sub);
//關閉當前窗口里面已經展示的頁面
plus.webview.hide(activeTab);
//要打開的頁面賦值給當前頁面留着下次使用
activeTab=targetTab;
});
document.getElementById('newslist').addEventListener("tap",function(){
mui.openWindow('direction.html','direction.html',{
styles:{
top:'0px',
bottom:"50px"
},
})
})
</script>
</html>