模塊:utilsjavascript
http://dev.dcloud.net.cn/mui/util/#event
mui.init(); css
mui框架將不少功能配置都集中在mui.init方法中,要使用某項功能,只須要在mui.init方法中完成對應參數配置便可,目前支持在mui.init方法中配置的功能包括:建立子頁面、關閉頁面、手勢事件配置、預加載、下拉刷新、上拉加載、設置系統狀態欄背景顏色。java
mui須要在頁面加載時初始化不少基礎控件,如監聽返回鍵,所以務必在每一個頁面中調用jquery
<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>
示例:android
<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(); (有點像 $() )ios
mui使用css選擇器獲取HTML元素,返回mui對象數組。json
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>