自己动手丰衣足食,h5手机端jquery弹窗插件(事件冒泡、单例模式、遮盖部分禁止默认滚动)
感谢浏览,欢迎交流=。=
公司开发微信网页多处需要使用弹窗,使用jquery-ui的定制化下载仍需要150多kb,想来有些奢侈(最终下来只有11kb,压缩后2kb,啊,我的神),
手机端弹窗方式与pc端有些不同,而且手机上有一个弹窗出来滚动跟父页面滚动相互影响的问题,
于是决定写一个插件,专门对付手机网页的弹窗。
弹窗的mask和dialog两部分都做成了position=fixed,比较喜欢这种效果,并且屏蔽了被遮住部分的滚动。
几处认为需要留意的知识点或困难点:
1.事件冒泡:
e.preventDefault()阻止事件默认行为。
event.stopPropagation();阻止事件冒泡
在jquery中return false等效于同时调用e.preventDefault()和e.stopPropagation()
return false除了阻止默认行为之外,还会阻止事件冒泡。如果手上有一份jquery源代码的话,可查看其中有如下代码:
if (ret===false){
event.preventDefault();
event.stopPropagation();
}
2.js单例的写法:
使用闭包的这种特性可以达到一些令人开心的效果,插件中singleMask和singleDialogManager均使用了单例,代码可总结为如下:
3.弹窗及内部宽度高度的计算,感觉有的时候写这些代码真的需要拿张纸画画。
4.关于滚动条滚到顶部和底部
elem.clientHeight + elem.scrollTop - elem.scrollHeight == 0可以判断滚动条是否到底部
elemDialogContent.scrollTop == 0可以判断滚动条是否在顶部
5.关于touchstart,touchmove,touchend获取触摸点
e.originalEvent.touches是一个数组,描述多个触摸事件
后触摸的touchstart事件将触发滚动,所以这里touchmove事件中监控touches[touches.length - 1]这个对象
6.结合上面的4和5条,可以控制其对滚动的响应,通过e.preventDefault()阻止默认滚动行为。核心代码如下:
代码展示:
jquery.dialog.js
dialog.css
页面调用代码:
$("#test-btn").bind({//弹窗代码
"touchstart": function () {
$("#test-dialog").dialog({
title: "弹窗测试",
width: 1000,
height: 1000
});
return false;
}
})
$("#test-dialog").dialog({"close":true})//关闭代码
最终效果:
代码在GitHub上:
整天用人家开源的,咱也开源吧:https://github.com/SoulRIver2015/jquery-plugins/tree/master/mobile/river/dialog
自己动手丰衣足食,h5手机端jquery弹窗插件(事件冒泡、单例模式、遮盖部分禁止默认滚动)的更多相关文章
- jquery 弹窗插件 layer
jquery 弹窗插件 layer 官网:http://sentsin.com/jquery/layer/ 1 <!DOCTYPE html PUBLIC "-//W3C//DTD H ...
- h5手机端下拉选择城市
<!doctype html><html> <head> <meta http-equiv="Content-Type& ...
- h5 手机端适配问题汇总
1.uc手机浏览器竟然没有 sessionstorage 醉了 2.opera 浏览器 能识别 a标签中href的 javascript:; 为网址 , 55555 3.safari 的弹框如 ...
- H5手机端关注的问题
手机端页面写css时应该注意的问题: 设备的屏幕尺寸 设备的分辨率 用户的操作习惯以及点击区域的大小 移动端浏览器的特性 鉴于分辨率等情况而引出的图片尺寸.布局方式等诸多细节问题 ...
- 关于h5手机端上拉加载和下拉刷新效果-1
1.手机端目前很火的效果,上拉加载,和下拉刷新.目前主要使用 iscroll 框架来实现.先推荐一个iscroll中文学习的网站,不要感谢,我是雷锋. 2.https://iiunknown.gitb ...
- jquery弹窗插件layer:layer.layui.com
这两天在做抽奖转盘功能,浏览器自带的alert弹出框太low,本人又基本不会前端, 于是借鉴前人用fancybox插件做的效果 结果没看懂其写法(http://www.0101shop.com/goo ...
- jquery 中的事件冒泡
废话少说,先来一段代码热热身: <!DOCTYPE html> <html> <head> <title>demo</title> < ...
- jQuery中的事件冒泡
1.什么是冒泡 eg: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <he ...
- JQuery中阻止事件冒泡的两种方式及其区别
JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ ...
随机推荐
- day1作业
作业一:博客 作业二:编写登陆接口 输入用户名密码 认证成功后显示欢迎信息 输错三次后锁定 作业三:多级菜单 三级菜单 可依次选择进入各子菜单 所需新知识点:列表.字典 作业一分析: readme.m ...
- spring boot配置写法
转自:http://blog.csdn.net/mickjoust/article/details/51646658 每日金句 你要搞清楚自己人生的剧本:不是你父母的续集,不是你子女的前传,更不是你朋 ...
- Map集合中value()方法与keySet()、entrySet()区别
http://blog.csdn.net/liu826710/article/details/9001254 在Map集合中 values():方法是获取集合中的所有的值----没有键,没有对应关系, ...
- 更改 Tomcat 日志路径
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...
- 【转载】ShowWindow函数
ShowWindow的API函数是显示窗体,但它在第一次调用和以后的调用是有差别的.第一次调用时,它的输入參数nCmdShow是须要输入WinMain函数里传入来的nCmdShow參数,而不能是其他參 ...
- [置顶] mmog游戏开发之业务篇
这周不是很忙,因为我们的游戏开发了近一年,由于公司的业务调整,在游戏开第二服的时候,老板果断的把项目停到了. 感觉超级的不爽啊.因为这个游戏项目像我的孩子一样和我一样成长,里边的大概的业务逻辑都是偶实 ...
- Caused by: java.lang.ClassNotFoundException: org.apache.commons.io.FileUtils
1.错误叙述性说明 警告: Could not create JarEntryRevision for [jar:file:/D:/MyEclipse/apache-tomcat-7.0.53/web ...
- FAQ系列 | 解读EXPLAIN执行计划中的key_len
http://imysql.com/2015/10/20/mysql-faq-key-len-in-explain.shtml
- QT运行时加载UI文件
写QT程序里运行时加载UI文件,代码如下: 点击(此处)折叠或打开 #include "keyboard.h" #include <QtUiTools> #incl ...
- MYSQL小常识
在mysql里面利用str_to_date()把字符串转换为日期 此处以表T_TGS_ALARMED的BJSJ为例,查询当前时间在此范围之内的数据. insert into T_TGS_ALARMED ...