mui底部选项卡

Webview模块管理应用窗口界面，实现多窗口的逻辑控制管理操作:
webview API文档

创建webview

plus.webview.create( url, id, styles, extras )

webview的显示

plus.webview.show( id_wvobj, aniShow, duration, showedCB, extras )

隐藏Webview

plus.webview.hide( id_wvobj, aniHide, duration, extras );

获取当前窗口的WebviewObject对象

plus.webview.currentWebview()

获取当前窗口的WebviewObject对象ID

plus.webview.currentWebview().id

查找指定标识的WebviewObject

plus.webview.currentWebview(id)  //指定页面ID

创建并打开Webview窗口

   plus.webview.open( url, id, styles, aniShow, duration, showedCB )

---

---

• 在编译器中创建main.html,news.html,set.html
• 输入快捷键mheader按回车，在输入mtab按回车，整理代码如下:

        

            
首页
        
 
        

            

                
                首页
            
        
            

                 
                消息
            
            

                
                设置
            
        

• 准备工作做好，开始写页面切换逻辑
  1.创建页面，首个选项卡页面显示，其他选项卡页面隐藏

 var views=['main.html','new.html','set.html']
    views_style=[{top:'0px',bottom: '51px'},{top:'45px',bottom: '51px'},{top:'45px',bottom: '51px'}]
     mui.plusReady(function(){
        var self = plus.webview.currentWebview(); //获取当前页面对象
        for(var i = 0 ; i0){
                    sub.hide()  //隐藏页面
                }                   
                self.append(sub) //显示页面apend()方法在html5plus文档中没有提到，这里的这个方法是将webview对象填充到窗口的方法。           
     }      
 })

执行之后main页面显示出来，但是点击选项卡按钮，页面无法切换，因为我们还没有给底部选项卡做点击监听事件，我们会发现头部导航栏的首页两个字没有显示出来，当我们把top:'0px'改成 top：45px之后又能显示，这设计到mui的一个潜规则，父子结构的页面子页面会比父页面层级高
2.选项卡添加点击事件

 var activeTab=views[0]; //激活选项卡 
var title= document.querySelector('.mui-title') 
 mui(".mui-bar-tab").on('tap','div',function(){
     var tab = this.getAttribute('hr'); //  获取点击页面ID
     if(activeTab==tab){  
           return;
     }                
     plus.webview.show(tab); //    显示点击webview   
     plus.webview.hide(activeTab);   //隐藏当前 webview  
     title.innerHTML=this.querySelector('.mui-tab-label').innerHTML
    activeTab=tab;
 })

this.getAttribute('hr')获取该按钮的hr属性的属性值