[原创]jQuery动画弹出窗体支持多种展现方式
今天刚写的利用jQuery动画弹出窗体，支持了string、Ajax、iframe、controls四种展现方式，具体细节下面慢慢介绍，先看效果图
http://pic002.cnblogs.com/img/lewis/201004/2010042916331571.jpg
今天刚写的利用jQuery动画弹出窗体，支持了string、Ajax、iframe、controls四种展现方式，具体细节下面慢慢介绍，先看效果图。
动画效果
从哪个对象上触发的即从该对象开始逐渐向屏幕中间移动，并逐渐展开，展开后里面的显示对象再从上到下慢慢展开。点击关闭时，先将展开的显示的对象慢慢缩回，然后再慢慢移到触发的对象上面。
说的有点绕，我自己都不明白是什么意思，说白了就是从哪儿来回哪儿去。
展现方式
第一种：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(event){
$.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://lewis.cnblogs.com" target="_blank">山高我为峰</a>》的博客,希望与大家一起探讨技术问题，共同实现各自的梦想！<br/><br/>网址：http://lewis.cnblogs.com</div>
</body>
样式
代码
<style type="text/css" media="all">
body
{
background: #fff;
height: 100%;
}
#window
{
position: absolute;
left: 200px;
top: 100px;
width: 400px;
/*height: 300px;*/
overflow: hidden;
display: none;
}
#windowTop
{
height: 30px;
overflow: 30px;
background-image: url(images/window_top_end.png);
background-position: right top;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
cursor: move;
}
#windowTopContent
{
margin-right: 13px;
background-image:url(images/window_top_start.png);
background-position:left top;
background-repeat: no-repeat;
overflow: hidden;
height: 30px;
line-height: 30px;
text-indent: 10px;
font-family:Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 14px;
color: #6caf00;
}
#windowMin
{
position: absolute;
right: 25px;
top: 10px;
cursor: pointer;
}
#windowMax
{
position: absolute;
right: 25px;
top: 10px;
cursor: pointer;
display: none;
}
#windowClose
{
position: absolute;
right: 10px;
top: 10px;
cursor: pointer;
}
#windowBottom
{
position: relative;
height: 270px;
background-image: url(images/window_bottom_end.png);
background-position: right bottom;
background-repeat: no-repeat;
}
#windowBottomContent
{
position: relative;
height: 270px;
background-image: url(images/window_bottom_start.png);
background-position: left bottom;
background-repeat: no-repeat;
margin-right: 13px;
}
#windowResize
{
position: absolute;
right: 3px;
bottom: 5px;
cursor: se-resize;
}
#windowContent
{
position:absolute;
top: 30px;
left: 10px;
width: auto;
height: auto;
overflow: auto;
margin-right: 10px;
border: 1px solid #6caf00;
height: 255px;
width: 375px;
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
background-color: #fff;
}
#windowContent *
{
margin: 10px;
}
</style>
待完成
还有两项功能没完成，一个是最小化，还有一个拖动大小。
好了，代码贴完了，有兴趣的朋友可下载试试。
