Webview模塊管理應(yīng)用窗口界面合砂，實(shí)現(xiàn)多窗口的邏輯控制管理操作:
webview API文檔
創(chuàng)建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 );
獲取當(dāng)前窗口的WebviewObject對(duì)象
plus.webview.currentWebview()
獲取當(dāng)前窗口的WebviewObject對(duì)象ID
plus.webview.currentWebview().id
查找指定標(biāo)識(shí)的WebviewObject
plus.webview.currentWebview(id) //指定頁(yè)面ID
創(chuàng)建并打開(kāi)Webview窗口
plus.webview.open( url, id, styles, aniShow, duration, showedCB )
- 在編譯器中創(chuàng)建main.html,news.html,set.html
- 輸入快捷鍵
mheader按回車(chē)徽诲，在輸入mtab按回車(chē)饵婆，整理代碼如下:
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title" >首頁(yè)</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<div class="mui-tab-item mui-active" hr='main.html'>
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首頁(yè)</span>
</div>
<div class="mui-tab-item" hr='new.html'>
<span class="mui-icon mui-icon-chatboxes"></span>
<span class="mui-tab-label">消息</span>
</div>
<div class="mui-tab-item" hr='set.html'>
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">設(shè)置</span>
</div>
</nav>
- 準(zhǔn)備工作做好，開(kāi)始寫(xiě)頁(yè)面切換邏輯
1.創(chuàng)建頁(yè)面，首個(gè)選項(xiàng)卡頁(yè)面顯示疫萤，其他選項(xiàng)卡頁(yè)面隱藏
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(); //獲取當(dāng)前頁(yè)面對(duì)象
for(var i = 0 ; i<views.length ; i++){
var sub = plus.webview.create(views[i],views[i],views_style[i]); //創(chuàng)建頁(yè)面
if(i>0){
sub.hide() //隱藏頁(yè)面
}
self.append(sub) //顯示頁(yè)面apend()方法在html5plus文檔中沒(méi)有提到，這里的這個(gè)方法是將webview對(duì)象填充到窗口的方法敢伸。
}
})
執(zhí)行之后main頁(yè)面顯示出來(lái)扯饶，但是點(diǎn)擊選項(xiàng)卡按鈕，頁(yè)面無(wú)法切換，因?yàn)槲覀冞€沒(méi)有給底部選項(xiàng)卡做點(diǎn)擊監(jiān)聽(tīng)事件帝际，我們會(huì)發(fā)現(xiàn)頭部導(dǎo)航欄的首頁(yè)兩個(gè)字沒(méi)有顯示出來(lái)蔓同，當(dāng)我們把top:'0px'改成 top：45px之后又能顯示，這設(shè)計(jì)到mui的一個(gè)潛規(guī)則蹲诀，父子結(jié)構(gòu)的頁(yè)面子頁(yè)面會(huì)比父頁(yè)面層級(jí)高
2.選項(xiàng)卡添加點(diǎn)擊事件
var activeTab=views[0]; //激活選項(xiàng)卡
var title= document.querySelector('.mui-title')
mui(".mui-bar-tab").on('tap','div',function(){
var tab = this.getAttribute('hr'); // 獲取點(diǎn)擊頁(yè)面ID
if(activeTab==tab){
return;
}
plus.webview.show(tab); // 顯示點(diǎn)擊webview
plus.webview.hide(activeTab); //隱藏當(dāng)前 webview
title.innerHTML=this.querySelector('.mui-tab-label').innerHTML
activeTab=tab;
})
this.getAttribute('hr')獲取該按鈕的hr屬性的屬性值
