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 相关文章推荐
js Flash插入函数免激活代码
Mar 31 Javascript
IE下写xml文件的两种方式(fso/saveAs)
Aug 05 Javascript
js获取元素相对窗口位置的实现代码
Sep 28 Javascript
微信小程序 图片上传实例详解
May 05 Javascript
原生JS实现图片懒加载(lazyload)实例
Jun 13 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
Nov 14 Javascript
vue.js element-ui validate中代码不执行问题解决方法
Dec 18 Javascript
微信小程序icon组件使用详解
Jan 31 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
Aug 20 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
Aug 31 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
Oct 12 Javascript
解决vue的router组件component在import时不能使用变量问题
Jul 26 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
windows下PHP APACHE MYSQ完整配置
2007/01/02 PHP
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
php中单个数据库字段多列显示(单字段分页、横向输出)
2014/07/28 PHP
PHP的重载使用魔术方法代码实例详解
2021/02/26 PHP
详解new function(){}和function(){}() 区别分析
2008/03/22 Javascript
javascript定时保存表单数据的代码
2011/03/17 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
2013/11/12 Javascript
js判断字符长度以及中英文数字等
2013/12/31 Javascript
使用jquery实现放大镜效果
2014/09/02 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
2014/10/17 Javascript
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
在JavaScript中处理时间之getHours()方法的使用
2015/06/10 Javascript
JavaScript的jQuery库中function的存在和参数问题
2015/08/13 Javascript
js实现文字超出部分用省略号代替实例代码
2016/09/01 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
2017/09/08 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
Vue的路由及路由钩子函数的实现
2019/07/02 Javascript
Python 分析Nginx访问日志并保存到MySQL数据库实例
2014/03/13 Python
Python3中多线程编程的队列运作示例
2015/04/16 Python
Python 备份程序代码实现
2017/03/06 Python
scrapy爬虫实例分享
2017/12/28 Python
对python中raw_input()和input()的用法详解
2018/04/22 Python
Python加密模块的hashlib,hmac模块使用解析
2020/01/02 Python
Python基础之字符串操作常用函数集合
2020/02/09 Python
python ffmpeg任意提取视频帧的方法
2020/02/21 Python
Selenium之模拟登录铁路12306的示例代码
2020/07/31 Python
python字典按照value排序方法
2020/12/28 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
尤妮佳moony海外旗舰店:日本殿堂级纸尿裤品牌
2018/02/23 全球购物
售后服务承诺书怎么写
2014/05/21 职场文书
2015年考研复习计划
2015/01/19 职场文书
班主任经验交流心得体会
2015/11/02 职场文书
小学五年级(说明文3篇)
2019/08/13 职场文书
pytorch 中nn.Dropout的使用说明
2021/05/20 Python
Python将CSV文件转化为HTML文件的操作方法
2021/06/30 Python
Oracle锁表解决方法的详细记录
2022/06/05 Oracle