webview, that uses mui looks like this when the real machine is running
:
html is as follows:
<nav class="mui-bar mui-bar-tab">
<a href="index.html" class="mui-tab-item mui-active" id="defaultTab">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label"></span>
</a>
<a href="login.html" class="mui-tab-item">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label"></span>
</a>
<a href="main.html" class="mui-tab-item">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label"></span>
</a>
<!--<a href="reg.html" class="mui-tab-item">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label"></span>
</a>-->
</nav>
js is as follows:
var Index = 0;
var subpages = ["index.html","login.html","main.html","reg.html"];
mui.plusReady(function() {
var self = plus.webview.currentWebview();
for(var i=0;i<subpages.length;iPP){
var sub = plus.webview.create(subpages[i],subpages[i],{top:"45px",bottom:"50px"});
if(i != Index){
sub.hide();
}
self.append(sub);
}
//
var activeTab = subpages[Index],title=document.querySelector(".mui-title");
//
mui(".mui-bar-tab").on("tap", "a", function(e) {
//id
var targetTab = this.getAttribute("href");
if (targetTab == activeTab) {
return;
}
//
title.innerHTML = this.querySelector(".mui-tab-label").innerHTML;
//
plus.webview.show(targetTab);
//
plus.webview.hide(activeTab);
//
activeTab = targetTab;
})
});
there are still many problems when using mui for the first time! Thank you!