MUUI

交互-总览

当然,muui提供了一些很方便易用的交互交互效果.目前交互大体上有两个,一个是浮层,一个是列表.对于所有的浮层操作,都会返回当前产生浮层的对象.对于列表,包括列表的下拉刷新与上滑加载.

浮层-muuiModal

浮层与bootstrap 2 中的modal相同.仅用一行JavaScript代码即可启动id为 myModal 的对话框：

$('#myModal').muuiModal(options); //仅仅说明该用法,实际移动端无具体使用场景,具体请看下面的其它浮层方法..下面方法皆通过该方法扩展

名称	类型	默认值	描述
backdrop	boolean	true	为模态对话框添加一个背景元素。另外，为背景指定`static`时，点击模态对话框的外部区域不会将其关闭。
show	boolean	true	初始化时即显示模态对话框

方法

$('#myModal').muuiModal('toggle') //手动打开或隐藏一个模态对话框。
$('#myModal').muuiModal('show')  //手动打开一个模态对话框。
$('#myModal').muuiModal('hide') //手动隐藏一个模态对话框。

事件

事件	描述
show	当`show`方法被调用时，此事件将被立即触发。
shown	当模态对话框呈现到用户面前时（会等待过渡效果执行结束）此事件被触发。
hide	当`hide`方法被调用时，此事件被立即触发。
hidden	当模态对话框被隐藏（而且过渡效果执行完毕）之后，此事件将被触发。

actionsheet-底部弹出按钮

var actionsheet = muui.actionsheet({
    list:[
            {text:"abc",type:"aaa"},//text属性会现实在弹出的按钮上,其他属性会以data-xxx的形式,渲染到对应按钮的dom上
            {text:"bcd",type:"bbb"}
        ],
    container:"body", //默认插入在html的body下
    history:true, //默认通过hash拦截浏览器返回,点击浏览器返回,actionsheet消失
    });

actionsheet.destory(); //关闭
actionsheet.on("hide",function(){});//关闭时
actionsheet.on("hiden",function(){});//关闭完时
actionsheet.on("click","li",function(){ //为actionsheet中的dom委托事件
    console.log(this);
    alert("click");
});

alert-警告框

var aalert = muui.alert({
    container:"body",
    width:"80%",
    title:"提醒",
    content:"是否确认该操作",
    backdrop:'static',
    history:true
});
aalert.destory(); //关闭
aalert.on("hide",function(){});//关闭时
aalert.on("hiden",function(){});//关闭完时

//当然,你也可以简写
 var aalert = muui.alert("是否确认?");
 aalert.on("click",".btn",function(){
    alert("你点击了按钮");
 });

confirm-确认框

var confirm = muui.confirm({
    container:"body",
    width:"80%",
    title:"提醒",
    content:"是否确认该操作",
    btns:[{text:"取消",type:"default",close:"1"},{text:"确定",type:"primary"}],
    backdrop:'static',
    history:true
});
confirm.destory(); //关闭
confirm.on("hide",function(){});//关闭时
confirm.on("hiden",function(){});//关闭完时

//当然,你也可以简写
var confirm = muui.confirm("是否确认该操作");
confirm.on("click",".btn",function(){
    alert("你点击的按钮");
});

toast-提示框

var toast = muui.toast({
   position:"middle", //"top","bottom",默认middle
   text:"这是一个提醒",
   time:"1500"
});
toast.destory(); //关闭
toast.on("hide",function(){});//关闭时
toast.on("hiden",function(){});//关闭完时  

//当然,你也可以简写
var toast = muui.toast("是否确认?");

loading-加载等待

var loading = muui.loading({
   text:"这是一个提醒",
   time:"1500" //1.5s后自动关闭,为空表示不关闭,默认为空
});
loading.destory(); //关闭
loading.on("hide",function(){});//关闭时
loading.on("hiden",function(){});//关闭完时  

//当然,你也可以简写
var loading = muui.loading("是否确认?");

pickermodal-底部弹出

var pickermodal =  muui.pickermodal($("#picker-ul").clone());
pickermodal.destory(); //关闭
pickermodal.on("hide",function(){});//关闭时
pickermodal.on("hiden",function(){});//关闭完时
pickermodal.on("click","li",function(){
    //给pickermodal中的dom li添加事件
});

//当然,如果你不需要截取浏览器返回,或者有冲突,你可以关闭
var pickermodal = muui.pickermodal({
    html:$("#picker-ul").clone(),
    history:false,
});

pickerpage-侧滑整屏

var pickerpage =  muui.pickerpage($("#picker-ul").clone());
pickerpage.destory(); //关闭
pickerpage.on("hide",function(){});//关闭时
pickerpage.on("hiden",function(){});//关闭完时
pickerpage.on("click","li",function(){
    //给pickerpage中的dom li添加事件
});

//当然,如果你不需要截取浏览器返回,或者有冲突,你可以关闭
var pickerpage = muui.pickerpage({
    html:$("#picker-ul").clone(),
    history:false,
});

pickersidebar-侧滑操作栏

var pickersidebar =  muui.pickersidebar($("#picker-ul").clone());
pickerpage.destory(); //关闭


//当然,可以有更多设置
var pickersidebar = muui.pickersidebar({
    html:$("#picker-ul").clone(),
    position:"right"
});

列表-下拉与上滑

$("#list").refreshList({
    pullRefresh:1,//是否有下拉刷新交互
    topHeight:48, //下拉刷新顶部dom高度
    readyRefresh:function(){},//准备刷新
    resetRefresh:function(){},//重置
    refresh:function(){},//刷新
    addData:function(){}//添加数据
});

具体查看示例: https://yaotaiyang.github.io/muui/example/