对于 MUI 的实现原理以及遮罩蒙版和 numbox 以及侧滑导航的事件监听的运用和实战

MUI 的实现原理

HTML5+也可以称为 HTML5PlusHTML5+文件补充 H5 开发 APP 的痛点：无法调用手机硬件上的功能，如拍照、通讯录等为了弥补 H5 能力的不足，中国成立了 HTML5 中国产业联盟 www.html5plus。org 发布 HTML5+规范。

什么是 HTML5+？

HTML5+规范是一个开放规范 HTML5+添加了一个 JavaScript 对象加号，使 js 能够调用无法或无法由各种浏览器实现的设备简单地说，HTML5+可以在一些设备硬件上调用 API，例如相机、陀螺仪、文件系统、地址簿等 HTML5 提供的加号对象+mui 中有一个加号对象。它没有简单地使用 html5 的函数，而是提供了一个名为 html5+的 API 集，并将它们封装在这个 plus 对象中。有陀螺仪、地图、定位、相机、文件流等的本地函数调用接口！加号对象必须位于***mui-PlusReady（）***中。如果不需要使用 HTML5+提供的 API，则不需要使用 plusReady 方法。你只需要 mui。init（），然后使用 mui。这也是梅之间的区别。init（）和 plusReady（）梅。为“html5+”生成 PlusReady（）。它只能在打包到应用程序级别后使用，因为 plus 对象中的内容最终将映射到 java，objective-c 代码很难理解得太多。这些底层实现由 dcloud 团队领导的“中国 HTML5+行业联盟”（社区）实施。只要我们知道我们编写的 plus 对象的 js 代码将转换为本机代码，应用程序就可以调用许多本机函数。Plus 在浏览器级别不受支持，因此您无法调用 plusReady 和 Plus.xxx。浏览器中的 xxx 方法要使用 html5+，我们需要将其打包到一个具有 5+Runtime 运行环境的应用程序中，以便我们可以在 plus 对象下运行对象和方法。这个打包可以由 hbuilder 实现。

遮罩蒙版

在弹出窗口、幻灯片菜单和其他界面中经常使用掩码；例如，弹出弹出窗口后，除弹出窗口控件外的所有区域都将屏蔽一个掩码。点击掩码不会触发掩码下面的逻辑，但会同时关闭弹出窗口和掩码；另一个例子是幻灯片菜单界面。绘制菜单后，除幻灯片菜单外的所有区域都将遮罩一个遮罩。当用户单击掩码时，幻灯片菜单将关闭，掩码也将关闭。常见的掩码操作包括：创建、显示和关闭，如下代码所示：

var mask = mui.createMask(callback);//callback为用户点击蒙版时自动执行的回调；mask.show();//显示遮罩mask.close();//关闭遮罩

注意：关闭遮罩只会关闭，不会破坏它；关闭后，您可以调用掩码。再次显示（）；打开面罩；mui 默认掩码使用。mui-background 类定义（如以下代码所示）。要自定义遮罩效果，只需覆盖。mui 背景定义；

.mui-backdrop {    position: fixed;    top: 0;    right: 0;    bottom: 0;    left: 0;    z-index: 998;    background-color: rgba(0,0,0,.3);}

numbox

mui 提供数字输入框控件，允许您直接输入数字，或单击“+”和“-”按钮更改当前值；默认 numbox 控件的 dom 结构很简单，如下所示：

<div class="mui-numbox">  <!-- "-"按钮，点击可减小当前数值 -->  <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>

侧滑导航

mui 提供了两种侧滑导航实现：webview 模式和 div 模式。这两种模式各有优缺点，适用于不同的场景。Webview 模式主页和菜单内容位于不同的 Web 视图中。这两个页面根据内容要求组织 DOM 结构。mui 对其 DOM 结构没有特殊要求，因此具有以下优点：菜单内容是一个单独的 Web 视图，因此可以被多个页面重用；菜单内容位于单独的 Web 视图中，菜单区域的滚动不会影响主界面，因此您可以使用本地滚动，这更平滑；另一方面，webview 模式也有其缺点：不支持拖动手势（用手拖动）；主页和菜单在不同的 Web 视图中实现，因此如果需要交互（例如，单击菜单触发主页内容的更改），您需要使用自定义事件来实现跨 Web 视图的通信；Div 模式主页和菜单内容嵌套在同一 webview 下具有特定结构的 div 中，通过 div 的移动动画模拟菜单的移动；因此，该模式具有以下优点：支持拖动手势（用手拖动）；主页和菜单在一个页面中，它们之间的交互可以通过 JS 轻松实现（例如，点击菜单触发主页的内容更改），而无需跨 Web 视图通信的麻烦；另一方面，div 模式也有其缺点：不支持在多个页面中重复使用菜单内容，需要为每个页面生成相应的菜单节点；主界面和菜单内容的滚动不会相互影响，因此将使用 div 区域进行滚动。在具有更多滚动内容的低端 Android 手机中，它可能会稍微卡住；div 模式支持不同的动画效果，每个动画效果需要遵循不同的 DOM 结构；让我们以右侧滑动菜单为例（左侧滑动菜单只需要将菜单父节点上左侧的多个关闭的画布替换为右侧的多个打开的画布）来解释每个动画对应的 DOM 结构。

<!-- 侧滑导航根容器 --><div class="mui-off-canvas-wrap mui-draggable">  <!-- 菜单容器 -->  <aside class="mui-off-canvas-left">    <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"></a>      <h1 class="mui-title">标题</h1>    </header>    <div class="mui-content mui-scroll-wrapper">      <div class="mui-scroll">        <!-- 主界面具体展示内容 -->        ...      </div>    </div>    </div></div>

事件监听

你可以通过一下方式监听侧滑菜单显示隐藏

document.querySelector('.mui-off-canvas-wrap').addEventListener('shown',function (event) {    //...})