mui学习

侧滑菜单,菜单容器加上id对应mui-icon的href,菜单滑动,主界面不滑动

<div class="mui-off-canvas-wrap mui-draggable mui-slide-in">
    <!-- 菜单容器 -->
    <aside class="mui-off-canvas-left" id="offCanvasSide">
        <div class="mui-scroll-wrapper">
            <div class="mui-scroll">
                <!-- 菜单具体展示内容 -->
               ...
            </div>
        </div>
    </aside>
    <!-- 主页面容器 -->
    <div class="mui-inner-wrap">
        <!-- 主页面标题 -->
        <header class="mui-bar mui-bar-nav">
            <a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" href="#offCanvasSide"></a>
            <h1 class="mui-title">标题</h1>
        </header>
        <div class="mui-content mui-scroll-wrapper">
            <div class="mui-scroll">
                <!-- 主界面具体展示内容 -->
               ...
            </div>
        </div>
    </div>
</div>

监听点击事件

mui('body').on('tap', '[onclick]', function(){
    // 获取onclick
    let fuc = $(this).attr('onclick');
    // 执行
    eval(fuc);
});

关闭菜单

 mui('.mui-off-canvas-left').offCanvas().close();

禁止侧滑

//禁止滑动主界面的时候出现侧滑菜单
document.getElementsByClassName('mui-inner-wrap')[0].addEventListener('drag', function(event) {
    event.stopPropagation();
});

mui弹出菜单组件作为拟态框popover;拟态框只能放到侧滑菜单页面容器的外面,推荐放在body中,并设置居中样式

页面无法滚动

mui.init();
(function($){
    $(".mui-scroll-wrapper").scroll({
        bounce: false,//滚动条是否有弹力默认是true
        indicators: true, //是否显示滚动条,默认是true
    });
})(mui);

链接

mui('body').on('tap', 'a', function(){
    // 获取onclick
    let url = $(this).attr('href');
    // 执行
    location.href = url;
});