MUI - 侧滑菜单

<script>
    mui.init
    ({
            swipeBack: false,
    });    
    
    var Main = mui(‘#Main‘);//侧滑容器父节点
    Main[0].classList.add(‘mui-scalable‘);//动画效果的类
    Main.offCanvas().refresh();//绑定动画效果     
    
    document.getElementById(‘offCanvasShow‘).addEventListener(‘tap‘,function() 
    {
        Main.offCanvas(‘show‘);
    });
    
    document.getElementById(‘offCanvasHide‘).addEventListener(‘tap‘,function()
    {
        Main.offCanvas(‘close‘);
    });
    
    
    //支持区域滚动，需要添加.mui-scroll-wrapper
    mui(‘#offCanvasSideScroll‘).scroll();    
    mui(‘#offCanvasContentScroll‘).scroll();
    
    
    //实现ios平台的侧滑关闭页面；
    if (mui.os.plus && mui.os.ios) 
    {
        Main[0].addEventListener(‘shown‘,
        function(e) { //菜单显示完成事件
            plus.webview.currentWebview().setStyle
            ({
                ‘popGesture‘: ‘none‘
            });
        });
        Main[0].addEventListener(‘hidden‘,
        function(e) 
        {     //菜单关闭完成事件
            plus.webview.currentWebview().setStyle
            ({
                ‘popGesture‘: ‘close‘
            });
        });
    }
</script>        

<style>
    html,body 
    {
        background-color: #efeff4;
    }
    p {
        text-indent: 22px;
    }
    span.mui-icon {
        font-size: 14px;
        color: #007aff;
        margin-left: -15px;
        padding-right: 10px;
    }
    .mui-off-canvas-left {
        color: #fff;
    }
    .title {
        margin: 35px 15px 10px;
    }
    .title+.content {
        margin: 10px 15px 35px;
        color: #bbb;
        text-indent: 1em;
        font-size: 14px;
        line-height: 24px;
    }
    input {
        color: #000;
    }
</style>
<aside id="offCanvasSide" class="mui-off-canvas-left">
    <div id="offCanvasSideScroll" class="mui-scroll-wrapper">
        <div class="mui-scroll">
            <div class="title">侧滑导航</div>
            <div class="content">
                这是可拖动式侧滑菜单示例，你可以在这里放置任何内容；关闭侧滑菜单有多种方式： 1.在手机屏幕任意位置向左拖动(drag)；2.点击本侧滑菜单页之外的任意位置; 3.点击如下红色按钮
                <span class="android-only">；4.Android手机按back键；5.Android手机按menu键
                </span>。
                <p style="margin: 10px 15px;">
                    <button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">关闭侧滑菜单</button>
                </p>

            </div>
            <div class="title" style="margin-bottom: 25px;">侧滑列表示例</div>
            <ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
                <li class="mui-table-view-cell">
                    <a class="mui-navigate-right">
                        Item 1
                    </a>
                </li>
                <li class="mui-table-view-cell">
                    <a class="mui-navigate-right">
                        Item 2
                    </a>
                </li>
                <li class="mui-table-view-cell">
                    <a class="mui-navigate-right">
                        Item 3
                    </a>
                </li>
                <li class="mui-table-view-cell">
                    <a class="mui-navigate-right">
                        Item 4
                    </a>
                </li>
                <li class="mui-table-view-cell">
                    <a class="mui-navigate-right">
                        Item 5
                    </a>
                </li>
                <li class="mui-table-view-cell">
                    <a class="mui-navigate-right">
                        Item 6
                    </a>
                </li>
            </ul>
        </div>
    </div>
</aside>