- 浏览: 930818 次
- 性别:
- 来自: 山西
文章分类
最新评论
-
白小默:
你好 可以提供下源码DEMO吗,不知为何,我导出来的excel ...
jxls 使用模板文件导出生成excel -
zkzqzzz:
博主威武!
让微信二维码扫描您的APK -
zkzqzzz:
感谢博主 原来那些类都不是必须的 或者自己写!!博主真棒 ...
抢红包插件实现原理浅析 -
zkzqzzz:
博主 请问你的其他类在哪里呢?
抢红包插件实现原理浅析 -
zkzqzzz:
其他类在哪呢?
抢红包插件实现原理浅析
网上这种插件很多,但是没一个合适的,大部分都做得很大,功能齐全。于是自己做了这个小插件,顺便学习下jQuery插件的写法。
具体的演示程序在这里:演示程序。
原理很简单,通过JS动态构建一个div
层,将其插入到body
中,然后通过调整position
的CSS属性为absolute
或fixed
,使其脱离原来的文档流的位置。再通过适当的加工美化就成了。
<!-- 背景遮盖层 --> <div class="dialog-overlay"></div> <!-- 对话框 --> <div class="dialog"> <div class="bar"> <span class="title">标题</span> <a class="close">[关闭]</a> </div> <div class="content">内容部分</div> </div>
这就是两个div
层的结构,第一个背景遮盖层只有在需要的时候才创建。每个div
都定义了一个CSS类,这样便于自定义其外观。
一些基本功能的实现
移动框体
只要在mousemove
事件中,计算两次移动鼠标位置的差值,再加上被移动框的原始的top,left
,就是对话框新的位置。mousemove
事件只需要在鼠标按下标题栏的时候才需要触发,所以只有在触发标题栏的mousedown
事件时才绑定mousemove
事件,而鼠标释放时也同时解除mousemove
的绑定。
mousemove
和解除绑定mousemove
事件的mouseup
却没有绑定到标题栏上,而是document
上,之所以这样,是因为有时鼠标移动过快时,会移出标题栏范围,此时若是绑定到标题栏上的事件就会失效,而绑定到document
就不会。
var mouse={x:0,y:0}; function moveDialog(event) { var e = window.event || event; var top = parseInt(dialog.css('top')) + (e.clientY - mouse.y); var left = parseInt(dialog.css('left')) + (e.clientX - mouse.x); dialog.css({top:top,left:left}); mouse.x = e.clientX; mouse.y = e.clientY; }; dialog.find('.bar').mousedown(function(event){ var e = window.event || event; mouse.x = e.clientX; mouse.y = e.clientY; $(document).bind('mousemove',moveDialog); }); $(document).mouseup(function(event){ $(document).unbind('mousemove', moveDialog); });
定位
居中定位很容易实现,IE下的clientWidth, offsetWidth
等一系列属性和其它浏览器好像有点不一样,所以不要用这些属性,可以直接用jQuery下的width()
函数:
var left = ($(window).width() - dialog.width()) / 2; var top = ($(window).height() - dialog.height()) / 2; dialog.css({top:top,left:left});
IE6下并没有fixed模式,但是能通过window.onscroll
事件模拟实现:
// top 对话框到可视区域顶部位置的距离。 var top = parseInt(dialog.css('top')) - $(document).scrollTop(); var left = parseInt(dialog.css('left')) - $(document).scrollLeft(); $(window).scroll(function(){ dialog.css({'top':$(document).scrollTop() + top,'left':$(document).scrollLeft() + left}); });
z-index
为了能实现多个对话框并存,采用了一个静态的zIndex变量,每次创建新对话框时,都实现一次自增操作,并将新值赋值给新创建的对话框的z-index
,这样就能保证最后创建的对话框总在最前面。
对外接口
插件通过以下的方式调用:
var dlg = new Dialog(content, options); dlg.show();
当然如果只是一般的使用,可以更简单一些:
new Dialog(content, options).show(); // 或是 dialog(content, options);
还可以通过以下四个函数,对插件进行进一步的控制:
- show():显示对话框
- hide():隐藏对话框,但并不删除对话框内的内容。
- close():关闭对话框,彻底删除其内容。
- setContent(content):改变对话框内的内容。
构造函数的参数
构造函数有两个参数。content和options。content表示对话框的内容;options表示对话框的各个配置选项。
content可以是一个字符串,表示显示的内容。或是一个Object
类型,若是Object
类型,则需要包含以下两个属性:type和value。type表示数据类型,而value则是type对应的内容。type接受以下几种类型:
- id:显示某一ID的内容,但并不包含此ID本身的内容。value对应为某一HTML元素的ID值。
- img:显示一张图片。value对应为图片的uri。
- url:通过ajax方式显示某一URL的内容,所以必需要在同一域名下。value为对应的URL地址。
- iframe:将一URL指定的内容显示到iframe中,它去除了AJAX调用的一些限制(相同域名,返回的HTML代码中不能包含head头等。)。value为对应的URL。
options则是对Dialog行为和外观的具体设置:
选项 | |
标题栏的文本 | 标题 |
关闭按钮文字 | [关闭] |
是否显示标题栏,若为否,则标题和关闭按钮都将不显示。 | true |
是否可以拖动框体。 | true |
模态对话框,若为是,则不可操作背景层。 | true |
是否居中显示,若为否,则通过CSS中的内容进行定位。 | true |
对话框是否跟随滚动条移动。 | true |
自动关闭对话框时间,单位毫秒,若为0,表示不会自动关闭。 | 0 |
对话框的ID。若为false,则表示自动产生。 | false |
回调函数 | |
在显示之前调用,若返回false,则不显示对话框。 | bool |
显示之后调用。 | 无 |
在隐藏之前调用,若返回false,则不隐藏对话框。 | bool |
隐藏之后调用。 | 无 |
在关闭之前调用,若返回false,则不关闭对话框。 | bool |
关闭之后调用。 | 无 |
自定义CSS
插件为对话框的每一个部分都提供了一个CSS类名,很容易实现CSS的自定义:
模态对话框时,的背景遮盖层。 |
对话框的CSS。 |
标题栏的CSS。包含了标题和关闭按钮。 |
标题栏的标题部分。 |
标题栏的关闭按钮部分。 |
内容部分。 |
你可以直接修改这些CSS类,进行全局的修改,也可以通过id加类名的方式修改某一个对话框。
/* 只修改id为#dialog的对话框。 */ #dialog1 .bar { text-transform:lowercase; }
// 通过id属性指定对话框的id。 new Dialog('text',{id:'dialog1'});
具体的演示程序在这里:演示程序。
- jQuery_Dialog-加载一URL地址.rar (92.6 KB)
- 下载次数: 161
发表评论
-
博客园首页新随笔联系管理订阅 随笔- 14 文章- 1 评论- 0 利用jquery mobiscroll插件选择日期、select、treeList的具
2017-09-05 10:05 505mobiscroll是个很好用的用于移动端滑动选择的插件,可 ... -
Jquery autocomplete插件的使用示例
2017-02-21 15:04 487简单用法: <%@ page languag ... -
jQuery Tags Input Plugin(添加/删除标签插件)
2017-02-21 09:33 717看名字应该知道是干嘛用了吧。 一个jquery开发的标签功 ... -
轻松搞定JSONP跨域请求
2017-02-07 17:04 376一、同源策略 要理解 ... -
基于MVC4+EasyUI的Web开发框架经验总结(1)-利用jQuery Tags Input 插件显示选择记录
2016-06-29 14:30 530最近花了不少时间在 ... -
基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理
2016-06-29 14:28 614最近一直很多事情, ... -
对象数组排序,利用jquery
2015-12-17 10:54 340<!DOCTYPE HTML PUBLIC " ... -
HTML 5 学习之应用程序缓存
2015-12-12 21:22 480什么是应用程序缓存(Application Cache)? ... -
html5移动web开发小记
2015-12-12 21:19 643一、配置移动开发环境 1.各种仿真器、模拟器的下载安装 ht ... -
phonegap+jqmobi仿照新浪app左右滑动页面切换解决方案
2015-04-02 21:56 1243免费Jqmobi+phonegap入门视频 h ... -
Lazy Load, 延迟加载图片的 jQuery 插件
2014-05-06 17:04 614本文翻译自 Lazy Load Plugin for j ... -
8款网页瀑布流布局插件(很不错的效果)
2014-05-06 11:50 13911、waterfall-Jquery瀑布流插件 ... -
国内部分瀑布流网站
2014-05-06 11:35 580Pinterest是最早使用瀑布流的鼻祖,如今瀑布流逐 ... -
jqMobi中Side Menu实现
2014-04-14 10:45 618记得以前在做Native App的时候类似于人人网侧边滑动的 ... -
jqMobi插件ActionSheet
2014-04-14 10:43 697现在在手机客户端上Action Sheet非常常见,比如微信 ... -
jqMobi插件json格式ActionSheet
2014-04-14 10:42 675在上一篇中我们学会了ActionSheet的使用,细心的朋友 ... -
设计漂亮的日历控件含图含源码
2012-01-09 16:32 816设计漂亮的日历选取 -
js加载倒计时
2011-11-30 09:15 1061<script> var loadt ... -
js中SetInterval与setTimeout用法
2011-11-29 11:18 840s中SetInterval与setTimeout用 ... -
jquery ajax 详解
2011-11-28 16:31 728When Ajax meets jQuery 基 ...
相关推荐
jQuery Dialog弹出层对话框插件演示,简单的那种,看上去比较不错,下面说一下用法: 基本操作 默认的 new Dialog(‘这是一个默认对话框‘).show(); 非模态对话框 new Dialog(‘非模态对话框,可以打开多个.,{modal...
Dialog基于jQuery弹出层对话框插件.zip
jQuery dialog对话框插件点击弹出对话框代码 jQuery dialog对话框插件点击弹出对话框代码
jquery dialog css3弹出对话框插件实例 jquery dialog css3弹出对话框插件实例
简单的jquery dialog实现插件,使用简单,自行修改样式
jQuery对话框Dialog弹出层插件演示与使用说明
jquery dialog对话框插件制作蓝色的弹出消息对话框代码
原理很简单,通过JS动态构建一个div层,将其插入到body中,然后通过调整position的CSS属性为...– 对话框 –> ”dialog”> ”bar”> ”title”>标题</span> [关闭]</a> </div> ”content”>内容部分</div> </d
基于 jquery 项目中 用到的dialog弹出层 一种弹出层
18、jQuery弹出对话框jQuery插件Dialog
jQuery Modal Dialog弹出对话框插件,可用它实现各种的网页提示效果,比如错误提示框、警告框、操作提示框等,暖色调界面,使用方法简单,参考本例所展示的各种提示框生成办法,就可上手。
通用jQuery对话框dialog或popup弹出层或提示窗口插件
dialog.js是一款移动端优先且同时支持jQuery和Zepto的模态对话框插件。它支持三种类型的弹出对话框,支持自定义按钮,文字等,并支持事件监听。
jQuery扁平风格对话框插件Dialogbox是一款简约的对话框界面,多种对话框状态,错误提示,成功提示,警告提示,确认提示,Prompt对话框等,支持回调。
前几天我们刚刚分享过一款带遮罩的jQuery弹出层对话框,非常实用。今天我们要再介绍一款扁平化风格的jQuery对话框插件Dialogbox,Dialogbox同样有多重对话框类型,包括提示框、确认框、带选择的提示框等,是一款很...
一个不错的弹出对话框,支持多种需求,解决js跨域调用问题,有demo
jQuery通用dialog对话框 popup提示信息窗口插件demo
jQuery Dialog 弹出层案例,页面代码已经改写,引入js和css页面添加一个div即可。下载包里面有案例