要使用MUI框架，在Hbuilder中必须新建HTML5+ APP，并且创建MUI项目，Hbuilder会自动生成代码
MUI页面的使用：
<!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"/
</head>
<body><header class="mui-bar mui-bar-nav"><h1 class="mui-title">标题</h1></header><footer class="mui-bar mui-bar-footer">底部</footer><div class="mui-content">主体</div><script type="text/javascript" charset="utf-8">mui.init();</script>
</body>
</html>
效果如下：
当底部内容为选项卡的时候，会将.mui-bar-footer替换为.mui-bar-tab,代码如下：
<!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"/
</head>
<body><header class="mui-bar mui-bar-nav"><h1 class="mui-title">标题</h1></header><nav class="mui-bar mui-bar-tab"><a class="mui-tab-item mui-active"><span class="mui-icon mui-icon-home"></span><span class="mui-tab-label">首页</span></a><a class="mui-tab-item mui-active"><span class="mui-icon mui-icon-phone"></span><span class="mui-tab-label">电话</span></a><a class="mui-tab-item mui-active"><span class="mui-icon mui-icon-email"></span><span class="mui-tab-label">邮件</span></a><a class="mui-tab-item mui-active"><span class="mui-icon mui-icon-gear"></span><span class="mui-tab-label">设置</span></a></nav><div class="mui-content">主体</div><script type="text/javascript" charset="utf-8">mui.init();</script>
</body>
</html>
效果如下：
在子页面时，想要出现一个返回按钮，代码如下：
<header class="mui-bar mui-bar-nav"><a class="mui-icon mui-icon-left-nav mui-pull-left"></a><h1 class="mui-title">标题</h1></header><footer class="mui-bar mui-bar-footer">底部</footer><div class="mui-content">主体</div><script type="text/javascript" charset="utf-8">mui.init();</script>
效果如下：
在使用时要注意这两个小细节：
1.固定栏靠前，所谓MUI的固定栏，也就是class属性带有 mui-bar 属性的HTML元素节点，它们都是基于fixed固定定位的元素，常见组件包括：顶部导航栏（HTML元素的class属性包含了 mui-bar-nav），底部工具条（class属性中包含了 mui-bar-footer），底部选项卡（class属性中包含了mui-bar-tab）。它们一定要放在class属性包含mui-content的属性之前，即使是底部工具和底部选项卡，也要放在前面，否则固定栏会遮住分主部分，因为固定栏是基于fixed定位，不受流式布局限制，普通内容依然会从top:0的位置开始布局，这样就会被固定栏遮挡
2.为了使用简便，建议将除固定栏之外的所有内容，全部放在class属性为mui-content的容器中
折叠面板：
<ul class="mui-table-view"><li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">面板1</a><div class="mui-collapse-content"><p>子面板1内容</p></div></li><li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">面板2</a><div class="mui-collapse-content"><p>子面板2内容</p></div></li></ul>
效果如下：
数字角标：
<span class="mui-badge">1</span><span class="mui-badge mui-badge-primary">12</span><span class="mui-badge mui-badge-success">123</span><span class="mui-badge mui-badge-warning">3</span><span class="mui-badge mui-badge-danger">45</span><span class="mui-badge mui-badge-purple">456</span>
效果如下：
按钮：
<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>
actionsheet（操作表）
actionsheet一般从底部弹出，显示一系列可供用户选择的操作按钮； actionsheet是从popover控件基础上演变而来，实际上就是一个固定从底部弹出的popover，故DOM结构和popove类似，只是需要在含.mui-popover类的节点上增加.mui-popover-bottom、.mui-popover-action类；
<button type="button" class="mui-btn-blue" οnclick="showMenu();">点击</button><div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action "><!-- 可选择菜单 --><ul class="mui-table-view"><li class="mui-table-view-cell"><a href="#">菜单1</a></li><li class="mui-table-view-cell"><a href="#">菜单2</a></li></ul><!-- 取消菜单 --><ul class="mui-table-view"><li class="mui-table-view-cell"><a href="#sheet1"><b>取消</b></a></li></ul></div><script type="text/javascript">function showMenu(){mui('#sheet1').popover('toggle');}</script>
badge（数字角标）
数字角标一般和其它控件（列表、9宫格、选项卡等）配合使用，用于进行数量提示。 角标的核心类是.mui-badge，默认为实心灰色背景；同时，mui还内置了蓝色（blue）、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系的数字角标，如下：
<span class="mui-badge">1</span>
<span class="mui-badge mui-badge-primary">12</span>
<span class="mui-badge mui-badge-success">123</span>
<span class="mui-badge mui-badge-warning">3</span>
<span class="mui-badge mui-badge-danger">45</span>
<span class="mui-badge mui-badge-purple">456</span>
若无需底色，则增加.mui-badge-inverted类即可
button（按钮）
mui默认按钮为灰色，另外还提供了蓝色（blue）、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系的按钮，五种色系对应五种场景，分别为primary、success、warning、danger、royal；使用.mui-btn类即可生成一个默认按钮，继续添加.mui-btn-颜色值或.mui-btn-场景可生成对应色系的按钮，例如：通过.mui-btn-blue或.mui-btn-primary均可生成蓝色按钮；若希望无底色、有边框的按钮，仅需增加.mui-btn-outlined类即可
<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>
加载中按钮：
//data-loading-text可以自定义文字
<button type="button" data-loading-text="登录中" class="mui-btn mui-btn-blue">确认</button><script type="text/javascript">mui(document.body).on('tap', '.mui-btn', function(e) {mui(this).button('loading');setTimeout(function() {mui(this).button('reset');}.bind(this), 2000);});</script>
复选框：
默认checkbox在右侧显示，若希望在左侧显示，只需增加.mui-left类即可
<div class="mui-input-row mui-checkbox"><label>checkbox示例</label><input name="checkbox1" value="Item 1" type="checkbox" checked>
</div>
单选框：
<div class="mui-input-row mui-radio mui-left"><label>checkbox示例</label><input name="checkbox1" value="Item 1" type="radio" checked></div><div class="mui-input-row mui-radio mui-left"><label>checkbox示例</label><input name="checkbox1" value="Item 1" type="radio" checked></div>
MUI对话框：
1.mui.alert( message, title, btnValue, callback [, type] )
message
Type: String
提示对话框上显示的内容
title
Type: String
提示对话框上显示的标题
btnValue
Type: String
提示对话框上按钮显示的内容
callback
Type: Function
提示对话框上关闭后的回调函数
type
Value: ‘div’
是否使用h5绘制的对话框
2.mui.confirm( message, title, btnValue, callback [, type] )
message
Type: String
提示对话框上显示的内容
title
Type: String
提示对话框上显示的标题
btnValue
Type: Array
提示对话框上按钮显示的内容
callback
Type: Function
提示对话框上关闭后的回调函数
type
Value: ‘div’
是否使用h5绘制的对话框
实例代码：mui.confirm(‘MUI是个好框架’,‘Hello MUI’,new Array('是,‘否’),function(e){
if(e.index==1){
mui.toast(666);
}
});
如果想要判断用户的选择是哪一个，可以在后面加一个回调函数，形式参数为e，e.index为0代表用户选择是，为1代表用户选择否
3.mui.prompt( message, placeholder, title, btnValue, callback[, type] )
message
Type: String
提示对话框上显示的内容
placeholder
Type: String
编辑框显示的提示文字
title
Type: String
提示对话框上显示的标题
btnValue
Type: Array
提示对话框上按钮显示的内容
callback
Type: Function
提示对话框上关闭后的回调函数
type
Value: ‘div’
是否使用h5绘制的对话框
实例代码：
mui.prompt(‘请输入您对MUI的评语’,‘性能好’,‘Hello MUI’,new Array(‘取消’,‘确认’),function(e){
if(e.index==1){
mui.toast(e.value);
}else{
mui.toast(‘您取消了评语’);
}
})
mui表单的基本使用：
<form class="mui-input-group"><div class="mui-input-row"><label>用户名</label><input type="text" class="mui-input-clear" placeholder="请输入用户名" /></div><div class="mui-input-row"><label>密码</label><input type="password" class="mui-input-password" placeholder="请输入密码"></div><div class="mui-button-row"><button type="button" class="mui-btn mui-btn-primary">确认</button><button type="button" class="mui-btn mui-btn-danger">取消</button></div></form>
mui-input-clear可以实现快速清空表单中内容的功能，mui-input-password可以实现显示密码的功能
列表:
<ul class="mui-table-view"><li class="mui-table-view-cell">Item 1</li><li class="mui-table-view-cell">Item 2</li><li class="mui-table-view-cell">Item 3</li>
</ul>
列表添加导航栏箭头：
<ul class="mui-table-view"><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>
</ul>
图文列表：
<ul class="mui-table-view"><li class="mui-table-view-cell mui-media"><a href="javascript:;"><img class="mui-media-object mui-pull-left" src="../images/shuijiao.jpg"><div class="mui-media-body">幸福<p class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p></div></a></li><li class="mui-table-view-cell mui-media"><a href="javascript:;"><img class="mui-media-object mui-pull-left" src="../images/muwu.jpg"><div class="mui-media-body">木屋<p class='mui-ellipsis'>想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p></div></a></li><li class="mui-table-view-cell mui-media"><a href="javascript:;"><img class="mui-media-object mui-pull-left" src="../images/cbd.jpg"><div class="mui-media-body">CBD<p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p></div></a></li>
</ul>
进度条：
<div id="demo1" class="mui-progressbar"><span></span></div><script type="text/javascript">mui('#demo1').progressbar({progress:20}).show();//progress:20代表进度条已经过20%</script>
switch开关：
<div class="mui-switch" id="mySwitch"><div class="mui-switch-handle"></div></div><script type="text/javascript">var mySwitch =document.getElementById('mySwitch');mySwitch.addEventListener('click',function(){var isActive = mySwitch.classList.contains('mui-active');//通过是否包含mui-active类来判断当前按钮的状态if(isActive){console.log('打开');}else{console.log('关闭');}})</script>
1.内联块元素和块级元素的设置：
如果需要把HTML元素快速转换成内联块元素，可以给元素class属性添加mui-inline类，也就是设置css属性display：inline-block。同理，给元素class属性设置mui-block类，也就是设置css属性display：block
2.浮动：
给元素class属性设置mui-pull-left实现左浮动，设置mui-pull-right实现右浮动，设置mui-clearfix
3.列表元素的处理：
ul标签在浏览器中显示时，会有默认的原点和内边距，可以给ul元素的class属性设置mui-list-unstyled去掉，设置mui-list-inline将li标签设置为内联块元素
4.元素的显示与隐藏
可以给HTML元素的class属性设置mui-visibility让元素可见，class属性设置mui-hidden隐藏元素
mui对象的内置方法和对象：
1.mui()方法：
mui()方法使用css选择器获取HTML元素对象，返回一个mui对象数组
mui("p"); //选取所有的<p>元素
mui("p.title"); //选取所有包含.title类的<p>元素
若要将mui对象转化成DOM对象，可以使用如下方法：
//obj1是mui对象
var obj1 = mui("#title");;
//obj2是DOM对象
var obj2 = obj1[0];
2.each()方法：
each即是一个类方法，同时也是一个对象方法，两种方法的适用场景不同，可以使用mui.each()去变力数组或者json对象，也可以使用mui(selector).each()去遍历DOM结构
3.init()方法：
MUI框架将很多功能配置都集中在mui.init()方法中，要使用某项功能，只需要在mui.init()方法中完成对应的参数配置即可，目前支持在mui.init方法中配置的功能包括创建子页面/关闭页面/手势事件配置，预加载，下拉刷新，上拉加载，设置系统状态栏背景颜色，配置形式如下：
mui.init({//子页面subpages:[{}],//预加载preloadPages:[],//下拉刷新，上拉加载pullRefresh:{},//手势配置gettrueConfig:{},//侧滑关闭wipeBack:true,})
4.scrollTo()方法：
滚动窗口屏幕指定位置，该方法是对window.scrollTo()方法在手机端的增强实现，可以设置滚动动画时间以及滚动结束后的回调函数，鉴于手机屏幕大小，该方法仅可以实现屏幕纵向滚动
mui.scrollTo(ypos[,duration][,handler]);
ypos是整形值，要在窗口文档显示区左上角显示的文档的y坐标
duration是滚动时间周期，单位是毫秒
handler是滚动结束后执行的回调函数例如：1秒钟之内滚动到页面顶部：
mui.scrollTo(0,1000);
5.mui.os对象：
在浏览器中，经常需要通过navigator.userAgent判断当前运行环境，MUI框架对此进行了类似的封装：
属性 说明
mui.os.plus 判断是否在基座中运行
mui.os.stream 判断是否为流应用
mui.os.android 判断是否为Android
mui.os.ios 判断是否为ios
mui.os.ipad 判断是否为ipad
mui.os.iphone 判断是否为iphone
mui.os.wechat 判断是否在微信中运行
mui.os.verson 返回当前运行环境的版本号
事件管理：
1.tap事件
快速响应式移动应用开发实现的重中之重，tap事件能实现快速响应
ele.addEventListener('tap',function(){})
2.事件绑定
除了可以使用addEventListener()方法监听某个特定元素上的事件外，也可以使用.on()方法实现事件的绑定
mui(selecor).on(event,selector2,handler);
event是String类型，代表要监听的事件名称，如tap
handler式事件触发时的回调函数
selector1和selector2都是选择器，但是selector2必须是selector1代表的HTML元对象下面的后代选择器
代码：
mui(".mui-table-view").on('tap','.mui-table-view-cell',function(){//监听选择器 .mui-table-view对象下面的子元素选择器".mui-table-view-cell"对象的tap事件})
3.事件取消
使用on方法绑定事件后，若希望取消绑定，则可以使用off()方法
mui(selector).off():删除mui对象上所有的事件
mui(selector1).off(event,selector2):删除selector1选择器对应的HTML对象中的selector2对应的子对象上特定事件的所有回调
mui(selector1).off(event,selector2,handler):删除selector1选择器对应的HTML对象中对应的selector2子对象上之前绑定的事件函数，不支持匿名函数
4.事件触发
mui.trigger()方法可以动态触发特定DOM元素上的事件。
mui.trigger(element,event,data);
/*
element是触发事件的DOM对象
event是事件名称，如tap
data是JSON对象格式，代表需要传递给事件的业务参数
*/
例如：
btn.addEventListener("tap",function(){console.log("tap event trigger");
})
//自动触发按钮的点击事件
mui.trigger(btn,'tap');
5.手势事件：
在开发移动端的应用时，会用到很多的手势操作，例如滑动，长按等，为了方便开发者快速集成这些手势，mui内置了常用的手势事件，目前支持的手势事件如下：
| 事件名称 | 说明 |
|---|---|
| tap | 单机屏幕 |
| doubletap | 双击屏幕 |
| longtap | 长按屏幕 |
| hold | 按住屏幕 |
| release | 离开屏幕 |
| swipeleft | 向左滑动 |
| swiperight | 向右滑动 |
| swipeup | 向上滑动 |
| swipedowm | 向下滑动 |
| dragstart | 拖动开始 |
| drag | 拖动中 |
| dragdowm | 拖动结束 |
6.屏幕输出函数toast：
<button type="button" class="mui-btn mui-btn-blue" οnclick="qq();">按钮</button><script type="text/javascript">function qq(){mui.toast(666);}</script>
1.mui插件初始化：使用mui.init()进行mui插件初始化
2.页面初始化：
在App开发中，若要使用HTML5+扩展api，必须等plusready事件发生后才能正常使用，mui将该事件封装成了mui.plusReady()方法，涉及到HTML5+的api，建议都写在mui.plusReady方法中
3.事件触发：
使用mui.trigger()方法可以动态触发待定DOM元素上的事件
var btn = document.getElementById("submit");
//监听点击事件
btn.addEventListener("tap",function(){console.log("tap event trigger");
})
//触发submit按钮的点击事件
mui.trigger(btn,"tap");
MUI Ajax的使用方法：
mui框架基于html5+的XMLHTTPRequest，封装了常用的Ajax函数，支持GET、POSST请求方式，支持返回json、等数据类型
1.mui.ajax()
<script type="text/javascript">mui.init();mui.plusReady(function () {document.querySelector('#btn1').addEventListener('tap',function(){mui.ajax({url:'www.baidu.com',type:'GET',success:function(data){mui.toast(data);},error:function(xhr,type,errorThrown){mui.toast(type);}});});});</script>
Ajax简化模式：
mui.post(url[,data][,success][,dataType])
url:地址，data：携带的请求数据，success：请求成功的回调函数，dataType：返回数据的类型
例：
mui.post('www.baidu.com',{username:'username',password:'password'
},function(data){//服务器返回响应，根据响应结果，分析是否登录成功],'json')
mui.get(url[,data][,success][,dataType])
mui.getJSON()方法是在mui.get()方法基础上的进一步简化，限定返回json格式的数据，其他参数和mui.get()方法一致
