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


Posted in Javascript onMay 23, 2012

代码如下:

(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)
Javascript 相关文章推荐
传智播客学习之java 反射
Nov 22 Javascript
基于Jquery的开发个代阴影的对话框效果代码
Jul 28 Javascript
javascript中的原型链深入理解
Feb 24 Javascript
jquery datepicker参数介绍和示例
Apr 15 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
Aug 31 Javascript
学习JavaScript设计模式之迭代器模式
Jan 19 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
Aug 03 Javascript
JS简单获取及显示当前时间的方法
Aug 03 Javascript
js制作支付倒计时页面
Oct 21 Javascript
Vue this.$router.push(参数)实现页面跳转操作
Sep 09 Javascript
js正则表达式简单校验方法
Jan 03 Javascript
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
May 23 #Javascript
基于jquery tab切换(防止页面刷新)
May 23 #Javascript
jQuery下通过replace字符串替换实现大小图片切换
May 22 #Javascript
js面向对象 多种创建对象方法小结
May 21 #Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 #Javascript
游览器中javascript的执行过程(图文)
May 20 #Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
May 16 #Javascript
You might like
php下实现在指定目录搜索指定类型文件的函数
2008/10/03 PHP
简单实用的PHP防注入类实例
2014/12/05 PHP
php结合ACCESS的跨库查询功能
2015/06/12 PHP
php文件上传你必须知道的几点
2015/10/20 PHP
thinkphp3.x自定义Action、Model及View的简单实现方法
2016/05/19 PHP
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
JavaScript Cookie的读取和写入函数
2009/12/08 Javascript
eval的两组性能测试数据
2012/08/17 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
2013/12/31 Javascript
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
jQuery使用andSelf()来包含之前的选择集
2014/05/19 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
2014/09/03 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
2015/03/03 Javascript
jQuery基础知识点总结(DOM操作)
2016/06/01 Javascript
BootStrap的table表头固定tbody滚动的实例代码
2016/08/24 Javascript
jquery把int类型转换成字符串类型的方法
2016/10/07 Javascript
利用yarn实现一个webpack+react种子
2016/10/25 Javascript
Javascript 动态改变imput type属性
2016/11/01 Javascript
javascript字体颜色控件的开发 JS实现字体控制
2017/11/27 Javascript
vue 利用路由守卫判断是否登录的方法
2018/09/29 Javascript
详解vscode中vue代码颜色插件
2018/10/11 Javascript
微信小程序npm引入vant-weapp的踩坑记录
2019/08/01 Javascript
jquery实现直播弹幕效果
2019/11/28 jQuery
Python中使用scapy模拟数据包实现arp攻击、dns放大攻击例子
2014/10/23 Python
Python如何判断数独是否合法
2016/09/08 Python
python虚拟环境virtualenv的安装与使用
2017/09/21 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
python将秒数转化为时间格式的实例
2018/09/16 Python
python3实现二叉树的遍历与递归算法解析(小结)
2019/07/03 Python
Myholidays美国:在线旅游网站
2019/08/16 全球购物
美国精品地毯网站:Boutique Rugs
2020/03/04 全球购物
skyn ICELAND官网:冰岛成分天然护肤品
2020/08/24 全球购物
安全宣传标语口号
2014/06/06 职场文书
2014财产信托协议书范本
2014/11/18 职场文书
身份证丢失证明
2015/06/19 职场文书
windows server 2016 域环境搭建的方法步骤(图文)
2022/06/25 Servers