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)