[MUI框架]-滑动侧边栏-webview模式

MUI 官网：http://dev.dcloud.net.cn/mui/
使用前准备，先下载HBuilder：http://www.dcloud.io/，然后新建移动APP里面的mui项目，则会自动生成所需的css文件和js文件。

第一步：引入必要的文件

引入css以及js：

<link href="css/mui.min.css" rel="stylesheet"/><script src="js/mui.min.js"></script>

---

第二步：写出必要的结构

    <header class="mui-bar mui-bar-nav">        <a class="mui-action-menu mui-icon mui-icon-bars mui-pull-right"></a>        <h1 class="mui-title">off canvas（侧滑导航）</h1>    </header>    <div class="mui-content">        <div class="mui-content-padded">            <p>这是webview模式右滑导航示例，主页面和菜单在不同的webview中，                优点是支持菜单内容在多页面的复用，缺点是不支持拖动手势（跟手）；                当前页面为主界面，你可以在主界面放置任何内容；            </p>            <p style="padding: 5px 20px;margin-bottom: 5px;">                <button id="show-btn" type="button" class="mui-btn mui-btn-primary mui-btn-block" style="padding: 10px;">显示侧滑菜单</button>            </p>        </div>    </div>

---

第三步：写上必要的启动js

    <script>        //生成2个对象分别控制主窗口和菜单窗口；        var menu = null,main = null;        var showMenu = false;        var isInTransition = false;        //开始预加载菜单页；        mui.plusReady(function() {            main = plus.webview.currentWebview();            main.addEventListener('maskClick', closeMenu);            //处理侧滑导航，为了避免和子页面初始化等竞争资源，延迟加载侧滑页面；            setTimeout(function() {                menu = mui.preload({                    id: 'sidemenu',                    url: 'sidemenu.html',                    styles: {                        left: 0,                        width: '70%',                        zindex: -1                    }                });            }, 200);        });        //打开侧滑窗口；        function openMenu() {            if (isInTransition) {                return;            }            if (!showMenu) {                //侧滑菜单处于隐藏状态，则立即显示出来；                isInTransition = true;                menu.setStyle({                    mask: 'rgba(0,0,0,0)'                }); //menu设置透明遮罩防止点击                menu.show('none', 0, function() {                    //主窗体开始侧滑并显示遮罩                    main.setStyle({                        mask: 'rgba(0,0,0,0.4)',                        left: '70%',                        transition: {                            duration: 200                        }                    });                    mui.later(function() {                        isInTransition = false;                        menu.setStyle({                            mask: "none"                        }); //移除menu的mask                    }, 200);                    showMenu = true;                });            }        };        //关闭侧滑窗口；        function closeMenu() {            if (isInTransition) {                return;            }            if (showMenu) {                //关闭遮罩；                //主窗体开始侧滑；                isInTransition = true;                main.setStyle({                    mask: 'none',                    left: '0',                    transition: {                        duration: 200                    }                });                showMenu = false;                //等动画结束后，隐藏菜单webview，节省资源；                mui.later(function() {                    isInTransition = false;                    menu.hide();                }, 200);            }        };        //点击头部菜单小图标，打开侧滑菜单；        document.querySelector('.mui-icon-bars').addEventListener('tap', openMenu);        //点击自定义按钮，打开侧滑菜单；        document.querySelector('#show-btn').addEventListener('tap', openMenu);        //menu页面点击后关闭菜单；        window.addEventListener("menu:tap", closeMenu);    </script>