jQuery 動(dòng)畫(huà)彈出窗體支持多種展現(xiàn)方式
更新時(shí)間：2010年04月29日 21:41:50 作者：
今天剛寫(xiě)的利用jQuery動(dòng)畫(huà)彈出窗體，支持了string、Ajax、iframe、controls四種展現(xiàn)方式，具體細(xì)節(jié)下面慢慢介紹，先看效果圖。
動(dòng)畫(huà)效果
從哪個(gè)對(duì)象上觸發(fā)的即從該對(duì)象開(kāi)始逐漸向屏幕中間移動(dòng)，并逐漸展開(kāi)，展開(kāi)后里面的顯示對(duì)象再?gòu)纳系较侣归_(kāi)。點(diǎn)擊關(guān)閉時(shí)，先將展開(kāi)的顯示的對(duì)象慢慢縮回，然后再慢慢移到觸發(fā)的對(duì)象上面。
說(shuō)的有點(diǎn)繞，我自己都不明白是什么意思，說(shuō)白了就是從哪兒來(lái)回哪兒去。
展現(xiàn)方式
第一種：string
這是最簡(jiǎn)單最明了的方式，不用多說(shuō)，就是直接賦值字符串并顯示出來(lái)。
第二種：ajax
這種是支持ajax的展現(xiàn)，就是異步獲取數(shù)據(jù)并展示出來(lái)。
第三種: iframe
顧名思義就是支持嵌套iframe顯示。
第四種：controls
這個(gè)名字有點(diǎn)不太好理解，就是將頁(yè)面的某個(gè)對(duì)象展現(xiàn)出來(lái)。比如：document.getElementById("showName");
插件代碼實(shí)現(xiàn)
復(fù)制代碼 代碼如下:
(function($){
$.alerts = {
alert : function(o,options){
var defaults = {
title : '標(biāo)題',
content : '內(nèi)容',
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);
調(diào)用代碼
復(fù)制代碼 代碼如下:
$(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
});
});
});
});
使用說(shuō)明：
title: 窗體標(biāo)題
content:取決于GetType屬性，如果GetType='string',那么content就是要顯示的內(nèi)容，如果GetType='controls'，那么content則為要顯示的DOM對(duì)象。其它兩個(gè)類(lèi)型可不用填寫(xiě)。
GetType:展現(xiàn)的四種類(lèi)型：string,iframe,ajax,controls
IsDrag:是否支持拖拽
Url: 同樣取決于GetType屬性，如果GetType='ajax'，那么Url就是請(qǐng)求的URL地址，如果GetType='iframe'，那么URL就是iframe的鏈接地址。其它兩個(gè)類(lèi)型不用填寫(xiě)
Data:當(dāng)GetType='ajax'時(shí)，Data屬性為請(qǐng)求的數(shù)據(jù)。
width:顯示層的寬度
height:顯示層的高度
HTML代碼
復(fù)制代碼 代碼如下:
<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;"> 歡迎訪(fǎng)問(wèn)《<a target="_blank">腳本之家</a>》的網(wǎng)站,希望與大家一起探討技術(shù)問(wèn)題，共同實(shí)現(xiàn)各自的夢(mèng)想！<br/><br/>網(wǎng)址：http://jb51.net</div>
</body>
打包下載地址
相關(guān)文章
jQuery頭像裁剪工具jcrop用法實(shí)例(附演示與demo源碼下載)
這篇文章主要介紹了jQuery頭像裁剪工具jcrop用法,結(jié)合實(shí)例形式分析了jQuery頭像裁剪工具jquery.jcrop.js具體使用技巧,并附帶了完整的demo源碼供讀者下載參考,需要的朋友可以參考下2016-01-01
jQuery對(duì)checkbox 復(fù)選框的全選全不選反選的操作
這篇文章主要介紹了jQuery對(duì)checkbox 復(fù)選框的全選全不選反選的操作 的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-08-08
jQuery源碼分析-03構(gòu)造jQuery對(duì)象-源碼結(jié)構(gòu)和核心函數(shù)
jQuery源碼分析-03構(gòu)造jQuery對(duì)象-源碼結(jié)構(gòu)和核心函數(shù)，需要的朋友可以參考下。2011-11-11
完美兼容各大瀏覽器的jQuery插件實(shí)現(xiàn)圖片切換特效
網(wǎng)友zoeDylan寫(xiě)的原創(chuàng)jquery插件，實(shí)現(xiàn)了圖片輪播功能，jquery插件名稱(chēng)為zoeDylan.ImgChange，圖片路徑、跳轉(zhuǎn)鏈接、提示標(biāo)題都是有動(dòng)態(tài)數(shù)組來(lái)配置，jquery插件可靈活配置6個(gè)參數(shù)， height高、width寬、mgs圖片地址、links點(diǎn)擊地址、tips圖片說(shuō)明、timers自動(dòng)切換時(shí)間，2014-12-12
使用easyui從servlet傳遞json數(shù)據(jù)到前端頁(yè)面的兩種方法
這篇文章主要介紹了用easyui從servlet傳遞json數(shù)據(jù)到前端頁(yè)面的兩種方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
本篇文章給大家分享jquery常用的函數(shù)與方法，有需要的朋友一起來(lái)學(xué)習(xí)下2015-09-09
Jquery Uploadify上傳帶進(jìn)度條的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)Jquery Uploadify上傳帶進(jìn)度條的簡(jiǎn)單實(shí)例進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02
data模塊是一個(gè)比較有趣的功能，可以為任意的Element 添加額外的數(shù)據(jù)。而且處理了循環(huán)引用和內(nèi)存泄漏的問(wèn)題。API非常簡(jiǎn)單，就是.data(key, value)用來(lái)保存，.data(key)用開(kāi)查詢(xún)數(shù)據(jù)。2011-06-06
jquery ajax異步提交表單數(shù)據(jù)的方法
這篇文章主要為大家詳細(xì)介紹了jquery ajax異步提交表單數(shù)據(jù)的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
jquery滾動(dòng)條插件slimScroll使用方法
這篇文章主要為大家詳細(xì)介紹了jquery滾動(dòng)條插件slimScroll的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02