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)