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

jQuery 动画弹出窗体支持多种展现方式_jquery
动画效果
　　从哪个对象上触发的即从该对象开始逐渐向屏幕中间移动，并逐渐展开，展开后里面的显示对象再从上到下慢慢展开。点击关闭时，先将展开的显示的对象慢慢缩回，然后再慢慢移到触发的对象上面。
　　说的有点绕，我自己都不明白是什么意思，说白了就是从哪儿来回哪儿去。
　　展现方式
　　　　第一种：string
　　　　这是最简单最明了的方式，不用多说，就是直接赋值字符串并显示出来。
　　　　第二种：ajax
　　　　这种是支持ajax的展现，就是异步获取数据并展示出来。
　　　　第三种: iframe
　　　　顾名思义就是支持嵌套iframe显示。
　　　　第四种：controls
　　　　这个名字有点不太好理解，就是将页面的某个对象展现出来。比如：document.getElementById("showName");
　　插件代码实现

Browse AI

AI驱动的网页内容抓取和数据采集工具

105

查看详情

复制代码代码如下:

 
(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(); 
$("").attr( <br>{ <br>src : options.Url, <br>width:options.width, <br>height:options.height <br>} <br>).appendTo("#windowContent"); <br>break; <br>} <br>$("#window").animate( <br>{ <br>left:winPosition.l, <br>top:winPosition.t, <br>height:winPosition.h, <br>width:winPosition.w <br>},500,function(){ <br>//$("#windowContent").fadeIn('slow'); <br>$("#windowContent").slideDown(600); <br>if($("#middleElement_bgDiv").get().length == 0){ <br>$("<div>").attr("id","middleElement_bgDiv").css( <br>{ <br>position:"absolute", <br>left:"0px", <br>top:"0px", <br>width:$(window).width()+"px", <br>height:Math.max($("body").height(),$(window).height())+"px", <br>filter:"Alpha(Opacity=40)", <br>opacity:"0.4", <br>backgroundColor:"#AAAAAA", <br>zIndex:"1000", <br>margin:"0px", <br>padding:"0px" <br>} <br>).appendTo("body"); <br>}else{ <br>$("#middleElement_bgDiv").show(); <br>} <br>} <br>); <br>$("#windowClose").one("click",function(){ <br>$("#windowContent").slideUp(600,function(){ <br>$("#window").animate( <br>{ <br>left:position.l, <br>top:position.t, <br>height:position.h, <br>width:position.w <br>},500,function(){ <br>$(this).hide(); <br>if($("#middleElement_bgDiv").get().length > 0){ <br>$("#middleElement_bgDiv").hide(); <br>} <br>$("#window").css( <br>{ <br>left:winPosition.l, <br>top:winPosition.t, <br>height:winPosition.h, <br>width:winPosition.w <br>} <br>); <br>} <br>); <br>}) <br>}); <br>$("#windowTop").mousedown(function(){ <br>$.alerts.Drag( <br>document.getElementById("window"), <br>{ <br>e : event, <br>Drag : options.IsDrag <br>} <br>); <br>}); <br>}, <br>_createObject : function(){ <br>$("<div id='\"window\"'>"+ <br>"<div id='\"windowTop\"'>"+ <br>"<div id='\"windowTopContent\"'>Window example</div>"+ <br>"<img  src="%5C%22images/window_min.jpg%5C%22" id='\"windowMin\"' alt="jQuery 动画弹出窗体支持多种展现方式_jquery" >"+ <br>"<img  src="%5C%22images/window_max.jpg%5C%22" id='\"windowMax\"' alt="jQuery 动画弹出窗体支持多种展现方式_jquery" >"+ <br>"<img  src="%5C%22images/window_close.jpg%5C%22" id='\"windowClose\"' alt="jQuery 动画弹出窗体支持多种展现方式_jquery" >"+ <br>"</div>"+ <br>"<div id='\"windowBottom\"'><div id='\"windowBottomContent\"'> </div></div>"+ <br>"<div id='\"windowContent\"'></div>"+ <br>"<img  src="%5C%22images/window_resize.gif%5C%22" id='\"windowResize\"' alt="jQuery 动画弹出窗体支持多种展现方式_jquery" >"+ <br>"</div>").appendTo("body"); <br>}, <br>_getWindowPosition : function(options){ <br>var wPosition = $.alerts._getPosition("#window"); <br>var windowPosition = {}; <br>windowPosition.t = parseInt($(window).height()/6)+parseInt($(window).scrollTop()); <br>windowPosition.l = ($(window).width()+$(window).scrollLeft())/2 - options.width/2; <br>windowPosition.w = options.width; <br>windowPosition.h = options.height; <br>return windowPosition; <br>}, <br>_getPosition : function(o){ <br>var top = $(o).offset().top; <br>var left = $(o).offset().left; <br>var height = $(o).height(); <br>var width = $(o).width(); <br>return {t:top,l:left,h:height,w:width}; <br>}, <br>Drag : function(obj,options){ <br>var e = options.e || window.event; <br>var Drag = options.Drag; <br>if(Drag == false)return; <br>var x=parseInt(obj.style.left); <br>var y=parseInt(obj.style.top); <br>var x_=e.clientX-x; <br>var y_=e.clientY-y; <br>if(document.addEventListener){ <br>document.addEventListener('mousemove', inFmove, true); <br>document.addEventListener('mouseup', inFup, true); <br>} else if(document.attachEvent){ <br>document.attachEvent('onmousemove', inFmove); <br>document.attachEvent('onmouseup', inFup); <br>} <br>inFstop(e); <br>inFabort(e); <br>function inFmove(e){ <br>var evt; <br>if(!e)e=window.event; <br>obj.style.left=e.clientX-x_+'px'; <br>obj.style.top=e.clientY-y_+'px'; <br>inFstop(e); <br>} <br>function inFup(e){ <br>var evt; <br>if(!e)e=window.event; <br>if(document.removeEventListener){ <br>document.removeEventListener('mousemove', inFmove, true); <br>document.removeEventListener('mouseup', inFup, true); <br>} else if(document.detachEvent){ <br>document.detachEvent('onmousemove', inFmove); <br>document.detachEvent('onmouseup', inFup); <br>} <br>inFstop(e); <br>} <br>function inFstop(e){ <br>if(e.stopPropagation) return e.stopPropagation(); <br>else return e.cancelBubble=true; <br>} <br>function inFabort(e){ <br>if(e.preventDefault) return e.preventDefault(); <br>else return e.returnValue=false; <br>} <br>} <br>} <br>JAlert = function(o,json){ <br>$.alerts.alert(o,json); <br>}; <br>})(jQuery); <br>
</div> <br>调用代码 <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="4195" class="copybut" id="copybut4195" onclick="doCopy('code4195')"><u>复制代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code4195"> <br>$(function(){ <br>$("a").each(function(){ <br>$(this).bind("click",function(){ <br>JAlert(this,{ <br>title : '提示窗体', <br>content : $("#msg")[0].outerHTML, <br>GetType : 'string', //controls,ajax,string,iframe <br>IsDrag : true, <br>Url : "windows.html", <br>Data : null, <br>width:300, <br>height:200 <br>}); <br>}); <br>}); <br>}); <br>
</div> <br>使用说明： <br>　　　　title: 窗体标题 <br>　　　　content:取决于GetType属性，如果GetType='string',那么content就是要显示的内容，如果GetType='controls'，那么content则为要显示的DOM对象。其它两个类型可不用填写。 <br>　　　　GetType:展现的四种类型：string,iframe,ajax,controls <br>　　　　IsDrag:是否支持拖拽 <br>　　　　Url: 同样取决于GetType属性，如果GetType='ajax'，那么Url就是请求的URL地址，如果GetType='iframe'，那么URL就是iframe的链接地址。其它两个类型不用填写 <br>　　　　Data:当GetType='ajax'时，Data属性为请求的数据。 <br>　　　　width:显示层的宽度 <br>　　　　height:显示层的高度 <br>　　HTML代码 <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="82169" class="copybut" id="copybut82169" onclick="doCopy('code82169')"><u>复制代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code82169"> <br><br><a href="javascript:void(0);" id="windowOpen1">Open window</a> <br><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><br><a href="javascript:void(0);" id="windowOpen3">Open window</a> <br><div id="msg" style="font-size:16px;padding-top:16px;line-height:25px;">    欢迎访问《<a href="http://jb51.net" target="_blank">本站</a>》的网站,希望与大家一起探讨技术问题，共同实现各自的梦想！<br><br>网址：http://jb51.net</div> <br><br>
</div> <br><a href="http://xiazai.jb51.net/201004/yuanma/jquery_openWindow.rar">打包下载地址</a>