一、 使用该框架之前的准备工作
1. 新建含mui的HTML文件
在Hbuilder中，新建HTML文件，选择”含mui的HTML“模板，可以快速生成mui页面模板，该模板默认处理了mui的js、css资源引用。
2.输入mheader
顶部标题栏是每个页面都必需的内容，在Hbuilder中输入mheader，可以快速生成顶部导航栏。
3.输入mbody
除顶部导航、底部选项卡两个控件之外，其它控件都建议放在.mui-content控件内，在Hbuilder中输入mbody，可快速生成包含.mui-content的代码块。
二、UI组件
1.accordion(折叠面板)
折叠面板和二级列表类似，如下：
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">面板1</a>
<p class="mui-collapse-content">
<p>面板1子内容</p>
</p>
</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">面板2</a>
<p class="mui-collapse-content">
<p>面板2子内容</p>
</p>
</li>
</ul>2.buttons(按钮)
普通按钮
在button节点上增加.mui-btn类，就可以生成默认按钮；如果需要其他颜色的按钮，则继续增加对应class即可，比如.mui-btn-blue即可变成蓝色按钮
<button type="button" class="mui-btn">默认</button> <button type="button" class="mui-btn mui-btn-primary">蓝色</button> <button type="button" class="mui-btn mui-btn-success">绿色</button> <button type="button" class="mui-btn mui-btn-warning">黄色</button> <button type="button" class="mui-btn mui-btn-danger">红色</button> <button type="button" class="mui-btn mui-btn-royal">紫色</button>
运行之后的效果如下：
若希望无底色、有边框的按钮，仅需增加.mui-btn-outlined类即可，代码如下：
<button type="button" class="mui-btn mui-btn-outlined">默认</button> <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">蓝色</button> <button type="button" class="mui-btn mui-btn-success mui-btn-outlined">绿色</button> <button type="button" class="mui-btn mui-btn-warning mui-btn-outlined">黄色</button> <button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">红色</button> <button type="button" class="mui-btn mui-btn-royal mui-btn-outlined">紫色</button>
运行结果如下：
3.gallery(图片轮播)
图片轮播继承自slide插件，因此其DOM结构、事件均和slide插件相同；
默认不支持循环播放，DOM结构如下：
<p class="mui-slider">
<p class="mui-slider-group">
<p class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></p>
<p class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></p>
<p class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></p>
<p class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></p>
</p>
</p>假设当前图片轮播中有1、2、3、4四张图片，从第1张图片起，依次向左滑动切换图片，当切换到第4张图片时，继续向左滑动，接下来会有两种效果：
支持循环：左滑，直接切换到第1张图片；
不支持循环：左滑，无反应，继续显示第4张图片，用户若要显示第1张图片，必须连续向右滑动切换到第1张图片；
当显示第1张图片时，继续右滑是否显示第4张图片，是同样问题；这个问题的实现需要通过.mui-slider-loop类及DOM节点来控制；
若要支持循环，则需要在.mui-slider-group节点上增加.mui-slider-loop类，同时需要重复增加2张图片，图片顺序变为：4、1、2、3、4、1，代码示例如下：
<p class="mui-slider">
<p class="mui-slider-group mui-slider-loop">
<!--支持循环，需要重复图片节点-->
<p class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="4.jpg" /></a></p>
<p class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></p>
<p class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></p>
<p class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></p>
<p class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></p>
<!--支持循环，需要重复图片节点-->
<p class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="1.jpg" /></a></p>
</p>
</p>mui框架内置了图片轮播插件，通过该插件封装的JS API，用户可以设定是否自动轮播及轮播周期，如下为代码示例：
//获得slider插件对象
var gallery = mui('.mui-slider');
gallery.slider({
interval:3000//自动轮播周期，若为0则不自动播放，默认为0；
});因此若希望图片轮播不要自动播放，而是用户手动滑动才切换，只需要通过如上方法，将interval参数设为0即可。
若要跳转到第x张图片，则可以使用图片轮播插件的gotoItem方法，例如：
//mui自带的on事件绑定，只能用事件委派方式
mui(".mui-content").on("tap","#btn",function(){
gallery.slider().gotoItem(2);//调到第三张图片，index从0开始
});4.input(输入表单)
所有包裹在.mui-input-row类中的 input、textarea等元素都将被默认设置宽度属性为width: 100%;。 将 label 元素和上述控件控件包裹在.mui-input-group中可以获得最好的排列。
（密码输入框右侧还自带了一个眼睛图标呢，我觉得特别好用）
代码如下：
<form class="mui-input-group">
<p class="mui-input-row">
<label>用户名</label>
<input type="text" class="mui-input-clear" placeholder="请输入用户名">
</p>
<p class="mui-input-row">
<label>密码</label>
<input type="password" class="mui-input-password" placeholder="请输入密码">
</p>
</form>mui目前还提供了几个输入增强功能：快速删除、语音输入*5+ only和密码框显示隐藏密码。
1)快速删除：只需要在input控件上添加.mui-input