<nav class="mui-bar mui-bar-tab">
<a id="defaultTab" class="mui-tab-item mui-active" href="suoYouWenTi.html">
<span class="mui-icon mui-icon-help"><span class="mui-badge">9</span></span>
<span class="mui-tab-label">所有提問</span>
</a>
<a class="mui-tab-item " href="woDeWenTi.html">
<span class="mui-icon mui-icon-contact"></span>
<span class="mui-tab-label">我的提問</span>
</a>
<a class="mui-tab-item" href="tiWen.html">
<span class="mui-icon mui-icon-compose"></span>
<span class="mui-tab-label">提問</span>
</a>
</nav>
js代碼如下：
<script type="text/javascript" charset="utf-8">
//mui初始化
mui.init();
var subpages = ['suoYouWenTi.html', 'woDeWenTi.html', 'tiWen.html'];
var subpage_style = {
top: '0',
bottom: '50px'
};
var aniShow = {};
//創(chuàng)建子頁面，首個選項卡頁面顯示，其它均隱藏；
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();
} else {
temp[subpages[i]] = "true";
mui.extend(aniShow, temp);
}
self.append(sub);
}
});
//當(dāng)前激活選項
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;
}
//顯示目標選項卡
if (mui.os.ios || aniShow[targetTab]) {
plus.webview.show(targetTab);
} else {
var temp = {};
temp[targetTab] = "true";
mui.extend(aniShow, temp);
plus.webview.show(targetTab, "fade-in", 300);
}
//隱藏當(dāng)前;
plus.webview.hide(activeTab);
//更改當(dāng)前活躍的選項卡
activeTab = targetTab;
});
</script>
注釋：底部添加紅色角標：<span class="mui-badge">9</span>，若不想要圖片只需要將圖片刪除即可2.圖標為圖片格式
<nav class="mui-bar mui-bar-tab">
<a id="axx" class="mui-tab-item mui-show mui-active" href="html/yunYingGuanLi/yunYingGuanLi.html">
<div class="box">
<img id="img_axx" src="img/icon/index1.png"><br />
<span class="mui-tab-label">運營狀況</span>
</div>
</a>
<a id="defaultTab" class="mui-tab-item mui-show" href="html/caiWuGuanLi/caiWuGuanLi.html">
<div class="box">
<img id="img_defaultTab" src="img/icon/cw_guanli.png">
<br />
<span class="mui-tab-label">經(jīng)營狀況</span>
</div>
</a>
<a id="abm" class="mui-tab-item" href="html/tongXunLu/tongXunLu.html">
<div class="box">
<img id="img_abm" src="img/icon/tongXunLu.png">
<br />
<span class="mui-tab-label txl">通訊錄</span>
</div>
</a>
<a id="atxl" class="mui-tab-item mui-show" href="html/woDe/woDe.html">
<div class="box">
<img id="img_atxl" src="img/icon/woDe.png">
<br />
<span class="mui-tab-label">我的</span>
</div>
</a>
</nav>
CSS代碼：
.mui-tab-item img{
width: 22px;
height: 22px;
margin-top: 3px;
}
#img_abm{
width: 23px;
height: 20px;
margin-top: 5px;
}
.mui-bar .box{
height: 50px;
background: #fff;
border-top: 1px solid #eee;
font-size: 12px;
}
.mui-tab-label{
display: block;
height: 20px;
line-height: 1;
}
.mui-bar-tab .mui-tab-item.mui-active {
color: #64a6fb;
}
JS代碼：
//mui初始化
mui.init();
var showPage = 0; //底部頁面切換
var subpages = ['html/yunYingGuanLi/yunYingGuanLi.html', 'html/tongXunLu/tongXunLu.html', 'html/woDe/woDe.html'];
if (localStorage["isRight"] == 'true') {
showPage = 4;
subpages = ['html/yunYingGuanLi/yunYingGuanLi.html', 'html/caiWuGuanLi/caiWuGuanLi.html',
'html/tongXunLu/tongXunLu.html', 'html/woDe/woDe.html'
];
Zepto("#defaultTab").show();
}
var subpage_style = {
top: '0',
bottom: '50px'
};
var aniShow = {};
//創(chuàng)建子頁面，首個選項卡頁面顯示，其它均隱藏；
mui.plusReady(function() {
getProInfo();
document.addEventListener("resume", function() {
if (mui.os.android) {
getProInfo();
}
}, false);
var self = plus.webview.currentWebview();
showPage = 3;
for (var i = 0; i < showPage; i++) {
var temp = {};
var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
if (i > 0) {
sub.hide();
} else {
temp[subpages[i]] = "true";
mui.extend(aniShow, temp);
}
self.append(sub);
}
//當(dāng)前激活選項
var activeTab = subpages[0];
//選項卡點擊事件
var enable = true;
mui('.mui-bar-tab').on('tap', 'a', function(e) {
var targetTab = this.getAttribute('href'); //返回指定屬性名的屬性值
var id = this.getAttribute('id');
if (targetTab == activeTab) {
return;
}
changeImg(id);
//如果不存在則創(chuàng)建，否則直接顯示
if (!plus.webview.getWebviewById(targetTab)) {
plus.webview.create(targetTab, targetTab, subpage_style);
}
//若為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);
}
//隱藏當(dāng)前;
plus.webview.hide(activeTab);
//更改當(dāng)前活躍的選項卡
activeTab = targetTab;
});
//點擊圖片高亮
function changeImg(id) {
var idList = [
'img_axx',
'img_defaultTab',
'img_abm',
'img_atxl'
];
var imgList = [
'index',
'cw_guanli',
'tongXunLu',
'woDe'
];
var imgID = 'img_' + id;
for (var i = 0; i < idList.length; i++) {
if (idList[i] == imgID)
document.getElementById(idList[i]).src = 'img/icon/' + imgList[i] + '1.png';
else
document.getElementById(idList[i]).src = 'img/icon/' + imgList[i] + '.png';
}
}
});
function getProInfo() {
}
【網(wǎng)站聲明】本站部分內(nèi)容來源于互聯(lián)網(wǎng),旨在幫助大家更快的解決問題，如果有圖片或者內(nèi)容侵犯了您的權(quán)益，請聯(lián)系我們刪除處理，感謝您的支持！