标签：限制 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.4 if(mui.os.ios||(mui.os.android&&parseFloat(mui.os.version)<4.4)){ //... } </script>
标签：限制 rgb 状态栏 模块 timeout ui框架 按键监听 pull 需要
原文地址：http://www.cnblogs.com/e0yu/p/7852759.html
