您的位置:知识库 » Web前端

jQuery Dialog 弹出层对话框插件

作者: caixw  发布时间: 2010-09-05 13:15  阅读: 11596 次  推荐: 0   原文链接   [收藏]  
摘要:网上这种插件很多,但是没一个合适的,大部分都做得很大,功能齐全。于是作者自己做了这个小插件,读者可以顺便学习下jQuery插件的写法。

  原理很简单,通过JS动态构建一个div层,将其插入到body中,然后通过调整position的CSS属性为absolutefixed,使其脱离原来的文档流的位置。再通过适当的加工美化就成了。

1 <!-- 背景遮盖层 -->
2 <div class="dialog-overlay"></div>
3 <!-- 对话框 -->
4 <div class="dialog">
5 <div class="bar">
6 <span class="title">标题</span>
7 <a class="close">[关闭]</a>
8 </div>
9 <div class="content">内容部分</div>
10 </div>

这就是两个div层的结构,第一个背景遮盖层只有在需要的时候才创建。每个div都定义了一个CSS类,这样便于自定义其外观。

一些基本功能的实现

移动框体

只要在mousemove事件中,计算两次移动鼠标位置的差值,再加上被移动框的原始的top,left,就是对话框新的位置。mousemove事件只需要在鼠标按下标题栏的时候才需要触发,所以只有在触发标题栏的mousedown事件时才绑定mousemove事件,而鼠标释放时也同时解除mousemove的绑定。

mousemove和解除绑定mousemove事件的mouseup却没有绑定到标题栏上,而是document上,之所以这样,是因为有时鼠标移动过快时,会移出标题栏范围,此时若是绑定到标题栏上的事件就会失效,而绑定到document就不会。

1 var mouse={x:0,y:0};
2 function moveDialog(event)
3 {
4 var e = window.event || event;
5 var top = parseInt(dialog.css('top')) + (e.clientY - mouse.y);
6 var left = parseInt(dialog.css('left')) + (e.clientX - mouse.x);
7 dialog.css({top:top,left:left});
8 mouse.x = e.clientX;
9 mouse.y = e.clientY;
10 };
11 dialog.find('.bar').mousedown(function(event){
12 var e = window.event || event;
13 mouse.x = e.clientX;
14 mouse.y = e.clientY;
15 $(document).bind('mousemove',moveDialog);
16 });
17 $(document).mouseup(function(event){
18 $(document).unbind('mousemove', moveDialog);
19 });

定位

居中定位很容易实现,IE下的clientWidth, offsetWidth等一系列属性和其它浏览器好像有点不一样,所以不要用这些属性,可以直接用jQuery下的width()函数:

1 var left = ($(window).width() - dialog.width()) / 2;
2  var top = ($(window).height() - dialog.height()) / 2;
3 dialog.css({top:top,left:left});

IE6下并没有fixed模式,但是能通过window.onscroll事件模拟实现:

1 // top 对话框到可视区域顶部位置的距离。
2 var top = parseInt(dialog.css('top')) - $(document).scrollTop();
3 var left = parseInt(dialog.css('left')) - $(document).scrollLeft();
4 $(window).scroll(function(){
5 dialog.css({'top':$(document).scrollTop() + top,'left':$(document).scrollLeft() + left});
6 });

z-index

为了能实现多个对话框并存,采用了一个静态的zIndex变量,每次创建新对话框时,都实现一次自增操作,并将新值赋值给新创建的对话框的z-index,这样就能保证最后创建的对话框总在最前面。

对外接口

  插件通过以下的方式调用:

1 var dlg = new Dialog(content, options);
2 dlg.show();

  当然如果只是一般的使用,可以更简单一些:

1 new Dialog(content, options).show();
2  // 或是
3  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行为和外观的具体设置:

选项
名称描述默认值
title 标题栏的文本 标题
closeText 关闭按钮文字 [关闭]
showTitle 是否显示标题栏,若为否,则标题和关闭按钮都将不显示。 true
draggable 是否可以拖动框体。 true
modal 模态对话框,若为是,则不可操作背景层。 true
center 是否居中显示,若为否,则通过CSS中的内容进行定位。 true
fixed 对话框是否跟随滚动条移动。 true
time 自动关闭对话框时间,单位毫秒,若为0,表示不会自动关闭。 0
id 对话框的ID。若为false,则表示自动产生。 false
回调函数
名称描述返回值类型
beforeShow 在显示之前调用,若返回false,则不显示对话框。 bool
afterShow 显示之后调用。
beforeHide 在隐藏之前调用,若返回false,则不隐藏对话框。 bool
afterHide 隐藏之后调用。
beforeClose 在关闭之前调用,若返回false,则不关闭对话框。 bool
afterClose 关闭之后调用。

自定义CSS

插件为对话框的每一个部分都提供了一个CSS类名,很容易实现CSS的自定义:

类名描述
.dialog-overlay 模态对话框时,的背景遮盖层。
.dialog 对话框的CSS。
.dialog .bar 标题栏的CSS。包含了标题和关闭按钮。
.dialog .bar .title 标题栏的标题部分。
.dialog .bar .close 标题栏的关闭按钮部分。
.dialog .content 内容部分。

你可以直接修改这些CSS类,进行全局的修改,也可以通过id加类名的方式修改某一个对话框。

1 /* 只修改id为#dialog的对话框。 */
2 #dialog1 .bar
3  {
4 text-transform:lowercase;
5  }

 

1 // 通过id属性指定对话框的id。
2  new Dialog('text',{id:'dialog1'});

具体的演示程序在这里:演示程序

0
1
 

Web前端热门文章

    Web前端最新文章

      最新新闻

        热门新闻