MUI極簡的JS函數

模塊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>
相關文章
相關標籤/搜索