jQuery 动画弹出窗体支持多种展现方式


Posted in Javascript onApril 29, 2010

jQuery 动画弹出窗体支持多种展现方式
动画效果

从哪个对象上触发的即从该对象开始逐渐向屏幕中间移动,并逐渐展开,展开后里面的显示对象再从上到下慢慢展开。点击关闭时,先将展开的显示的对象慢慢缩回,然后再慢慢移到触发的对象上面。

说的有点绕,我自己都不明白是什么意思,说白了就是从哪儿来回哪儿去。

展现方式

第一种:string

这是最简单最明了的方式,不用多说,就是直接赋值字符串并显示出来。

第二种:ajax

这种是支持ajax的展现,就是异步获取数据并展示出来。

第三种: iframe

顾名思义就是支持嵌套iframe显示。

第四种:controls

这个名字有点不太好理解,就是将页面的某个对象展现出来。比如:document.getElementById("showName");

插件代码实现

(function($){ 
$.alerts = { 
alert : function(o,options){ 
var defaults = { 
title : '标题', 
content : '内容', 
GetType : 'string', //controls,ajax,string,iframe 
IsDrag : true, 
Url : '', 
Data : null, 
width:400, 
height:300, 
callback : function(){} 
} 
var options = $.extend(defaults,options); 
if(!$("#window")[0]) 
{ 
$.alerts._createObject(); 
} 
var position = $.alerts._getPosition(o); 
var winPosition = $.alerts._getWindowPosition(options); 
$("#windowContent").hide(); 
$("#window").css( 
{ 
width:position.w, 
height:position.h, 
top:position.t, 
left:position.l, 
zIndex:1001 
} 
); 
$("#windowBottom,#windowBottomContent").css( 
{ 
height:options.height-30 
} 
); 
$("#windowContent").css( 
{ 
height:options.height - 45, 
width:options.width - 25 
} 
); 
$("#windowTopContent").html(options.title); 
switch(options.GetType){ 
case "string": 
$("#windowContent").html(options.content); 
break; 
case "ajax": 
if(options.Url == ''){ 
alert("AjaxUrl不能为空"); 
return; 
}else{ 
$.ajax( 
{ 
type: "POST", 
url: options.Url, 
data: options.Data, 
success: function(msg){ 
$("#windowContent").html(msg); 
} 
} 
); 
} 
break; 
case "controls": 
$("#windowContent").html(options.content.innerHTML); 
break; 
case "iframe": 
$("#windowContent").empty(); 
$("<iframe>").attr( 
{ 
src : options.Url, 
width:options.width, 
height:options.height 
} 
).appendTo("#windowContent"); 
break; 
} 
$("#window").animate( 
{ 
left:winPosition.l, 
top:winPosition.t, 
height:winPosition.h, 
width:winPosition.w 
},500,function(){ 
//$("#windowContent").fadeIn('slow'); 
$("#windowContent").slideDown(600); 
if($("#middleElement_bgDiv").get().length == 0){ 
$("<div>").attr("id","middleElement_bgDiv").css( 
{ 
position:"absolute", 
left:"0px", 
top:"0px", 
width:$(window).width()+"px", 
height:Math.max($("body").height(),$(window).height())+"px", 
filter:"Alpha(Opacity=40)", 
opacity:"0.4", 
backgroundColor:"#AAAAAA", 
zIndex:"1000", 
margin:"0px", 
padding:"0px" 
} 
).appendTo("body"); 
}else{ 
$("#middleElement_bgDiv").show(); 
} 
} 
); 
$("#windowClose").one("click",function(){ 
$("#windowContent").slideUp(600,function(){ 
$("#window").animate( 
{ 
left:position.l, 
top:position.t, 
height:position.h, 
width:position.w 
},500,function(){ 
$(this).hide(); 
if($("#middleElement_bgDiv").get().length > 0){ 
$("#middleElement_bgDiv").hide(); 
} 
$("#window").css( 
{ 
left:winPosition.l, 
top:winPosition.t, 
height:winPosition.h, 
width:winPosition.w 
} 
); 
} 
); 
}) 
}); 
$("#windowTop").mousedown(function(){ 
$.alerts.Drag( 
document.getElementById("window"), 
{ 
e : event, 
Drag : options.IsDrag 
} 
); 
}); 
}, 
_createObject : function(){ 
$("<div id=\"window\">"+ 
"<div id=\"windowTop\">"+ 
"<div id=\"windowTopContent\">Window example</div>"+ 
"<img src=\"images/window_min.jpg\" id=\"windowMin\" />"+ 
"<img src=\"images/window_max.jpg\" id=\"windowMax\" />"+ 
"<img src=\"images/window_close.jpg\" id=\"windowClose\" />"+ 
"</div>"+ 
"<div id=\"windowBottom\"><div id=\"windowBottomContent\"> </div></div>"+ 
"<div id=\"windowContent\"></div>"+ 
"<img src=\"images/window_resize.gif\" id=\"windowResize\" />"+ 
"</div>").appendTo("body"); 
}, 
_getWindowPosition : function(options){ 
var wPosition = $.alerts._getPosition("#window"); 
var windowPosition = {}; 
windowPosition.t = parseInt($(window).height()/6)+parseInt($(window).scrollTop()); 
windowPosition.l = ($(window).width()+$(window).scrollLeft())/2 - options.width/2; 
windowPosition.w = options.width; 
windowPosition.h = options.height; 
return windowPosition; 
}, 
_getPosition : function(o){ 
var top = $(o).offset().top; 
var left = $(o).offset().left; 
var height = $(o).height(); 
var width = $(o).width(); 
return {t:top,l:left,h:height,w:width}; 
}, 
Drag : function(obj,options){ 
var e = options.e || window.event; 
var Drag = options.Drag; 
if(Drag == false)return; 
var x=parseInt(obj.style.left); 
var y=parseInt(obj.style.top); 
var x_=e.clientX-x; 
var y_=e.clientY-y; 
if(document.addEventListener){ 
document.addEventListener('mousemove', inFmove, true); 
document.addEventListener('mouseup', inFup, true); 
} else if(document.attachEvent){ 
document.attachEvent('onmousemove', inFmove); 
document.attachEvent('onmouseup', inFup); 
} 
inFstop(e); 
inFabort(e); 
function inFmove(e){ 
var evt; 
if(!e)e=window.event; 
obj.style.left=e.clientX-x_+'px'; 
obj.style.top=e.clientY-y_+'px'; 
inFstop(e); 
} 
function inFup(e){ 
var evt; 
if(!e)e=window.event; 
if(document.removeEventListener){ 
document.removeEventListener('mousemove', inFmove, true); 
document.removeEventListener('mouseup', inFup, true); 
} else if(document.detachEvent){ 
document.detachEvent('onmousemove', inFmove); 
document.detachEvent('onmouseup', inFup); 
} 
inFstop(e); 
} 
function inFstop(e){ 
if(e.stopPropagation) return e.stopPropagation(); 
else return e.cancelBubble=true; 
} 
function inFabort(e){ 
if(e.preventDefault) return e.preventDefault(); 
else return e.returnValue=false; 
} 
} 
} 
JAlert = function(o,json){ 
$.alerts.alert(o,json); 
}; 
})(jQuery);

调用代码
$(function(){ 
$("a").each(function(){ 
$(this).bind("click",function(){ 
JAlert(this,{ 
title : '提示窗体', 
content : $("#msg")[0].outerHTML, 
GetType : 'string', //controls,ajax,string,iframe 
IsDrag : true, 
Url : "windows.html", 
Data : null, 
width:300, 
height:200 
}); 
}); 
}); 
});

使用说明:

title: 窗体标题

content:取决于GetType属性,如果GetType='string',那么content就是要显示的内容,如果GetType='controls',那么content则为要显示的DOM对象。其它两个类型可不用填写。

GetType:展现的四种类型:string,iframe,ajax,controls

IsDrag:是否支持拖拽

Url: 同样取决于GetType属性,如果GetType='ajax',那么Url就是请求的URL地址,如果GetType='iframe',那么URL就是iframe的链接地址。其它两个类型不用填写

Data:当GetType='ajax'时,Data属性为请求的数据。

width:显示层的宽度

height:显示层的高度

HTML代码

<body> 
<a href="javascript:void(0);" id="windowOpen1">Open window</a> 
<a href="javascript:void(0);" id="windowOpen2">Open window</a> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
<a href="javascript:void(0);" id="windowOpen3">Open window</a> 
<div id="msg" style="font-size:16px;padding-top:16px;line-height:25px;">    欢迎访问《<a href="http://3water.com" target="_blank">三水点靠木</a>》的网站,希望与大家一起探讨技术问题,共同实现各自的梦想!<br/><br/>网址:http://3water.com</div> 
</body>

打包下载地址
Javascript 相关文章推荐
JS支持带x身份证号码验证函数
Aug 10 Javascript
网页中的图片的处理方法与代码
Nov 26 Javascript
如何用ajax来创建一个XMLHttpRequest对象
Dec 10 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
Apr 29 Javascript
Javascript 闭包详解及实例代码
Nov 30 Javascript
如何写好你的JavaScript【推荐】
Mar 02 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
Jul 18 Javascript
JavaScript多线程运行库Nexus.js详解
Dec 22 Javascript
vue项目中mock.js的使用及基本用法
May 22 Javascript
javascript实现动态时钟的启动和停止
Jul 29 Javascript
JS浏览器BOM常见操作实例详解
Apr 27 Javascript
vuex的使用和简易实现
Jan 07 Vue.js
jQuery 工具函数学习资料
Apr 29 #Javascript
IE JS无提示关闭窗口不提示的方法
Apr 29 #Javascript
比Jquery的document.ready更快的方法
Apr 28 #Javascript
ExtJS Store的数据访问与更新问题
Apr 28 #Javascript
JS 事件绑定函数代码
Apr 28 #Javascript
javaScript checkbox 全选/反选及批量删除
Apr 28 #Javascript
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
Apr 27 #Javascript
You might like
php设计模式 Visitor 访问者模式
2011/06/28 PHP
基于递归实现的php树形菜单代码
2014/11/19 PHP
php 一维数组的循环遍历实现代码
2017/04/10 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
js变量作用域及可访问性的探讨
2006/11/23 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
2012/10/11 Javascript
jquery复选框全选/取消示例
2013/12/30 Javascript
关于Javascript 对象(object)的prototype
2014/05/09 Javascript
Javascript模拟加速运动与减速运动代码分享
2014/12/11 Javascript
js检测用户输入密码强度
2015/10/22 Javascript
bootstrap导航、选项卡实现代码
2016/12/28 Javascript
使用DeviceOne实现微信小程序功能
2016/12/29 Javascript
JavaScript字符集编码与解码详谈
2017/02/02 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
2017/04/11 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
2017/11/01 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
2018/04/04 Javascript
angularJs select绑定的model取不到值的解决方法
2018/10/08 Javascript
Nginx设置为Node.js的前端服务器方法总结
2019/03/27 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
2019/08/23 Javascript
python快速排序代码实例
2013/11/21 Python
在Django框架中伪造捕捉到的URLconf值的方法
2015/07/18 Python
Python3实现简单可学习的手写体识别(实例讲解)
2017/10/21 Python
Django admin.py 在修改/添加表单界面显示额外字段的方法
2019/08/22 Python
安装多个版本的TensorFlow的方法步骤
2020/04/21 Python
python3中的logging记录日志实现过程及封装成类的操作
2020/05/12 Python
使用HTML5和CSS3制作一个模态框的示例
2018/03/07 HTML / CSS
韩国休闲女装品牌网站:ANAIS
2016/08/24 全球购物
大学生学习自我评价
2014/01/13 职场文书
融资租赁计划书
2014/04/29 职场文书
企业标语口号
2014/06/10 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书
写给老师的保证书
2015/05/09 职场文书
毕业实习单位意见
2015/06/04 职场文书
王亚平太空授课观后感
2015/06/12 职场文书
2016中考冲刺决心书
2015/09/22 职场文书
基于python的matplotlib制作双Y轴图
2021/04/20 Python