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 相关文章推荐
javascript知识点收藏
Feb 22 Javascript
jQuery插件开发全解析
Oct 10 Javascript
$.getJSON在IE下失效的原因分析及解决方法
Jun 16 Javascript
jQuery is()函数用法3例
May 06 Javascript
CSS3,HTML5和jQuery搜索框集锦
Dec 02 Javascript
基于JavaScript如何制作遮罩层对话框
Jan 26 Javascript
JS获取一个未知DIV高度的方法
Aug 09 Javascript
js生成随机颜色方法代码分享(三种)
Dec 29 Javascript
原生js实现放大镜效果
Jan 11 Javascript
webpack写jquery插件的环境配置
Dec 21 jQuery
微信小程序input框中加入小图标的实现方法
Jun 19 Javascript
在weex中愉快的使用scss的方法步骤
Jan 02 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学习之php4与php5之间会穿梭一点点感悟
2007/05/03 PHP
php获取操作系统语言代码
2013/11/04 PHP
php中文验证码实现示例分享
2014/01/12 PHP
php计算给定时间之前的函数用法实例
2015/04/03 PHP
php通过curl添加cookie伪造登陆抓取数据的方法
2016/04/02 PHP
浅谈PHP的反射机制
2016/12/15 PHP
PHP实现非阻塞模式的方法分析
2018/07/26 PHP
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
2011/04/16 Javascript
jquery中ajax学习笔记3
2011/10/16 Javascript
简单实例处理url特殊符号&amp;处理(2种方法)
2013/04/02 Javascript
JS验证字符串功能
2017/02/22 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
2017/04/22 Javascript
npm 更改默认全局路径以及国内镜像的方法
2018/05/16 Javascript
深入理解js A*寻路算法原理与具体实现过程
2018/12/13 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
2019/01/22 Javascript
浅谈如何优雅处理JavaScript异步错误
2019/11/12 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
分享Python文本生成二维码实例
2016/01/06 Python
Python实现可获取网易页面所有文本信息的网易网络爬虫功能示例
2018/01/15 Python
python+opencv像素的加减和加权操作的实现
2019/07/14 Python
如何在python中写hive脚本
2019/11/08 Python
Jupyter Notebook 文件默认目录的查看以及更改步骤
2020/04/14 Python
美国知名的在线旅游服务网站:Priceline
2016/07/23 全球购物
洛佩桑酒店官方网站:Lopesan Hotels
2019/04/15 全球购物
NYX Professional Makeup俄罗斯官网:世界知名的化妆品品牌
2019/12/26 全球购物
计算机工程学院个人求职信
2013/10/05 职场文书
个人求职信范文分享
2014/01/31 职场文书
财务部副经理岗位职责
2014/03/14 职场文书
学校花圃的标语
2014/06/18 职场文书
飞越疯人院观后感
2015/06/09 职场文书
队列队形口号
2015/12/25 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书
python基于tkinter制作无损音乐下载工具
2021/03/29 Python
python编程学习使用管道Pipe编写优化代码
2021/11/20 Python