MUI極簡的JS函數

標籤：限制   rgb   狀態列   模組   timeout   ui架構   按鍵監聽   pull   需要   

模組：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.4if(mui.os.ios||(mui.os.android&&parseFloat(mui.os.version)<4.4)){   //... } </script>

 

MUI極簡的JS函數