分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

MUI极简的JS函数

发布时间:2023-09-06 01:25责任编辑:苏小强关键词:暂无标签

模块: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函数

原文地址:http://www.cnblogs.com/e0yu/p/7852759.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved