欢迎您来到懒之才-站长的分享平台!   学会偷懒,并懒出境界是提高工作效率最有效的方法!
首页 > 教程文档 > Jquery > 五.弹出层对话框

五.弹出层对话框

2018-05-07 505 收藏 0 赞一个 0 真差劲 0 去评论

弹出框是最常用最实用的功能.  先来看一下艺龙网上的一些应用场景.

1. 艺龙网应用场景举例

(1) 静态提示类弹出层. 弹出层的内容是固定的.

20150116063829_27778.png

(2) 动态提示类弹出层. 弹出层内容是根据事件源变化的.

20150116063943_35653.png

(3)遮罩类弹出层. 弹出时背景变灰并不可点击.

20150116063954_10716.png

2. 应用实例

使用 jQuery UI 的 Dialog 组件. 我以轻松实现上面三种效果.

Dialog组件的主要特点是可以拖动(Draggable), 可以改变大小(Resizable) .

示例完整代码如下:

<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headid="Head1"runat="server">
<title>jQuery UI - 弹出层应用实例 Dialog</title>
<!--black-tie,blitzer,blitzer,dot-luv,excite-bike,hot-sneaks,humanity,mint-choc,redmond,smoothness,south-street,start,swanky-purse,trontastic,ui-darkness,ui-lightness,vader-->
<linkrel="stylesheet"type="text/css"href="<%=WebConfig.ResourceServer +"/JsLib/jquery/themes/redmond/style.css"%>" />
<scripttype="text/javascript"src="<% =WebConfig.ResourceServer %>/JsLib/jquery/jquery-min-lastest.js"></script>
<scriptsrc="<% =WebConfig.ResourceServer %>/JsLib/jquery/ui/jquery-ui-all-min-lastest.js"type="text/javascript"></script>
<% if (false)  
{%><scriptsrc="~/js/jquery-vsdoc-lastest.js"type="text/javascript"></script>
<% }%>
<scripttype="text/javascript">
/*========== 必须放在头部加载的语句块. 尽量避免使用 ==========*/  
</script>
<styletype="text/css">
</style>
</head>
<body>
<!-- Demo 静态提示类弹出层 -->
<divclass="ui-widget ui-widget-content ui-corner-all"style="width: 700px; padding: 5px;">
<h3>Demo. 共享同一个静态弹出层, 弹出层内容固定: </h3>
<div>
<spanid="spanShowTip1">显示提示</span>&nbsp;&nbsp; <spanid="spanShowTip2">显示提示</span>&nbsp;&nbsp;  
<spanid="spanShowTip3">显示提示</span>&nbsp;&nbsp; <spanid="spanShowTip4">显示提示</span>&nbsp;&nbsp;  
</div>
</div>
<br/>
<br/>
<!-- Demo 动态提示类弹出层 -->
<divclass="ui-widget ui-widget-content ui-corner-all"style="width: 700px; padding: 5px;">
<h3>Demo. 每个弹出层内容不同, 弹出层内容存储在事件源的元素属性中: </h3>
<div>
<spanid="spanShowDataTip1"data="颜色是红色">红色</span>&nbsp;&nbsp;  
<spanid="spanShowDataTip2"data="颜色是绿色">绿色</span>&nbsp;&nbsp;  
</div>
</div>
<br/>
<br/>
<!-- Demo 遮罩类弹出层 -->
<divclass="ui-widget ui-widget-content ui-corner-all"style="width: 700px; padding: 5px;">
<h3>Demo. 弹出IFrame </h3>
<div>
<inputtype="button"id="btnShowIframe"name="btnShowIframe"value="显示弹出层"/>
</div>
</div>
<!-- 提示类弹出层 -->
<divid="divTip"title="自定义标题">
<p>弹出层</p>
</div>
<!-- 遮罩类弹出层 -->
<divid="divIframe"title="iFrame弹出层"style="text-align:center;">
<iframesrc="http://www.elong.com"width="450px"height="230px"></iframe>
</div>
<scripttype="text/javascript">
/*==========用户自定义方法==========*/  
/*==========事件绑定==========*/  
$(function()  
{  
//静态提示类弹出层  
$("span[id^=spanShowTip]").css("cursor", "pointer").click(function(event)  
{  
$("*").stop();  
event.stopPropagation();  
var top = $(event.target).offset().top + 20;  
var left = $(event.target).offset().left;  
$("#divTip").dialog("option", "position", [left, top]);  
$("#divTip").dialog("open");  
});  
//动态提出类弹出层  
$("span[id^=spanShowDataTip]").css("cursor", "pointer").click(function(event)  
{  
$("*").stop();  
$("#divTip").dialog("close");  
event.stopPropagation();  
var top = $(event.target).offset().top + 20;  
var left = $(event.target).offset().left;  
$("#divTip").html($(event.target).attr("data"));  
$("#divTip").dialog("option", "position", [left, top]);  
$("#divTip").dialog("open");  
});  
//遮罩类弹出层  
$("#btnShowIframe").click(function(event)  
{  
event.preventDefault();  
event.stopPropagation();  
$("#divIframe").dialog("open");  
});  
//单击自身取消冒泡  
$("#divTip, #divIframe").bind("click", function(event)  
{  
event.stopPropagation();  
});  
//document对象单击隐藏所有弹出层  
$(document).bind("click", function(event)  
{  
$("#divTip").dialog("close");  
$("#divIframe").dialog("close");  
});  
});  
/*==========加载时执行的语句==========*/  
$(function()  
{  
//初始化提示类弹出层  
$("#divTip").dialog({  
show: null,  
bgiframe: false,  
autoOpen: false  
});  
//初始化遮罩类弹出层  
$("#divIframe").dialog({  
show: null,  
bgiframe: false,  
autoOpen: false,  
width: 500,  
height: 300,  
draggable: true,                  
resizable: false,  
modal: true  
});              
});  
</script>
</body>
</html>

效果如图:

静态提示类弹出层

20150116064256_36262.png

动态提示类弹出层:

20150116064318_12491.png

遮罩类弹出层:

20150116064338_18723.png

3.关键点讲解

(1)计算弹出层位置

提示类弹出框最重要的是计算弹出框的位置. 通过事件对象获取到事件源, 使用offset()函数计算事件源相对于document的位置:

var top = $(event.target).offset().top;  
var left = $(event.target).offset().left;

因为是相对于document, 即页面左上角的位置, 所以需要将弹出层放在Body元素中的第一层. 即父类就是body. 如果包含在其他元素中, 需要确定任何一个父类的position样式设置为了relative.

计算出来的top和left是事件源的位置, 在此位置显示会将事件源对象遮盖住. 所以通常需要手工做一些偏移, 比如top+20.

(2) 取消冒泡和浏览器默认行为

如果我们为document对象绑定了单击后关闭弹出层的事件, 那么就一定要取消事件的冒泡. 使用event对象的stopPropagation()方法可以取消冒泡.

event.stopPropagation();

对于具有默认行为的元素,比如提交按钮的提交表单行为, <a>元素的超链接行为等, 我们如果在这些元素上应用事件, 还需要取消它们的默认行为:

event.preventDefault();

(3) 设置动画效果与取消动画

通过设置dialog的配置项的show属性, 可以设置显示dialog时候的动画效果:

$('.selector').dialog({ show: 'slide' });

show默认为null即无动画,  可以是使用下列值:

'blind', 'clip', 'drop', 'explode', 'fold', 'puff', 'slide', 'scale', 'size', 'pulsate'.

对于这些动画的效果, 可以在此页观看:

http://jqueryui.com/demos/show/

当一个动画效果执行时, 如果用户在此对这个元素进行操作, 就会出现各种问题, 比如定位不准确等. 所以如果应用了动画, 我们在对其操作时需要使用stop()函数来停止动画, 通常是停止虽有元素的动画:

$("*").stop();

但是即使停止了动画再进行操作, 如果操作的太快也容易产生问题. 所以至于是否使用动画需要经过权衡决定.

(4) 动态提示类弹出层的数据传递

动态提示类弹出层的数据是不同的,  本文实例使用的是将数据存储在元素属性data上:

<span id="spanShowDataTip1"data="颜色是红色">红色</span>

这是一种简单直观的方式. 比较容易编程实现(尤其是在使用MVC编程模型的时候.)

还有一种常用方式是使用javascript变量存储数据.这两种方式在第5章时有过讲解:

http://www.cnblogs.com/zhangziqiu/archive/2009/05/06/jQuery-Learn-5.html

(5)更换主题

大家注意实例中的弹出层没有为其编辑任何样式, 但是显示出来后已经被美化过了. 这是因为我引用了jQuery UI的主题:

<!--black-tie,blitzer,blitzer,dot-luv,excite-bike,hot-sneaks,humanity,mint-choc,redmond,smoothness,south-street,start,swanky-purse,trontastic,ui-darkness,ui-lightness,vader-->  
<link rel="stylesheet" type="text/css" href="<%=WebConfig.ResourceServer +"/JsLib/jquery/themes/redmond/style.css"%>" />

注释中有很多的主题, 只需要将引用路径中的"redmond"改为其中任何一个, 弹出层的样式会立刻发生变化.

VS中有一个Bug, 就是针对link标签, href中的语句块编译有问题, 某些情况下<%%>不被编辑解析. 所以我使用上面代码中的方式构造href属性值.

可以在下面的地址查看各个主题的效果:

http://jqueryui.com/themeroller/#themeGallery

返回主目录
暂无界面图片

一、推荐使用迅雷或快车等多线程下载软件下载本站资源。

二、未登录会员无法下载,登录后可获得更多便利功能,若未注册,请先注册。

三、如果服务器暂不能下载请稍后重试!总是不能下载,请点我报错 ,谢谢合作!

四、本站大部分资源是网上搜集或私下交流学习之用,任何涉及商业盈利目的均不得使用,否则产生的一切后果将由您自己承担!本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益,请速与我们联系,我们将尽快处理.

五、如有其他问题,请加网站设计交流群(点击这里查看交流群 )进行交流。

六、如需转载本站资源,请注明转载来自并附带链接

七、本站部分资源为加密压缩文件,统一解压密码为:www.aizhanzhe.com

大家评论