两种模式的区别：
DIV模式是将所有子页面的内容，分别放置到主页不同的DIV中，当我们点击主页的不同选项卡时，切换不同DIV的显示。 这种方式显然要比加载子页的方式快很多，但是也显然不能承载很多布局的页面，毕竟要在一个主页中写入所有子页面的代码，显得不太现实。
而WebView模式则是将所有子页面都写入到不同的子页面中，再通过主页连接到一起，点击不同的选项卡 ，加载不同的子页面，显然这种方式更符合我们的预期和要求。
1.底部选项卡切换(DIV模式)：
-
<header class= "mui-bar mui-bar-nav">
-
<a class= "mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
-
<h1 class= "mui-title">底部选项卡切换(Div模式)</h1>
-
</header>
-
-
<nav class= "mui-bar mui-bar-tab">
-
<a class= "mui-tab-item mui-active" href= "#page1">
-
<span class= "mui-icon mui-icon-home"></span>
-
<span class= "mui-tab-label">首页</span>
-
</a>
-
<a class= "mui-tab-item" href= "#page2">
-
<span class= "mui-icon mui-icon-phone"></span>
-
<span class= "mui-tab-label">电话</span>
-
</a>
-
<a class= "mui-tab-item" href= "#page3">
-
<span class= "mui-icon mui-icon-email"></span>
-
<span class= "mui-tab-label">邮件</span>
-
</a>
-
<a class= "mui-tab-item" href= "#page4">
-
<span class= "mui-icon mui-icon-gear"></span>
-
<span class= "mui-tab-label">设置</span>
-
</a>
-
</nav>
-
-
-
<div class= "mui-content">
-
<div id= "page1" class= "mui-control-content mui-active">
-
这是第一个页面
-
</div>
-
<div id= "page2" class= "mui-control-content">
-
这是第二个页面
-
</div>
-
<div id= "page3" class= "mui-control-content">
-
这是第三个页面
-
</div>
-
<div id= "page4" class= "mui-control-content">
-
这是第四个页面
-
</div>
-
</div>
底部选项卡切换(WebView模式)：
-
<header class= "mui-bar mui-bar-nav">
-
<aclass="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
-
<h1 class= "mui-title" id= "title">首页< /h1>
-
</header>
-
-
<navclass="mui-bar mui-bar-tab">
-
<aid="defaultTab"class="mui-tab-item mui-active"href="a.html">
-
<spanclass="mui-icon mui-icon-home"></span>
-
<spanclass="mui-tab-label">首页 </span>
-
</a>
-
<aclass="mui-tab-item"href="b.html">
-
<spanclass="mui-icon mui-icon-email"></span>
-
<spanclass="mui-tab-label">消息 </span>
-
</a>
-
<aclass="mui-tab-item"href="c.html">
-
<spanclass="mui-icon mui-icon-contact"></span>
-
<spanclass="mui-tab-label">通讯录 </span>
-
</a>
-
<aclass="mui-tab-item"href="d.html">
-
<spanclass="mui-icon mui-icon-gear"></span>
-
<spanclass="mui-tab-label">设置 </span>
-
</a>
-
</nav>
-
-
-
//js部分
-
var subpages = [ 'a.html', 'b.html', 'c.html', 'd.html'];
-
var subpage_style = {
-
top: '45px',
-
bottom: '51px'
-
};
-
-
var aniShow = {};
-
-
//创建子页面，首个选项卡页面显示，其它均隐藏；
-
mui.plusReady( function() {
-
var self = plus.webview.currentWebview();
-
for ( var i = 0; i < 4; i++) {
-
var temp = {};
-
var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
-
if (i > 0) {
-
sub.hide();
-
}
-
/* 让新创建的webview，追加合并到当前的窗口上。合并成一个窗口。
-
* 目的：将父子窗口合并成一个页面，实现同开同关的效果。 避免点击返回安监室，子页面先关闭，而父页面的头部和尾部没有关闭的BUG。
-
*/
-
self.append(sub);
-
}
-
});
-
//当前激活选项
-
var activeTab = subpages[ 0];
-
var title = document.getElementById( "title");
-
//选项卡点击事件
-
mui( '.mui-bar-tab').on( 'tap', 'a', function(e) {
-
var targetTab = this.getAttribute( 'href');
-
-
if (targetTab == activeTab) {
-
return;
-
}
-
//更换标题
-
title.innerHTML = this.querySelector( '.mui-tab-label').innerHTML;
-
//显示目标选项卡
-
//若为iOS平台或非首次显示，则直接显示
-
if(mui.os.ios||aniShow[targetTab]){
-
plus.webview.show(targetTab);
-
} else{
-
//否则，使用fade-in动画，且保存变量
-
var temp = {};
-
temp[targetTab] = "true";
-
mui.extend(aniShow,temp);
-
plus.webview.show(targetTab, "fade-in", 300);
-
}
-
//隐藏当前;
-
plus.webview.hide(activeTab);
-
//更改当前活跃的选项卡
-
activeTab = targetTab;
-
});
