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

转载于:https://www.cnblogs.com/e0yu/p/7852759.html

MUI极简的JS函数相关推荐

  1. HTML5 极简的JS函数

    页面初始化 mui框架将很多功能配置都集中在mui.init方法中,要使用某项功能,只需要在mui.init方法中完成对应参数配置即可,目前支持在mui.init方法中配置的功能包括:创建子页面.关闭 ...

  2. 微信棋牌游戏源码搭建HTML5极简的JS函数

    页面初始化 mui框架将很多功能配置都集中在mui.init方法中,要使用某项功能,只需要在mui.init方法中完成对应参数配置即可,目前支持在mui.init方法中配置的功能包括:创建子页面.关闭 ...

  3. js读取http chunk流_极简 Node.js入门 教程双工流

    点击上方蓝字关注我们 小编提示: 本文是由 ICBU 的谦行小哥哥出品,我们会持续发出极简 Node.js入门 教程,敬请期待哦,文中有比较多的演示代码建议横屏阅读 双工流就是同时实现了 Readab ...

  4. 极简 Node.js 入门 - 3.2 文件读取

    Node.js 提供了多种读取文件的 API fs.readFile fs.readFile(path[, options], callback) 是最常用的读取文件方法,用于异步读取文件的全部内容 ...

  5. Android极简的js与java交互库一一SimpleJavaJsBridge

    今日科技快讯 根据相关报道,本月底旧版本Uber中国App将全面停止在中国的服务.内部人士透露,所有的Uber中国司机也正在被转移到滴滴司机的平台上,月底会全部转移完成. 另外滴滴出行新成立了一个部门 ...

  6. mysql 工具 uwp_UWP 创建动画的极简方式 — LottieUWP

    提到 UWP 中创建动画,第一个想到的大多都是 StoryBoard.因为 UWP 和 WPF 的界面都是基于 XAML 语言的,所以实现 StoryBoard 会非常方便. 来看一个简单的 Stor ...

  7. 极简的 PNG 编码函数 svpng(),用来学习C语言,真的很爽

    这个是在知乎上看到的大神写的文章,如果是学习C语言入门的,我觉得可以从这个入手,特别是对图像感兴趣的. 文章中提到的「我」,指的是「Milo Yip」大神. 1.    什么是png格式图片? 相对地 ...

  8. 《Node.js 极简教程》 东海陈光剑

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境. Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效. https://nodejs. ...

  9. 光滑曲线_极简微积分——函数的曲线的描绘

    我们曾为导数是什么,导数如何计算付出了很多的努力去搞明白它到底是什么一回事.导数在物理学,经济学中都发挥了重要的作用,下面将讲述一些导数在函数图像分析方面的简单应用,以证明我们学过的导数不只是理论上的 ...

最新文章

  1. asp.net中的联动菜单
  2. Spring Boot + Mybatis 多模块(module)项目的完整搭建教程
  3. Floodlight之 FloodlightContextStore 数据结构
  4. 【Android 文件管理】分区存储 ( 修改与删除图片文件 )
  5. 我国数据中心产业发展“渐入佳境” 服务是重中之重
  6. 2场直播丨MySQL 数据库最常见的 6 类故障的排除方法、2020数据技术嘉年华·金融峰会暨数据库大咖讲坛(第4期)...
  7. 教师节我用Python分析了336个赞美老师的句子,满满的幸福和开心
  8. r矢量球坐标系旋度_三个常用坐标系的认识及矢量旋度表达式的证明
  9. 2017年网易游戏数据挖掘/机器学习实习生笔试
  10. 在Emacs下用C/C++编程(转载)
  11. android+tv+直播源diy,目前HDP直播自定义节目源
  12. linux chmod、chown命令不起作用
  13. 电脑桌面天气计算机备忘录,有什么桌面软件可以显示:时间,天气,还有备忘录的?...
  14. cissp认证考试指南_如何通过CISSP考试(信息安全认证)
  15. UART(Universal Asynchronous Receiver/Transmitter)
  16. java——获取网页源代码
  17. Java实现Telegram机器人
  18. OpenCV实战(12)——图像滤波详解
  19. 基于HBuilder 开发 项目之微信支付
  20. 图形处理之封闭性检测

热门文章

  1. net6支持的windows版本
  2. Laravel自定义错误提示语语言包
  3. 极限编程-拥抱变化阅读感想(一)
  4. 【停课不停学】CSDN学院奉绵薄之力,为程序员做点公益!
  5. 我是学计算机的表情包,我是一个热爱学习的人表情包
  6. 【天光学术】信息管理论文:计算机信息管理应用于网络安全的策略(节选)
  7. Markdown——入门指南
  8. 什么是固态硬盘?它有什么好处?
  9. Linux命令卸载谷歌浏览器,UBUNTU16.04安装谷歌浏览器卸载firefox浏览器
  10. 解决谷歌浏览器下载缓慢问题