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");