Hbuilder開發HTML5 APP之側滑菜單

1.思路：

         其時有2個WebView，一個main是用來裝主頁面，一個menu是用來裝菜單（爲提升性能，菜單項是採用了預加載方式的，預加載時爲了不和主頁面爭奪資源，採用延時加載，例如：       

//plusReady事件後，自動建立menu窗口；
mui.plusReady(function() {
main = plus.webview.currentWebview();
//setTimeout的目的是等待窗體動畫結束後，再執行create webview操做，避免資源競爭，致使窗口動畫不流暢；
setTimeout(function () {
//側滑菜單默認隱藏，這樣能夠節省內存；
menu = mui.preload({
id: 'offcanvas-drag-right-plus-menu',
url: 'offcanvas-drag-right-plus-menu.html',
styles: {
    left: 0,
    width: '70%'
}
});
},300);

});

2.    所謂側滑，就是控制菜單WebView的顯示，使用它的left來定位左邊位置；

3.    要打開新的webView，要注意webview的show方法使用：

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

       參數含義：（1）是webview對象   （2）動畫效果，從沒顯示過，通常用"none"，（3）動畫過渡時間 （4）當指定Webview窗口顯示動畫執行完畢時觸發回調函數，窗口無動畫效果（如"none"動畫效果）時也會觸發此回調。（5）傳遞的參數；

4.顯示的方法：

      （1）按鈕點擊後，讓menu直接show出來，並對main設置樣式，好比

menu.show("none",0,function(){

main.setStyle({

left:"70%",
transition:{
duration:150
}
});
});

（2）關閉側滑菜單，實際就是設置main的樣式了，好比：

            main.setStyle({

left: '0',
transition: {
duration: 150
}
});

另外注意窗體切換完成後要關掉menu

//等窗體動畫結束後，隱藏菜單webview，節省資源；
setTimeout(function() {
menu.hide();
}, 200);

5.被打開的WebView的界面如何控制關閉側滑菜單：

            （1）先要找到主頁面，main = plus.webview.currentWebview().opener();

            （2）激發主頁面的某個事件，例如：mui.fire(main,"menu:swipeleft");