一、mask
在popover、侧滑菜单等界面，经常会用到蒙版遮罩；比如popover弹出后，除popover控件外的其它区域都会遮罩一层蒙版，用户点击蒙版不会触发蒙版下方的逻辑，而会关闭popover同时关闭蒙版；再比如侧滑菜单界面，菜单划出后，除侧滑菜单之外的其它区域都会遮罩一层蒙版，用户点击蒙版会关闭侧滑菜单同时关闭蒙版。
首先，在头部加入样式
<style type="text/css"> .mui-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 998; background-color: rgba(0, 0, 0, .3); } </style>
然后在主内容区写入：
<div class="mui-content mui-content-padded"> <button id="btn" type="button" class="mui-btn mui-btn-blue mui-btn-block">按钮</button> </div> <script src="js/mui.min.js"></script> <script type="text/javascript"> mui.init(); var btn = document.getElementById('btn'); btn.addEventListener('tap', function() { //1、创建遮罩 var mask = mui.createMask(callback); //callback为用户点击蒙版时自动执行的回调； //2、显示遮罩 mask.show(); //3、关闭遮罩 // mask.close(); }); // 回调函数 function callback() { alert('触发遮罩'); } </script>
注意：关闭遮罩仅会关闭，不会销毁；关闭之后可以再次调用mask.show();打开遮罩
二、number-box
mui提供了数字输入框控件，可直接输入数字，也可以点击“+”、“-”按钮变换当前数值；默认numbox控件dom结构比较简单，如下：
代码如下：
<div class="mui-numbox" data-numbox-step='1' data-numbox-min='0' data-numbox-max='100'> <button class="mui-btn mui-numbox-btn-minus" type="button">-</button> <input class="mui-numbox-input" type="number" /> <button class="mui-btn mui-numbox-btn-plus" type="button">+</button> </div> <hr /> <div class="mui-numbox" data-numbox-step='1' data-numbox-min='0' data-numbox-max='10'> <button class="mui-btn mui-btn-numbox-minus" type="button">-</button> <input class="mui-input-numbox" type="number" /> <button class="mui-btn mui-btn-numbox-plus" type="button">+</button> </div>
三、offcanvas
mui提供了两种侧滑导航实现：webview模式和div模式，两种模式各有优劣，适用于不同的场景。
webview模式
主页面和菜单内容在不同的webview中，两个页面根据内容需求分别组织DOM结构，mui对其DOM结构无特殊要求，故其有如下优点：
- 菜单内容是单独的webview，故可被多个页面复用；
- 菜单内容在单独的webview中，菜单区域的滚动不影响主界面，故可使用原生滚动，滚动更为流畅；
另一方面，webview模式也有其缺点：
- 不支持拖动手势（跟手拖动）；
- 主页面、菜单不同webview实现，因此若需交互（如：点击菜单触发主页面内容变化），需使用自定义事件实现跨webview通讯；
div模式
主页面和菜单内容在同一个webview下，嵌套在特定结构的div中，通过div的移动动画模拟菜单移动；故该模式有如下优点：
- 支持拖动手势（跟手拖动）；
- 主页面、菜单在一个页面中，可通过JS轻松实现两者交互（如：点击菜单触发主页面内容变化），没有跨webview通讯的烦恼；
另一方面，div模式也有其缺点：
- 不支持菜单内容在多页面的复用，需每个页面都生成对应的菜单节点；
- 主界面和菜单内容的滚动互不影响，因此会使用div区域滚动，在低端Android手机且滚动内容较多时，可能会稍显卡顿；
div模式支持不同的动画效果，每种动画效果需遵从不同的DOM构造；下面我们以右滑菜单为例（左滑菜单仅需将菜单父节点上的mui-off-canvas-left换成mui-off-canvas-right即可），说明每种动画对应的DOM结构。
示例代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <script src="js/mui.min.js"></script> <link href="css/mui.min.css" rel="stylesheet" /> <link rel="stylesheet" href="css/iconfont.css" /> <style type="text/css"> .mui-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 998; background-color: rgba(0, 0, 0, .3); } </style> <script type="text/javascript" charset="utf-8"> mui.init(); </script> </head> <body> <!-- 主界面菜单同时移动 --> <!-- 侧滑导航根容器 --> <div class="mui-off-canvas-wrap mui-draggable"> <!-- 主页面容器 --> <div class="mui-inner-wrap"> <!-- 菜单容器 --> <aside class="mui-off-canvas-left" id="offCanvasSide"> <div class="mui-scroll-wrapper"> <div class="mui-scroll"> <!-- 菜单具体展示内容 --> </div> </div> </aside> <!-- 主页面标题 --> <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> <nav class="mui-bar mui-bar-tab"> <a class="mui-tab-item mui-active"> <span class="mui-icon iconfont icon-home"></span> <span class="mui-tab-label">首页</span> </a> <a class="mui-tab-item"> <span class="mui-icon iconfont icon-faxian"></span> <span class="mui-tab-label">发现</span> </a> <a class="mui-tab-item"> <span class="mui-icon iconfont icon-jifenshangcheng"></span> <span class="mui-tab-label">积分商城</span> </a> <a class="mui-tab-item"> <span class="mui-icon iconfont icon-wode"></span> <span class="mui-tab-label">我的</span> </a> </nav> <!-- 主页面内容容器 --> <div class="mui-content mui-scroll-wrapper" id="dialogDemo"> </div> <div class="mui-off-canvas-backdrop"></div> </div> </div> </body> </html>
浙公网安备 33010602011771号