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 相关文章推荐
JavaScript 原型与继承说明
Jun 09 Javascript
jQuery的slideToggle方法实例
May 07 Javascript
JS+CSS实现仿新浪微博搜索框的方法
Feb 24 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
Aug 03 Javascript
JavaScript操作HTML元素和样式的方法详解
Oct 21 Javascript
javascript类型系统_正则表达式RegExp类型详解
Jun 24 Javascript
canvas实现图像放大镜
Feb 06 Javascript
微信小程序 scroll-view实现锚点滑动的示例
Dec 06 Javascript
Angular4学习教程之DOM属性绑定详解
Jan 04 Javascript
Gulp实现静态网页模块化的方法详解
Jan 09 Javascript
JavaScript对象拷贝与赋值操作实例分析
Dec 10 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
Sep 11 Javascript
使用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实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
php实现的zip文件内容比较类
2014/09/24 PHP
laravel 解决Validator使用中出现的问题
2019/10/25 PHP
JQery jstree 大数据量问题解决方法
2010/03/09 Javascript
Web开发者必备的12款超赞jQuery插件
2010/12/03 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
2012/03/08 Javascript
jquery创建一个ajax关键词数据搜索实现思路
2013/02/26 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
2013/09/24 Javascript
js中AppendChild与insertBefore的用法详细解析
2013/12/16 Javascript
使用简洁的jQuery方法实现隔行换色功能
2014/01/02 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
简单介绍jsonp 使用小结
2016/01/27 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
2016/11/25 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
Vue shopCart 组件开发详解
2018/01/26 Javascript
浅谈Node 调试工具入门教程
2018/03/20 Javascript
JS FormData对象使用方法实例详解
2020/02/12 Javascript
[01:48]2018DOTA2亚洲邀请赛主赛事第二日五佳镜头 VG完美团战逆转TNC
2018/04/05 DOTA
Python格式化字符串f-string概览(小结)
2019/06/18 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
python接口自动化如何封装获取常量的类
2019/12/24 Python
matlab、python中矩阵的互相导入导出方式
2020/06/01 Python
Godiva巧克力英国官网:比利时歌帝梵巧克力
2018/08/28 全球购物
怎样客观的做好自我评价
2013/12/28 职场文书
转预备党员政审材料
2014/02/06 职场文书
教师个人自我评价范文
2014/04/13 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
坚守艰苦奋斗精神坚决反对享乐主义整改措施
2014/09/17 职场文书
解除劳动合同协议书(样本)
2014/10/02 职场文书
党员批评与自我批评总结
2014/10/15 职场文书
监察建议书
2015/02/04 职场文书
工会经费申请报告
2015/05/15 职场文书
简短清晨问候语
2015/11/10 职场文书
党员心得体会范文2016
2016/01/23 职场文书
《陶罐和铁罐》教学反思
2016/03/03 职场文书
Golang 语言控制并发 Goroutine的方法
2021/06/30 Golang