jQuery弹出层插件简化版代码下载


Posted in Javascript onOctober 16, 2008
String.prototype.replaceAll = function(s1,s2){ 
 return this.replace(new RegExp(s1,"gm"),s2); 
 }; 
(function($){ 
 /* 
 * $-layer 0.1 - New Wave Javascript 
 * 
 * Copyright (c) 2008 King Wong 
* $Date: 2008-10-09 $ 
*/ 
var ___id___ = ""; 
var ___settings___ = {}; 
var isMouseDown = false; var currentElement = null; 
var dropCallbacks = {}; 
var dragCallbacks = {}; 
var bubblings = {}; 
var lastMouseX; 
var lastMouseY; 
var lastElemTop; 
var lastElemLeft; 
var dragStatus = {}; 
var holdingHandler = false; 
$.getMousePosition = function(e){ 
var posx = 0; 
var posy = 0; 
if (!e) var e = window.event; 
if (e.pageX || e.pageY) { 
posx = e.pageX; 
posy = e.pageY; 
} 
else if (e.clientX || e.clientY) { 
posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 
posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
} 
return { 'x': posx, 'y': posy }; 
}; 
$.updatePosition = function(e) { 
var pos = $.getMousePosition(e); 
var spanX = (pos.x - lastMouseX); 
var spanY = (pos.y - lastMouseY); 
var _top = (lastElemTop + spanY) > 0 ? (lastElemTop + spanY) : 0; 
var _left = (lastElemLeft + spanX) > 0 ? (lastElemLeft + spanX) : 0; 
$("#"+___id___).css("top", _top); 
$("#"+___id___).css("left", _left); 
}; 
$.fn.ondrag = function(callback){ 
return this.each(function(){ 
dragCallbacks[this.id] = callback; 
}); 
}; 
$.fn.ondrop = function(callback){ 
return this.each(function(){ 
dropCallbacks[this.id] = callback; 
}); 
}; 
$.fn.dragOff = function(){ 
return this.each(function(){ 
dragStatus[this.id] = 'off'; 
}); 
}; 
$.fn.dragOn = function(){ 
return this.each(function(){ 
dragStatus[this.id] = 'on'; 
}); 
}; 
$.extend({ 
layerSettings:{ 
id:"layerdiv", 
width:220, 
height:220, 
templete:'<div style="height:20px; width:@width@px; background-color:#777777;"><span id="@moveid@" style="position:relative; left:0px; top:0px; height:20px; width:100px;"><span id="@titleid@">@title@</span></span><span class="layerclose" style="position:relative; top:0px; float:right; right:20px; color:red;">close</span></div><div style="border:solid #ff0000 1px; width:@width@px; height:@height@px;"><div style="width:100%; height:100%; background-color:#ffffff;" id="@contentid@"></div></div>', 
content:'', 
title:'', 
isbg:true, 
opacity:0.3 
}, 
layerSetup: function( settings ) { 
$.extend( $.layerSettings, settings ); 
___settings___[settings.id] = settings; 
___id___ = settings.id; 
}, 
layershow:function(){ 
var __bw = $("body").width(); 
var __bh = $("body").height() > $(window).height() ? $("body").height() : $(window).height(); 
var _width = $.layerSettings.width; 
var _height = $.layerSettings.height; 
if(document.getElementById(___id___)) return; 
var _moveid = ___id___ + "_move"; 
var _titleid = ___id___ + "_title"; 
var _contentid = ___id___ + "_content"; 
var _cssurl = $.layerSettings.cssurl; 
var opacity = $.layerSettings.opacity; 
__index = $.layermaxindex(); 
var __left = (__bw - _width) > 0 ? (__bw - _width)/2 : 0; 
var __top = 100; 
var __bgDiv = '<div id="'+___id___+'_background" style="background:#000000; filter:alpha(opacity='+(opacity*100)+'); opacity: '+opacity+'; width:'+__bw+'px; height:'+__bh+'px; z-index:'+(__index++)+'; position:absolute; left:0px; top:0px;"></div>'; 
if($.layerSettings.isbg) 
{ 
$("body").append(__bgDiv); 
} 
$("body").append('<div id="'+___id___+'" style="z-index:'+__index+';position:absolute; left:'+__left+'px; top:'+__top+'px;"></div>'); 
var _templete = $.layerSettings.templete; 
var __templete = _templete.replaceAll("@width@",_width).replaceAll("@height@",_height).replaceAll("@titleid@",_titleid).replaceAll("@contentid@",_contentid).replaceAll("@title@",jQuery.layerSettings.title).replaceAll("@moveid@",_moveid); 
$("#"+___id___).append(__templete); 
$("#"+_contentid).append($.layerSettings.content); 
$("#"+_titleid).append($.layerSettings.title); 
var idd = ___id___; 
$(".layerclose").bind("click",function() 
{ 
$.layerclose(idd); 
}); 
$("#"+___id___).bind("click",function() 
{ 
var id = this.id; 
$.layerSetup(___settings___[id]); 
$(this).css("z-index",$.layermaxindex()); 
}); 
$(document).bind("click",function(e) 
{ 
var pos = $.getMousePosition(e); 
}); 
$(document).mousemove(function(e){ 
if(isMouseDown && dragStatus[currentElement.id] != 'false'){ 
$.updatePosition(e); 
if(dragCallbacks[currentElement.id] != undefined){ 
dragCallbacks[currentElement.id](e, currentElement); 
} 
return false; 
} 
}); 
$(document).mouseup(function(e){ 
if(isMouseDown && dragStatus[currentElement.id] != 'false'){ 
isMouseDown = false; 
if(dropCallbacks[currentElement.id] != undefined){ 
dropCallbacks[currentElement.id](e, currentElement); 
} 
return false; 
} 
}); 
(function(){ 
bubblings[___id___] = true; 
dragStatus[___id___] = "on"; 
//setHandler 
bubblings[this.id] = true; 
dragStatus[_moveid] = "handler"; 
$("#"+_moveid).css("cursor", "move"); 
$("#"+_moveid).mousedown(function(e){ 
var id = this.id.replace("_move",""); 
___id___ = id; 
$("#"+id).css("z-index",$.layermaxindex()); 
$.layerSetup(___settings___[id]); 
if((dragStatus[___id___] == "off") || (dragStatus[___id___] == "handler" && !holdingHandler)) 
return bubblings["#"+___id___]; 
isMouseDown = true; 
currentElement = $("#"+___id___); 
var pos = $.getMousePosition(e); 
lastMouseX = pos.x; 
lastMouseY = pos.y; 
lastElemTop = document.getElementById(___id___).offsetTop; 
lastElemLeft = document.getElementById(___id___).offsetLeft; 
$.updatePosition(e); 
holdingHandler = true; 
}); 
$("#"+_moveid).mouseup(function(e){ 
holdingHandler = false; 
}); 
//end setHandler 
})(); 
}, 
layerclose:function(__id) 
{ 
$("#"+__id+"_background").remove(); 
$("#"+__id).remove(); 
}, 
layermaxindex:function() 
{ 
var ___index = 0; 
$.each($("*"),function(i,n){ 
var __tem = $(n).css("z-index"); 
if(__tem>0) 
{ 
if(__tem > ___index) 
{ 
___index = __tem + 1; 
} 
} 
}); 
return ___index; 
} 
}); 
})(jQuery);

使用方法:
(1)显示层:
function show() 
{ 
$.layerSetup({ 
id:"abc",//弹出层的ID 
title:"test",//标题 
content:'test',//内容 
isbg:false,//是否显示背景遮照层 
opacity:0.3,//背景遮照层的透明度,值越大透明度越低,0为完全透明,1为不透明 
templete:'<div class="showwint_mini_title"><span class="showwint_mini_close_btn"><a href="javascript:void(null);" class="layerclose"></a></span><span class="showwint_mini_title_content" id="@moveid@"><span id="@titleid@"></span></span></div><div class="showwint_mini_content"><div class="showwint_mini_content_content" id="@contentid@"></div></div>'//模板 
}); 
$.layershow(); 
}

(2)关闭层:
$.layerclose("弹出层的ID");

注意:那个如果你的模板有CSS文件的话,就要直接引入到本页面就行了,这个简化版不能在别的框架弹出层的,所以也就没有了那个cssurl属性了,也没有target 属性了。
源码下载http://xiazai.3water.com/jslib/jquery-layer.rar
Javascript 相关文章推荐
JQuery的$和其它JS发生冲突的快速解决方法
Jan 24 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
Mar 05 Javascript
jQuery实现定时读取分析xml文件的方法
Jul 16 Javascript
JavaScript 常见安全漏洞和自动化检测技术
Aug 21 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
浅谈JavaScript的内置对象和浏览器对象
Jun 03 Javascript
angular.js分页代码的实例
Jul 27 Javascript
js编写简单的聊天室功能
Aug 17 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
Mar 18 Javascript
原生javascript AJAX 三级联动的实现代码
May 04 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
Dec 06 Javascript
js定义类的方法示例【ES5与ES6】
Jul 30 Javascript
使用新的消息弹出框blackbirdjs
Oct 16 #Javascript
用js统计用户下载网页所需时间的脚本
Oct 15 #Javascript
JS之小练习代码
Oct 12 #Javascript
javascript得到XML某节点的子节点个数的脚本
Oct 11 #Javascript
Javascript中Eval函数的使用说明
Oct 11 #Javascript
JavaScript更改class和id的方法
Oct 10 #Javascript
ppk谈JavaScript style属性
Oct 10 #Javascript
You might like
php中使用接口实现工厂设计模式的代码
2012/06/17 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
Laravel框架实现的上传图片到七牛功能详解
2019/09/06 PHP
gridpanel动态加载数据的实例代码
2013/07/18 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
2014/01/26 Javascript
PHP中CURL的几个经典应用实例
2015/01/23 Javascript
javascript实现类似java中getClass()得到对象类名的方法
2015/07/27 Javascript
JavaScript的instanceof运算符学习教程
2016/06/08 Javascript
Angular动态添加、删除输入框并计算值实例代码
2017/03/29 Javascript
Vuejs 页面的区域化与组件封装的实现
2017/09/11 Javascript
vue移动端路由切换实例分析
2018/05/14 Javascript
vue解决弹出蒙层滑动穿透问题的方法
2018/09/22 Javascript
基于vue如何发布一个npm包的方法步骤
2019/05/15 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
2019/05/22 Javascript
Vue+Element-UI实现上传图片并压缩
2019/11/26 Javascript
jQuery实现简易QQ聊天框
2020/02/10 jQuery
python正则表达式判断字符串是否是全部小写示例
2013/12/25 Python
Python实现监控程序执行时间并将其写入日志的方法
2015/06/30 Python
你眼中的Python大牛 应该都有这份书单
2017/10/31 Python
Python之Scrapy爬虫框架安装及简单使用详解
2017/12/22 Python
Python3 Post登录并且保存cookie登录其他页面的方法
2018/12/28 Python
python分数表示方式和写法
2019/06/26 Python
python pillow模块使用方法详解
2019/08/30 Python
Python操作qml对象过程详解
2019/09/26 Python
Python装饰器原理与基本用法分析
2020/01/07 Python
python 解决tqdm模块不能单行显示的问题
2020/02/19 Python
Python龙贝格法求积分实例
2020/02/29 Python
Python类中的装饰器在当前类中的声明与调用详解
2020/04/15 Python
Python OpenCV去除字母后面的杂线操作
2020/07/05 Python
Python pandas对excel的操作实现示例
2020/07/21 Python
程序设计HTML5 Canvas API
2013/04/08 HTML / CSS
Linux面试经常问的文件系统操作命令
2015/11/05 面试题
学校校庆演讲稿
2014/05/22 职场文书
班子成员四风问题自我剖析材料
2014/09/29 职场文书
检讨书范文大全
2015/05/07 职场文书
分享提高 Python 代码的可读性的技巧
2022/03/03 Python