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

时间: 作者:土加

  

[弹出层]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 = '
';  
banner += '
';  
banner += '
'+title+'
';  
banner += '
(责任编辑:admin)

推荐图片Related

相关文章Related

查看更多热门新闻


首页 | js代码 | jQuery特效 | 其他代码 | 关于我们

Copyright © 2010-2019 菲娱国际平台 版权所有

系统要求:本站自适应各终端浏览器分辨率

请使用Google、Firefox、IE9、百度浏览器登录网站

网站地图 | RSS订阅 | 菲娱国际平台