Posted in Javascript onApril 29, 2010
动画效果
从哪个对象上触发的即从该对象开始逐渐向屏幕中间移动,并逐渐展开,展开后里面的显示对象再从上到下慢慢展开。点击关闭时,先将展开的显示的对象慢慢缩回,然后再慢慢移到触发的对象上面。
说的有点绕,我自己都不明白是什么意思,说白了就是从哪儿来回哪儿去。
展现方式
第一种: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>
打包下载地址
jQuery 动画弹出窗体支持多种展现方式
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@