模塊：utils

http://dev.dcloud.net.cn/mui/util/#event

mui.init();

mui框架將很多功能配置都集中在mui.init方法中，要使用某項功能，只需要在mui.init方法中完成對應參數配置即可，目前支持在mui.init方法中配置的功能包括：創建子頁面、關閉頁面、手勢事件配置、預加載、下拉刷新、上拉加載、設置系統狀態欄背景顏色。

mui需要在頁面加載時初始化很多基礎控件,如監聽返回鍵,因此務必在每個頁面中調用

<script type="text/javascript">
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//預加載窗口數量限制(一旦超出,先進先出)默認不限制
})
</script>

示例：

<script type="text/javascript">
mui.init({
    mui.init({
        //通過statusBarBackground:rgb 屬性設置狀態欄顏色（iOS7.0+、安卓不支持）格式為#RRGGBB。
 

        statusBarBackground: ‘#9defbcg‘,
        //mui默認會監聽Android手機的物理按鍵(back&menu),若不希望自動處理按鍵可通過以下方式關閉
        //監聽Android手機的back、menu按鍵        
        keyEventBind: {
            backbutton: true,  //Boolean(默認true)關閉back按鍵監聽
            menubutton: true   //Boolean(默認true)關閉menu按鍵監聽
        },
    })
})
</script>

mui(); （有點像 $() ）

mui使用css選擇器獲取HTML元素，返回mui對象數組。

mui("p");//選取所有<p>元素
mui("p.title");//選取所有包含.title類的<p>元素

若要將mui對象轉化成dom對象，可使用如下方法（類似jquery對象轉成dom對象）：

<script type="text/javascript">
var obj1 = mui("#title");//obj1是mui對象
var obj2 = obj1[0]; //obj2是dom對象
</script>

MUI框架的定位是“最接近原生體驗的移動App的UI框架”， 因此和jQuery有所區別，很少為簡化DOM操作而封裝API，具體可參考MUI產品概述； 該函數的設計目的，更多是為了配合MUI插件使用，比如圖片輪播、下拉刷新、區域滾動等，如下為詳細示例：

<script type="text/javascript">
mui(‘.mui-slider‘).slider().gotoItem(1);//跳轉到圖片輪播的第二張圖片
mui(‘#pullup-container‘).pullRefresh().refresh(true);//重新開啟上拉加載
</script>

mui.each();

each既是一個類方法，同時也是一個對象方法，兩個方法適用場景不同；換言之，你可以使用mui.each()去遍歷數組或json對象，也可以使用mui(selector).each()去遍歷DOM結構。

<script type="text/javascript">
mui.each(obj,handler);
mui(selector).each(handler);
//obj:Type: Array||JSONObj需遍歷的對象或數組；若為對象，僅遍歷對象根節點下的key
//handler:Type: Function( Integer||String index,Anything element)為每個元素執行的回調函數；其中，index表示當前元素的下標或key，element表示當前匹配元素
</script>

示例：輸出當前數組中每個元素的平方

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

示例：當前頁面中有三個字段，如下：

<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){
  //.....
}

mui.extend();

將兩個對象合並成一個對象。

<script type="text/javascript">
.extend(deep,target,object1[,objectN]);
.extend(target,object1[,objectN]);
//deep Type: Boolean 若為true，則遞歸合並
//target:Type: Object 需合並的目標對象
//object1:Type: Object 需合並的對象
//objectN:Type: Object 需合並的對象
</script>

示例：

<script type="text/javascript">
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));
//支持深度合並
mui.extend(true,target,obj1);
//輸出：{"company":"dcloud","product":{"mui":"小巧、高效","HBuilder":"飛一樣的編碼"},"city":"beijing"}
console.log(JSON.stringify(target));
</script>

mui.later();

setTimeOut封裝：

<script type="text/javascript">
    mui.later(func,delay[,context,data]);
    //func:Type: Function delay毫秒後要執行的函數
    //delay:Type: Int 延遲的毫秒數
    //context:Type: Object上下文
</script>

示例：

<script type="text/javascript">
    mui.later(function(){
          
    },500)
</script>

mui.scrollTo();

滾動窗口屏幕到指定位置，該方法是對window.scrollTo()方法在手機端的增強實現，可設定滾動動畫時間及滾動結束後的回調函數;鑒於手機屏幕大小，該方法僅可實現屏幕縱向滾動。

<script type="text/javascript">
mui.scrollTo(ypos[,duration][,handler]);
//ypos:Type: Integer 要在窗口文檔顯示區左上角顯示的文檔的 y 坐標;
//duration:Type: Integer 滾動時間周期，單位是毫秒
//handler:Type: Function滾動結束後執行的回調函數
</script>

示例：

<script type="text/javascript">
mui.scrollTo(0,1000);//1秒鐘之內滾動到頁面頂部
</script>

mui.os;

我們經常會有通過navigator.userAgent判斷當前運行環境的需求,mui對此進行了封裝,通過調用mui.os.XXX即可;

Android(可以訪問的參數:)

.android type:boolean 是否為安卓手機
.version type:number 版本號
.isBadAndroid android非Chrome環境

ios(可以訪問的參數:)

.ios type:Boolean 是否為蘋果設備
.version type:number 返回手機版本號
.iphone 是否為蘋果手機
.ipad 返回時候為ipad

Wechat(可以訪問的參數為:)

.wechat 返回是否在微信中運行

示例：

<script type="text/javascript">
//檢測是否為iOS或安卓系統版本是否小於4.4
if(mui.os.ios||(mui.os.android&&parseFloat(mui.os.version)<4.4)){
   //...
 } 
</script>

MUI極簡的JS函數