自己动手丰衣足食，h5手机端jquery弹窗插件（事件冒泡、单例模式、遮盖部分禁止默认滚动）

【自己动手丰衣足食，h5手机端jquery弹窗插件（事件冒泡、单例模式、遮盖部分禁止默认滚动）】的更多相关文章

自己动手丰衣足食，h5手机端jquery弹窗插件（事件冒泡、单例模式、遮盖部分禁止默认滚动）

感谢浏览,欢迎交流=.= 公司开发微信网页多处需要使用弹窗,使用jquery-ui的定制化下载仍需要150多kb,想来有些奢侈(最终下来只有11kb,压缩后2kb,啊,我的神), 手机端弹窗方式与pc端有些不同,而且手机上有一个弹窗出来滚动跟父页面滚动相互影响的问题, 于是决定写一个插件,专门对付手机网页的弹窗. 弹窗的mask和dialog两部分都做成了position=fixed,比较喜欢这种效果,并且屏蔽了被遮住部分的滚动. 几处认为需要留意的知识点或困难点: 1.事件冒泡: e.prev…

jquery 弹窗插件 layer

jquery 弹窗插件 layer 官网:http://sentsin.com/jquery/layer/ 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type…

h5手机端下拉选择城市

<!doctype html><html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximu…

h5 手机端适配问题汇总

1.uc手机浏览器竟然没有 sessionstorage 醉了 2.opera 浏览器能识别 a标签中href的 javascript:; 为网址 , 55555 3.safari 的弹框如果为 fix 布局,会影响弹框中 input输入框的输入位置 4.h5中没有hover 只能通过 touchstart touchend 事件来失效某些效果, 并且这些事件和click 是重叠触发的... ------- 手机端事件总结 touchstart…

H5手机端关注的问题

手机端页面写css时应该注意的问题: 设备的屏幕尺寸设备的分辨率用户的操作习惯以及点击区域的大小移动端浏览器的特性鉴于分辨率等情况而引出的图片尺寸.布局方式等诸多细节问题手机端页面调试问题如何减少用户流量流逝以及在低网速下如何保证快速打开页面在移动端制作页面时,需要考虑的点大概如下: 1.设备的系统版本号:ios,android: 2.设备中的浏览器类型以及版本:safari.uc.chrome 3.设备的分辨率 4.设备像素比 5.图片格式的选择以及图…

关于h5手机端上拉加载和下拉刷新效果-1

1.手机端目前很火的效果,上拉加载,和下拉刷新.目前主要使用 iscroll 框架来实现.先推荐一个iscroll中文学习的网站,不要感谢,我是雷锋. 2.https://iiunknown.gitbooks.io/iscroll-5-api-cn/content/ 3.今天在上班,等晚上我再详细介绍一下,么么哒..…

jquery弹窗插件layer：layer.layui.com

这两天在做抽奖转盘功能,浏览器自带的alert弹出框太low,本人又基本不会前端, 于是借鉴前人用fancybox插件做的效果结果没看懂其写法(http://www.0101shop.com/goods-2213.html); 后来朋友给了我layer弹窗插件地址让我用这个: http://layer.layui.com/ ,实际使用证明这个弹窗插件很好用点赞…

jquery 中的事件冒泡

废话少说,先来一段代码热热身: <!DOCTYPE html> <html> <head> <title>demo</title> <meta charset="utf-8"> <script src="js/jquery.min.js"></script> </head> <body> <div id="content"…

jQuery中的事件冒泡

1.什么是冒泡 eg: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>事件冒泡</title> <script src="…

JQuery中阻止事件冒泡的两种方式及其区别

JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ event.stopPropagation(); }); 方式二:return false; $("#div1").mousedown(function(event){ return false; }); 但是…

JQuery中阻止事件冒泡方式及其区别

JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ event.stopPropagation(); }); 方式二:return false; $("#div1").mousedown(function(event){ return false…

你知道JQuery中的事件冒泡吗，他是怎么执行的，如何来停止冒泡事件？

事件冒泡首先需要知道什么是事件冒泡? 事件冒泡是从里面的往外面开始触发的,就是点击子节点,会向上触发父节点,祖先节点的点击事件 demo: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>4-…

H5手机端底部菜单覆盖中间部分内容的解决办法

一.第一种Js动态计算中间内容的高度. 二.第二种给底部上面写个<div style="底部的高度"></div> 三.第三种给中间部分写一个margin-bottom:底部的高度. 四.第二种实现. <!DOCTYPE html> <html lang="en"> <head> <title>H5页面通用配置</title>  &l…

h5手机端禁止缩放问题

最近测试html5页面,发现默认都允许用户缩放页面,或者在屏幕双击放大或缩小.即相当于这样设置 <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=yes" /> 如果要禁止此情形,修改相应参数即可. <meta content="width=device-width, initial-scale=1.0, maximum-s…

微网站|手机端html弹窗、弹层、提示框、加载条

layer mobile是为移动设备(手机.平板等webkit内核浏览器/webview)量身定做的弹层支撑,采用Native JavaScript编写,完全独立于PC版的layer,您需要按照场景选择使用.GitHub 官网:http://layer.layui.com/mobile/ 本地下载:…

H5手机端按钮点击一次却触发了多次点击事件

方案:在点击事件方法中加入以下语句 event.stopPropagation();…

H5手机端开发问题汇总及解决方案

前言少侠,请留步,相见必是缘分,赠与你一部<踏坑秘籍> 扎马步踏坑第一式 ios竖屏拍照上传,图片被旋转问题解决方案 // 几个步骤 // 1.通过第三方插件exif-js获取到图片的方向 // 2.new一个FileReader对象,加载读取上传的图片 // 3.在fileReader的onload函数中,得到的图片文件用一个Image对象接收 // 4.在image的onload函数中,利用步骤1中获取到的方向orientation,通过canvas旋转校正,重新绘制一张新图 //…

H5手机端开发问题及解决方案

ios竖屏拍照上传,图片被旋转问题 1.通过第三方插件exif-js获取到图片的方向2.new一个FileReader对象,加载读取上传的图片3.在fileReader的onload函数中,得到的图片文件用一个Image对象接收4.在image的onload函数中,利用步骤1中获取到的方向orientation,通过canvas旋转校正,重新绘制一张新图注意iPhone有3个拍照方向需要处理,横屏拍摄,home键在左侧,竖屏拍摄,home建上下5.将绘制的新图转成Blob对象,添加到FormDa…

(转)Jquery弹窗插件Lhgdialog的用法

Lhgdialog的用法大家都知道用js可以实现,但是在使用js实现的弹窗时得考虑很东西:浏览器的兼容.页面的交互等等问题. 在这里简单介绍一下lhgdialog的用法. 参数有: Title:弹窗的上标题: Content:弹窗中的内容(当然可以以一个页面为内容,用URL连接): Ok:弹窗的确定键(可以是function)是布尔类型的: Cancel:取消键(同上): Cancelval:取消键的键值(就是显示的内容): Max:弹窗的最大化键 Min:弹窗的最小化键 Time:可以设定时…

java菜鸟篇<三> Jquery弹窗插件Lhgdialog的用法（原文搬抄+添加，方便以后查找，书签太多了）

今天带我的大神让我做个消息提示,我准备用dialog作,于是乎百度+自己动动脑子百度原文: Lhgdialog的用法大家都知道用js可以实现,但是在使用js实现的弹窗时得考虑很东西:浏览器的兼容.页面的交互等等问题. 在这里简单介绍一下lhgdialog的用法. 参数有: Title:弹窗的上标题: Content:弹窗中的内容(当然可以以一个页面为内容,用URL连接): Ok:弹窗的确定键(可以是function)是布尔类型的: Cancel:取消键(同上): Cancelval:取消键的…

Jquery弹窗插件Lhgdialog的用法

Lhgdialog的用法大家都知道用js可以实现,但是在使用js实现的弹窗时得考虑很东西:浏览器的兼容.页面的交互等等问题. 在这里简单介绍一下lhgdialog的用法. 参数有: Title:弹窗的上标题: Content:弹窗中的内容(当然可以以一个页面为内容,用URL连接): Ok:弹窗的确定键(可以是function)是布尔类型的: Cancel:取消键(同上): Cancelval:取消键的键值(就是显示的内容): Max:弹窗的最大化键 Min:弹窗的最小化键 Time:可以设定时…

jquery弹窗插件

.zhuti { position:absolute; z-index:; font-size:14px; border-radius:5px; box-shadow: 5px white; overflow:hidden; color:#; } .title { background-color:#3498db; vertical-align:middle; height:35px; width:%; line-height:35px; text-indent:1em; } .close{ f…

jquery 弹窗插件 layer 常见接口

源自:https://www.cnblogs.com/teamobaby/p/3556584.html 常见接口如下: 方法名描述 $.layer({}) 核心接口,参数是一个对象,对象属性参见上述列表.诸如layer.alert()之类的为$.layer()的包装方法. layer.v 获取版本号. layer.ready(callback) layer中的样式文件装载完毕后执行的方法,一般用于页面加载时调用layer,这样可避免样式未加载即调用层导致的错乱. 示例: layer.ready…

手机端html5触屏事件(touch事件)

touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时候触发 touchend:触摸结束的时候触发而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点(用来实现多点触控): touches:当前位于屏幕上的所有手指的列表. targetTouches:位于当前DOM元素上手指的列表. changedTouches:涉及当前事件手指的列表. 每个触摸点由包含了如下触摸信息(常用): identifier:一个数值,唯一标识触摸会话(touch ses…

手机端touchstart,touchmove,touchend事件，优化用户划入某个可以点击LI的效果

在我们滑动手机的时候,如果LI或者DIV标签可以点击,那么在移动端给用户一个效果 /*id为添加效果LI上的UL的ID,或者是当前DIV的ID*/ function doTouchPublic(id){ setTimeout(function(){ var obj=document.getElementById(id); touchPublic.tagUltagDiv(obj); },300); }; var touchPublic={ tagUltagDiv:function(obj){ va…

(转)手机端html5触屏事件(touch事件)

本文转载自:http://blog.sina.com.cn/s/blog_51048da70101f0ex.html touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时候触发 touchend:触摸结束的时候触发而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点(用来实现多点触控): touches:当前位于屏幕上的所有手指的列表. targetTouches:位于当前DOM元素上手指的列表. changedTouches:涉及当前事件手指的…

js 手机端触发事事件、javascript手机端/移动端触发事件

处理Touch事件能让你跟踪用户的每一根手指的位置.你可以绑定以下四种Touch事件: touchstart: // 手指放到屏幕上的时候触发 touchmove: // 手指在屏幕上移动的时候触发 touchend: // 手指从屏幕上拿起的时候触发 touchcancel: // 系统取消touch事件的时候触发.至于系统什么时候会取消,不详 //属性 client / clientY:// 触摸点相对于浏览器窗口viewport的位置 pageX / pageY:// 触摸点相对于页面的位…