时间:
作者:土加
[弹出层]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=$('');
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=$('');
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.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 = '