MUI utils

1、init()

  mui框架将很多功能配置都集中在mui.init方法中，要使用某项功能，只需要在mui.init方法中完成对应参数配置即可，目前支持在mui.init方法中配置的功能包括：创建子页面、关闭页面、手势事件配置、预加载、下拉刷新、上拉加载、设置系统状态栏背景颜色。

  mui需要在页面加载时初始化很多基础控件,如监听返回键,因此务必在每个页面中调用。以下各配置模块在其对应文档中有详细阐述,请点击链接查看,这里只列出所有可配置项。

mui.init({
//子页面
subpages: [{
//...
}],
//预加载
 preloadPages:[
    //...
 	 ],
//下拉刷新、上拉加载
 	pullRefresh : {
   //...
     	},
//手势配置
 	 gestureConfig:{
   //...
},
//侧滑关闭
swipeBack:true, //Boolean(默认false)启用右滑关闭功能
//监听Android手机的back、menu按键
keyEventBind: {
backbutton: false,  //Boolean(默认true)关闭back按键监听
menubutton: false   //Boolean(默认true)关闭menu按键监听
},
//处理窗口关闭前的业务
beforeback: function() {
//... //窗口关闭前处理其他业务详情点击 ↑ "关闭页面"链接查看
},
//设置状态栏颜色
statusBarBackground: "#9defbcg", //设置状态栏颜色,仅iOS可用
preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制
})

  以上各配置模块在其对应文档中有详细阐述,请点击链接查看,以下只补充单独配置项。

  通过statusBarBackground:rgb 属性设置状态栏颜色（iOS7.0+、安卓不支持）格式为#RRGGBB。

mui.init({
statusBarBackground: "#9defbcg",
})

mui默认会监听Android手机的物理按键(back&menu),若不希望自动处理按键可通过以下方式关闭

mui.init({
//监听Android手机的back、menu按键
keyEventBind: {
backbutton: true,  //Boolean(默认true)关闭back按键监听
menubutton: true   //Boolean(默认true)关闭menu按键监听
},
})

代码块激活字符:  minit

2、mui()

mui使用css选择器获取HTML元素，返回mui对象数组。

   mui("p")：选取所有<p>元素

   mui("p.title")：选取所有包含.title类的<p>元素

若要将mui对象转化成dom对象，可使用如下方法（类似jquery对象转成dom对象）：

//obj1是mui对象
var obj1 = mui("#title");
//obj2是dom对象
var obj2 = obj1[0];

   MUI框架的定位是“最接近原生体验的移动App的UI框架”， 因此和jQuery有所区别，很少为简化DOM操作而封装API，具体可参考MUI产品概述； 该函数的设计目的，更多是为了配合MUI插件使用，比如图片轮播、下拉刷新、区域滚动等，如下为详细示例：

示例1：跳转到图片轮播的第二张图片

mui(".mui-slider").slider().gotoItem(1);

示例2：重新开启上拉加载

mui("#pullup-container").pullRefresh().refresh(true);

 

代码块激活字符:  mmui

3、each()

   each既是一个类方法，同时也是一个对象方法，两个方法适用场景不同；换言之，你可以使用mui.each()去遍历数组或json对象，也可以使用mui(selector).each()去遍历DOM结构。

（1）、mui.each( obj , handler )

    obj：Type: Array||JSONObj需遍历的对象或数组；若为对象，仅遍历对象根节点下的key

   handler：Type: Function( Integer||String index,Anything element)，为每个元素执行的回调函数；其中，index表示当前元素的下标或key，element表示当前匹配元素。

（2）、mui(selector).each( handler )

   handler：Type: Function( Integer index,Element element)为每个匹配元素执行的回调函数；其中，index表示当前元素在匹配元素中的位置（下标，从0开始），element表示当前匹配元素，可用this关键字代替

（3）、示例

示例1

输出当前数组中每个元素的平方

var array = [1,2,3]
mui.each(array,function(index,item){
  console.log(item*item);
})

示例2

当前页面中有三个字段，如下：

<div class="mui-input-group">
  <div class="mui-input-row">
    <label>字段1：</label>
    <input type="text" class="mui-input-clear" id="col1" placeholder="请输入">
  </div>
  <div class="mui-input-row">
    <label>字段2：</label>
    <input type="text" class="mui-input-clear" id="col2" placeholder="请输入">
  </div>
  <div class="mui-input-row">
    <label>字段3：</label>
    <input type="text" class="mui-input-clear" id="col3" placeholder="请输入">
  </div>
</div>

提交时校验三个字段均不能为空，若为空则提醒并终止业务逻辑运行，使用each()方法循环校验，如下：

var check = true;
mui(".mui-input-group input").each(function () {
  //若当前input为空，则alert提醒
  if(!this.value||trim(this.value)==""){
    var label = this.previousElementSibling;
    mui.alert(label.innerText+"不允许为空");
    check = false;
    return false;
  }
});
//校验通过，继续执行业务逻辑
if(check){
  //.....
}

代码块激活字符:  meachmmeach(遍历DOM)

4、extend()

将两个对象合并成一个对象。

（1）、.extend( target , object1 [, objectN] )

    target：Type: Object，需合并的目标对象

    object1：Type: Object，需合并的对象

    objectN：Type: Object，需合并的对象

（2）、.extend( deep , target , object1 [, objectN] )

    deep：Type: Boolean，若为true，则递归合并

    target：Type: Object，需合并的目标对象

   object1：Type: Object，需合并的对象

   objectN：Type: Object，需合并的对象

示例

var target = {
  company:"dcloud",
  product:{
    mui:"小巧、高效"
  }
}
var obj1 = {
  city:"beijing",
  product:{
    HBuilder:"飞一样的编码"
  }
}
mui.extend(target,obj1);
//输出：{"company":"dcloud","product":{"HBuilder":"飞一样的编码"},"city":"beijing"}
console.log(JSON.stringify(target));

从如上输出可以看到，product节点下的mui被替换成了HBuilder，因为默认仅合并对象根节点下的key、value；如果想深度合并，则可以传入deep参数，如下：

var target = {
  company:"dcloud",
  product:{
    mui:"小巧、高效"
  }
}
var obj1 = {
  city:"beijing",
  product:{
    HBuilder:"飞一样的编码"
  }
}
//支持深度合并
mui.extend(true,target,obj1);
//输出：{"company":"dcloud","product":{"mui":"小巧、高效","HBuilder":"飞一样的编码"},"city":"beijing"}
console.log(JSON.stringify(target));

代码块激活字符: mextend

5、later()

setTimeOut封装

.later( func , delay [, context, data] )

func：Type: Function，delay毫秒后要执行的函数

delay：Type: Int，延迟的毫秒数

context：Type: Object上下文

代码块激活字符: mlater

6、scrollTo()

  滚动窗口屏幕到指定位置，该方法是对window.scrollTo()方法在手机端的增强实现，可设定滚动动画时间及滚动结束后的回调函数;鉴于手机屏幕大小，该方法仅可实现屏幕纵向滚动。

.scrollTo( ypos [, duration] [, handler] )

ypos：Type: Integer，要在窗口文档显示区左上角显示的文档的 y 坐标

duration：Type: Integer，滚动时间周期，单位是毫秒

handler：Type: Function。滚动结束后执行的回调函数

示例

1秒钟之内滚动到页面顶部

mui.scrollTo(0,1000);

代码块激活字符:    mscrollto

7、os

   我们经常会有通过navigator.userAgent判断当前运行环境的需求,mui对此进行了封装,通过调用mui.os.XXX即可

（1）、Android(可以访问的参数为:)

     .wechat：返回是否为微信端

     .android：返回是否为安卓手机

     .version：安卓版本号

     .isBadAndroid：android非Chrome环境

（2）、iOS(可以访问的参数为:)

     .iOS：返回是否为苹果设备

     .version：返回手机版本号

     .iphone：返回是否为苹果手机

     .ipad：返回是否为ipad

（3）、plus(可以访问的参数为:)

     .plus：返回是否在基座中运行

     .stream：返回是否为流应用

示例

检测是否为iOS或安卓系统版本是否小于4.4

if(mui.os.ios||(mui.os.android&&parseFloat(mui.os.version)<4.4)){

   //...

 }

代码块激活字符: mos