[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>