mui.init({
 swipeBack: false, //禁用右滑返回功能
 statusBarBackground: '#f7f7f7',  //手机状态栏的背景色，此处只识别十六进制颜色值
 gestureConfig: {
  doubletap: true
 },
 subpages: [{
  id: 'list',
  url: 'list.html', //当找不到此文件的时候，会报错
  styles: {
   top: '45px',
   bottom: 0,
   bounce: 'vertical'
  }
 }]
});

 

1、图标元素中，无filled类时，改变颜色，则改变的是图标的颜色，而带有filled类时，改变颜色，则改变的时图标的背景颜色

2.mui.on('事件类型', '触发事件的DOM元素', '事件触发后的回调函数');

3.监听自定义事件
window.addEventListener('自定义事件名', function(e){
 //此处通过e.detail.属性名,获取触发事件时，所传递的参数
});

4.触发自定义事件
mui.fire('事件触发所在的页面', '自定义事件名', '参数json对象');

5.这个居然能正常输出，到今天才发现，

6.两个弹出菜单(popover)特有的事件
mui('body').on('shown', '.mui-popover', function(e) {
 //console.log('shown', e.detail.id);//detail为当前popover元素
});
mui('body').on('hidden', '.mui-popover', function(e) {
 //console.log('hidden', e.detail.id);//detail为当前popover元素
});

7.原生弹出框有点小问题，如果页面有滑动，则会出现位置错位的情况，官方demo中没有呀

8. 相应元素触发系统事件
mui.trigger(previous.querySelector('a'), 'tap');
9.模拟首页点击
mui.trigger(defaultTab, 'tap');

9.输入框、滑动块有input事件
  radio、checkbox、selected有change事件

10.是否显示滚动条
mui('#scroll').scroll({
 indicators: true //是否显示滚动条
});

11.加载图标
<div class="mui-loading">
 <div class="mui-spinner">
 </div>
</div>

12.语音识别完成事件
document.getElementById("search").addEventListener('recognized', function(e) {
 console.log(e.detail.value);
});

13.开关有toggle事件

[1].mui-card {
  margin: 0 15px;
  overflow: hidden;
  background-color: white;
  background-clip: padding-box;
  border: 1px solid #ddd;
  border-radius: 6px;
}
这个是什么意思呢，增加左右的外边距，使产生圆角

[2].mui-content > .mui-card:first-child {
  margin-top: 15px;
}

[3].mui-table-view-chevron
第二级导航中的ul使用,
另外一个作用，使用列表li的右padding增大，一般适用于列表右侧有图标或其它内容的情况

[4].mui-popover-action
使弹出层以100%宽度显示

[5].mui-popover-bottom
官方文件里好像都已经没有这个类 了

[6].mui-collapse-content
折叠面板中的div使用

[7].mui-table-view-chevron
第二级导航中的ul使用，也即是折叠的二级导航，也可以认为就是一个折叠面板

[8].mui-content-padded {
  margin: 10px;
}
使元素上下左右产生10px的距离

[9].mui-ellipsis{
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
使元素内的文本内容，强制在一行内显示，多余的部分以"..."代替

[10].mui-ellipsis-2 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  white-space: normal !important;

  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
使元素内容文本强制在两行内显示，多余的部分以"..."代替

[11]文本相关类，与标签对应
h1, .mui-h1 {
  font-size: 36px;
}

h2, .mui-h2 {
  font-size: 30px;
}

h3, .mui-h3 {
  font-size: 24px;
}

h4, .mui-h4 {
  font-size: 18px;
}

h5, .mui-h5 {
  font-size: 14px;
  font-weight: normal;
  color: #8f8f94;
}

h6, .mui-h6 {
  font-size: 12px;
  font-weight: normal;
  color: #8f8f94;
}

[12]文本对齐相关
.mui-text-left {
  text-align: left !important;
}

.mui-text-center {
  text-align: center !important;
}

.mui-text-justify {
  text-align: justify !important;
}

.mui-text-right {
  text-align: right !important;
}

[13]浮动相关类
.mui-pull-left {
  float: left;
}

.mui-pull-right {
  float: right;
}

[14]还有另外两个
.mui-left
.mui-right
这两个好像，只与图标icons或表单radio,checkbox有关，后面查看仔细

[14].mui-hidden{
 display:none !importent;
}
 隐藏相关元素

[15].mui-clearfix:before, .mui-clearfix:after {
  display: table;
  content: " ";
}
.mui-clearfix:after {
  clear: both;
}
消除浮动影响

[16].mui-error {
  padding: 10px;
  margin: 88px 35px;
  background-color: #bbb;
  border-radius: 6px;
}
提示错误，是反色

---