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 相关文章推荐
Lazy Load 延迟加载图片的 jQuery 插件
Feb 06 Javascript
extjs 初始化checkboxgroup值的代码
Sep 21 Javascript
基于jQuery.Validate验证库知识点的详解
Apr 26 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
Jun 24 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
Nov 23 Javascript
基于Vue.js的表格分页组件
May 22 Javascript
用AngularJS来实现监察表单按钮的禁用效果
Nov 02 Javascript
基于react后端渲染模板引擎noox发布使用
Jan 11 Javascript
微信小程序开发的基本流程步骤
Jan 31 Javascript
js神秘的电报密码 哈弗曼编码实现
Sep 10 Javascript
vue el-upload上传文件的示例代码
Dec 21 Vue.js
Vue + iView实现Excel上传功能的完整代码
Jun 22 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 随机生成10位字符代码
2009/03/26 PHP
php 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
php fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
php和mysql中uft-8中文编码乱码的几种解决办法
2012/04/19 PHP
PHPExcel简单读取excel文件示例
2016/05/26 PHP
php 修改上传文件大小限制实例详解
2016/10/23 PHP
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
2011/05/07 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
2014/06/12 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
jQuery的each循环用法简单示例
2016/06/12 Javascript
Backbone View 之间通信的三种方式
2016/08/09 Javascript
jQuery实现元素的插入
2017/02/27 Javascript
js事件委托和事件代理案例分享
2017/07/25 Javascript
Vue组件实例间的直接访问实现代码
2017/08/20 Javascript
微信小程序实现默认第一个选中变色效果
2018/07/17 Javascript
使用Node.js写一个代码生成器的方法步骤
2019/05/10 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
2019/05/18 Javascript
使用layui实现树形结构的方法
2019/09/20 Javascript
微信小程序整个页面的自动适应布局的实现
2020/07/12 Javascript
node.js通过Sequelize 连接MySQL的方法
2020/12/28 Javascript
[00:57]辉夜杯战队访谈宣传片—VG
2015/12/25 DOTA
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
python实现简单ftp客户端的方法
2015/06/28 Python
编写自定义的Django模板加载器的简单示例
2015/07/21 Python
Python3.5 处理文本txt,删除不需要的行方法
2018/12/10 Python
python实现文本进度条 程序进度条 加载进度条 单行刷新功能
2019/07/03 Python
Python递归实现打印多重列表代码
2020/02/27 Python
古驰英国官网:GUCCI英国
2020/03/07 全球购物
前台领班岗位职责
2013/12/04 职场文书
中式结婚主持词
2014/03/14 职场文书
2014四风问题对照检查材料范文
2014/09/15 职场文书
乡镇党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
拔河比赛队名及霸气口号
2015/12/24 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书
《七律·长征》教学反思
2016/02/16 职场文书
Vue2项目中对百度地图的封装使用详解
2022/06/16 Vue.js