jquery.Jwin.js 基于jquery的弹出层插件代码

代码如下：
复制代码代码如下:
（function （$） {
var imgdir = "images/";//图片文件夹路径
var autoHide=false;//悬浮div是否自动隐藏
var hideType="hide";//隐藏的方式可选参数 hide、slide、fade
var hideDelay=0;//悬浮div隐藏过程使用的时间
var hideTime=0;//悬浮div延迟隐藏时间
var zIndex=100;//多个div时获取焦点的div处于顶层
var showType="show";//悬浮div显示方式可选参数 hide、slide、fade
var showTime=0;//悬浮div显示过程使用的时间
var showDelay=0;//悬浮div延迟显示的时间
//以下两个变量用于保证div被拖动后隐藏再次打开后出现的位置仍然为首次出现的位置
var oldTop="";//保存div初次出现的top
var oldLeft="";//保存div初次出现的left
$.fn.extend（{
Jwin:function（option）{
var op=$.extend（{
id:"",//悬浮div的id （必须）
title: "",//标题
message:"",//显示信息
elementId:"",//显示元素的id
url: "",//显示的页面地址
width: 400,//悬浮div的宽度
height: 300,//悬浮div的高度
//悬浮div显示参数
showType:"show",//悬浮div显示方式可选参数 hide、slide、fade
showTime:0,//悬浮div显示过程使用的时间
showDelay:0,//悬浮div延迟显示的时间
//悬浮div隐藏参数
autoHide:false,//悬浮div是否自动隐藏
hideType:"hide",//隐藏的方式可选参数 hide、slide、fade
hideTime:0,//悬浮div隐藏过程使用的时间
hideDelay:0,//悬浮div自动隐藏延迟时间
},option）;

if（op.id==""）{
alert（"缺少WinId"）;
return;
}

autoHide=op.autoHide;
hideType=op.hideType;
hideDelay=op.hideDelay;
hideTime=op.hideTime;
showType=op.showType;
showTime=op.showTime;
showDelay=op.showDelay;
zIndex=zIndex+1;

var winEle=$（"#"+op.id）;
if（winEle.length==0）{
this.width = parseInt（op.width）;
this.height = parseInt（op.height）;
var banner=this.JwinCreatBanner（op.id,this.width,op.title）;
oldTop = this.height >= document.documentElement.clientHeight ？ 0 : （document.documentElement.clientHeight-this.height）/2;
oldLeft = this.width >= document.body.clientWidth ？ 0 : （document.body.clientWidth-this.width）/2;

win=$（"<div id="" + op.id + ""></div>"）;
win.css（{"position":"absolute","top":oldTop,"left":oldLeft,"width":（this.width+2）,"zIndex":zIndex,"display":"none"}）;
win.html（banner）;
win.find（"#close"）.bind（"click",function（）{$（this）.JwinClose（op.id）;}）;
win.find（"#bannerMiddle"）.bind（"mousedown",function（）{$（this）.JwinMove（op.id）;}）;

var container=$（"<div id="" + op.id + "_con"></div>"）;
container.css（{"float":"left","width":+this.width,"height":this.height,"word-break":"break-all","overflow-x":"hidden","overflow-y":"auto","border":"1px solid #1972e1","background-color":"#FFF","clear":"both"}）;

if（op.message.length>0）{
container.append（op.message）;
}
else if（op.url.length>0）{
var iframe=$（"<iframe frameborder="0"></iframe>"）;
iframe.css（{"width":"100%","height":"100%","overflow":"visible","border":"0"}）;
iframe.attr（"src",op.url）;
container.append（iframe）;
}
else if（op.elementId.length>0）{
var element=$（"#"+op.elementId）;
if（element）{
container.append（element）;
element.show（）;
}
}

win.append（container）;
$（document.body）.append（win）;
this.JwinShow（win）;

//是否设置自动关闭
if（autoHide）{
this.JwinHide（op.id）;
}
}
else{
winEle.css（{"zIndex":（winEle.css（"zIndex"）+2）,"top":oldTop,"left":oldLeft}）;
this.JwinShow（winEle）;
}
},

//创建标题
JwinCreatBanner:function（winId,width,title）{
var bannerImddleWidth = width-47;//拖动部分div宽度为总宽度减去两边圆角宽度、关闭按钮宽度
var banner = "<div style="folat:left;width:"+（width+2）+";clear:both;font-size:14px;font:Arial,Helvetica,sans-serif;color:#FFF;">";
banner += "<div style="width:14px;height:30px;line-height:30px;float:left;background:url（"+imgdir+"windows_banner_left.gif） no-repeat;"></div>";
banner += "<div id="bannerMiddle" style="width:"+bannerImddleWidth+"px;height:30px;float:left;line-height:30px;cursor:move;float:left;text-align:left;background:url（"+imgdir+"windows_banner.gif） repeat-x;" >"+title+"</div>";
banner += "<div style="width:21px;height:30px;line-height:30px;float:left;background:url（"+imgdir+"windows_banner.gif） repeat-x;"><img style="border:0;margin-top:4px;" id="close" src=""+imgdir+"win_close_normal.gif" onmouseover="this.src=""+imgdir+"win_close_hover.gif"" onmouseout="this.src=""+imgdir+"win_close_normal.gif"" /></div>";
banner += "<div style="width:14px;height:30px;line-height:30px;float:left;background:url（"+imgdir+"windows_banner_right.gif） no-repeat;"></div>";
banner += "</div>";
return banner;
},

//拖动
JwinMove:function（winId）{
var floatWin=document.getElementById（winId）;
zIndex=zIndex+1;
floatWin.style.zIndex=zIndex;
o=window.event.srcElement||window.event.target;
var d=document;
var a=window.event;
var x=a.layerX？a.layerX:a.offsetX;
var y=a.layerY？a.layerY:a.offsetY;
if（o.setCapture）{
o.setCapture（）;
}
else if（window.captureEvents）{
window.captureEvents（Event.MOUSEMOVE|Event.MOUSEUP）;
}

d.onmousemove=function（a）{
if（！a）a=window.event;
if（！a.pageX）a.pageX=a.clientX;
if（！a.pageY）a.pageY=a.clientY;
var tx=a.pageX-x,ty=a.pageY-y;
var maxx=document.documentElement.clientWidth-floatWin.clientWidth;
var maxy=document.documentElement.clientHeight-floatWin.clientHeight;
tx=（tx<0）？0:tx;
ty=（ty<0）？0:ty;
tx=（tx>maxx）？maxx:tx;
ty=（ty>maxy）？maxy:ty;
floatWin.style.left=tx;
floatWin.style.top=ty;
};

d.onmouseup=function（）{
if（o.releaseCapture）{
o.releaseCapture（）;
}
else if（window.captureEvents）{
window.captureEvents（Event.MOUSEMOVE|Event.MOUSEUP）;
}
d.onmousemove=null;
d.onmouseup=null;
};
},

//显示
JwinShow:function（win）{
var t = showDelay;
switch（showType）{
case "slide":
setTimeout（function（）{win.slideDown（showTime）;}, t）;
break;
case "fade":
setTimeout（function（）{win.fadeIn（showTime）;},t）;
break;
default:
setTimeout（function（）{win.show（）;},t）;
break;
}
},

//隐藏
JwinHide:function（winId,atonce）{
var win = $（"#"+winId）;
var t = atonce ？ 0 : hideDelay;
switch（hideType）{
case "slide":
setTimeout（function（）{win.slideUp（hideTime）;}, t）;
break;
case "fade":
setTimeout（function（）{win.fadeOut（hideTime）;},t）;
break;
default:
setTimeout（function（）{win.hide（）;},t）;
break;
}
},

//关闭
JwinClose:function（winId）{
this.JwinHide（winId,true）;
}
}）;
}）（jQuery）