jQuery 动画弹出窗体支持多种展现方式-Web前端之家

动画效果
从哪个对象上触发的即从该对象开始逐渐向屏幕中间移动,并逐渐展开,展开后里面的显示对象再从上到下慢慢展开。点击关闭时,先将展开的显示的对象慢慢缩回,然后再慢慢移到触发的对象上面。
说的有点绕,我自己都不明白是什么意思,说白了就是从哪儿来回哪儿去。
展现方式 第一种:string
这是最简单最明了的方式,不用多说,就是直接赋值字符串并显示出来。
第二种:ajax 这种是支持ajax的展现,就是异步获取数据并展示出来。 第三种:
iframe 顾名思义就是支持嵌套iframe显示。 第四种:controls
这个名字有点不太好理解,就是将页面的某个对象展现出来。比如:document.getElementById;
插件代码实现 复制代码 代码如下: {
$.alerts = { alert : function{ var defaults = { title : ‘标题’, content
: ‘内容’, GetType : ‘string’, //controls,ajax,string,iframe IsDrag :
true, Url : ”, Data : null, width:400, height:300, callback :
function(){} } var options = $.extend; if { $.alerts._createObject(); }
var position = $.alerts._getPosition; var winPosition =
$.alerts._getWindowPosition; $.hide.css( { width:position.w,
height:position.h, top:position.t, left:position.l, zIndex:1001 } );
$(“#windowBottom,#windowBottomContent”).css( {
height:options.height-30 } ); $.css( { height:options.height – 45,
width:options.width – 25 } ); $.html; switch{ case “string”: $.html;
break; case “ajax”: if{ alert; return; }else{ $.ajax( { type: “POST”,
url: options.Url, data: options.Data, success: function{ $.html; }
break; case “controls”: $.html(options.content.innerHTML); break; case
“iframe”: $.empty.attr( { src : options.Url, width:options.width,
height:options.height } ).appendTo; break; } $.animate( {
left:winPosition.l, top:winPosition.t, height:winPosition.h,
width:winPosition.w },500,function(){ //$.fadeIn; $.slideDown;
if($(“#middleElement_bgDiv”).get{
$.attr(“id”,”middleElement_bgDiv”).css( { position:”absolute”,
left:”0px”, top:”0px”, width:$+”px”, height:Math.max,$+”px”,
filter:”Alpha”, opacity:”0.4″, backgroundColor:”#AAAAAA”,
zIndex:”1000″, margin:”0px”, padding:”0px” } ).appendTo; }else{
$(“#middleElement_bgDiv”).show; $.one{ $.slideUp{ $.animate( {
left:position.l, top:position.t, height:position.h, width:position.w
},500,function; if($(“#middleElement_bgDiv”).get{
$(“#middleElement_bgDiv”).hide.css( { left:winPosition.l,
top:winPosition.t, height:winPosition.h, width:winPosition.w } ); } );
}) }); $.mousedown{ $.alerts.Drag( document.getElementById, { e : event,
Drag : options.IsDrag } ); }); }, _createObject : function(){ $(“

“+ “

“+ “

Window example

“+
塞班岛贵宾会 1“+
塞班岛贵宾会 2“+
塞班岛贵宾会 3“+

塞班岛贵宾会,”+ “

“+ “

“+
塞班岛贵宾会 4“+

“).appendTo; }, _getWindowPosition : function{ var wPosition =
$.alerts._getPosition; var windowPosition = {}; windowPosition.t =
parseInt+parseInt); windowPosition.l = +$/2 – options.width/2;
windowPosition.w = options.width; windowPosition.h = options.height;
return windowPosition; }, _getPosition : function.offset().top; var
left = $.left; var height = $; var width = $; return
{t:top,l:left,h:height,w:width}; }, Drag : function{ var e = options.e
|| window.event; var Drag = options.Drag; ifreturn; var x=parseInt; var
y=parseInt; 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(‘onmousemove’, inFmove);
document.attachEvent; } inFstop; function inFmovee=window.event;
obj.style.left=e.clientX-x_+’px’; obj.style.top=e.clientY-y_+’px’;
inFstop; } function inFupe=window.event;
if(document.removeEventListener){
document.removeEventListener(‘mousemove’, inFmove, true);
document.removeEventListener(‘mouseup’, inFup, true); } else if{
document.detachEvent(‘onmousemove’, inFmove); document.detachEvent; }
inFstop; } function inFstop{ if return e.stopPropagation(); else return
e.cancelBubble=true; } function inFabort{ if return e.preventDefault();
else return e.returnValue=false; } } } JAlert = function{
$.alerts.alert; 调用代码 复制代码
代码如下: $.each.bind{ JAlert(this,{ title : ‘提示窗体’, content :
$[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代码 复制代码
代码如下: Open window Open
window

Open window

欢迎访问《脚本之家》的网站,希望与大家一起探讨技术问题,共同实现各自的梦想!

网址:

打包下载地址

发表评论

电子邮件地址不会被公开。 必填项已用*标注