MUI归纳

 1、MUI选择器

mui("#app")
mui(".test-con")

 2、MUI遍历

数组遍历
mui.each()(数组,对象遍历)
结点遍历
mui().each()(DOM遍历)

 3、MUI计时器

mui.later() (setTimeOut封装)

1、事件绑定

mui(".mui-table-view").on('tap','.mui-table-view-cell',function(){}

2、事件取消

mui("#list").off("tap","li",foo_1);

 3、事件触发

mui.trigger(btn,'tap');

 4、事件监听

elem.addEventListener("swipeleft",function(){
     console.log("你正在向左滑动");
});

 5、自定义事件

var detailPage = null;
//添加列表项的点击事件
mui('.mui-content').on('tap', 'a', function(e) {
  var id = this.getAttribute('id');
  //获得详情页面
  if(!detailPage){
    detailPage = plus.webview.getWebviewById('detail.html');
  }
  //触发详情页面的newsId事件
  mui.fire(detailPage,'newsId',{
    id:id
  });
//打开详情页面          
  mui.openWindow({
    id:'detail.html'
  });
});  

 5、MUI AJAX

mui.ajax('http://server-name/login.php',{
	data:{
		username:'username',
		password:'password'
	},
	dataType:'json',//服务器返回json格式数据
	type:'post',//HTTP请求类型
	timeout:10000,//超时时间设置为10秒；
	headers:{'Content-Type':'application/json'},	              
	success:function(data){
		//服务器返回响应，根据响应结果，分析是否登录成功；
		...
	},
	error:function(xhr,type,errorThrown){
		//异常处理；
		console.log(type);
	}
});

 MUI常用组件

1、单选框

<div class="mui-input-row mui-radio">
　　 <label>radio</label>
　　 <input name="radio1" type="radio">
</div>

 2、复选框

<div class="mui-input-row mui-checkbox mui-left">
　　<label>checked：false</label>
　　<input name="checkbox" value="Item 1" type="checkbox" >
</div>

 3、mui遮罩层(用于自定义弹出框)

<script type="text/javascript">
　　　　　　//callback为用户点击蒙版时自动执行的回调；
		var mask = mui.createMask(function(){});
		var dialog=document.getElementsByClassName("QR-con")[0];
		mui('.home-btn').on('tap','#add_num',function(){
			mask.show();//显示遮罩
			dialog.classList.remove("mui-hidden");
		})
		mui('.QR-con').on('tap','.cofirm-btn',function(){
			mask.close();//关闭遮罩
			dialog.classList.add("mui-hidden");
		})	
	    //在body上面加上mask-con类名 监听点击遮罩关闭事件
	    if(document.getElementsByClassName("mui-backdrop")){
		  	mui(".mask-con").on('tap','.mui-backdrop',function() {
	           //阻止默认事件
	            event.detail.gesture.preventDefault();
				dialog.classList.add("mui-hidden");
	        });
		}
	</script>
		    

 4、mui自带的几种dialog

（1）自动消失提示框（给出一定的提示）

<button id='toastBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">自动消失提示框</button>
document.getElementById("toastBtn").addEventListener('tap', function() {
　　mui.toast('欢迎体验Hello MUI');
});

 （2）确认消息框（避免误操作）

<button id='confirmBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">确认消息框</button>
document.getElementById("confirmBtn").addEventListener('tap', function() {
　　var btnArray = ['否', '是'];
　　mui.confirm('MUI是个好框架，确认？', 'Hello MUI', btnArray, function(e) {
　　if (e.index == 1) {
	info.innerText = '你刚确认MUI是个好框架';
　　} else {
　　　　info.innerText = 'MUI没有得到你的认可，继续加油'
　　}
　　})
});

 （3）输入消息对话框（比如输入授权码）

<button id='promptBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">输入对话框</button>
document.getElementById("promptBtn").addEventListener('tap', function(e) {
	e.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug，使用plus.nativeUI.prompt会造成输入法闪一下又没了
	var btnArray = ['取消', '确定'];
	mui.prompt('请输入你对MUI的评语：', '性能好', 'Hello MUI', btnArray, function(e) {
		if (e.index == 1) {
			
		} else {
			
		}
	})
});

 （4）警告消息框

<button id='alertBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">警告消息框</button>
document.getElementById("alertBtn").addEventListener('tap', function() {
	mui.alert('欢迎使用Hello MUI', 'Hello MUI', function() {
		
	});
});