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 字符串与数组转换函数[不用split与join]
Dec 13 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
Mar 03 Javascript
通过上下左右键和回车键切换光标实现代码
Mar 08 Javascript
关于JavaScript中string 的replace
Apr 12 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
Sep 25 Javascript
jquery操作 iframe的方法
Dec 03 Javascript
Javascript URI 解析介绍
Mar 15 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
May 23 Javascript
利用css+原生js制作简单的钟表
Apr 07 Javascript
在使用JSON格式处理数据时应该注意的问题小结
May 20 Javascript
React.js绑定this的5种方法(小结)
Jun 05 Javascript
微信小程序缓存过期时间的使用详情
May 12 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
一个ubbcode的函数,速度很快.
2006/10/09 PHP
php获取文件内容最后一行示例
2014/01/09 PHP
wamp服务器访问php非常缓慢的解决过程
2015/07/01 PHP
PHP数组操作实例分析【添加,删除,计算,反转,排序,查找等】
2016/12/24 PHP
XML的代替者----JSON
2007/07/21 Javascript
基于jquery的一个简单的脚本验证插件
2010/04/05 Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
2010/06/21 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
2013/08/13 Javascript
jquery单行文字向上滚动效果的实现代码
2014/09/05 Javascript
JavaScript驾驭网页-获取网页元素
2016/03/24 Javascript
Bootstrap文件上传组件之bootstrap fileinput
2016/11/25 Javascript
webpack配置导致字体图标无法显示的解决方法
2018/03/06 Javascript
vue axios post发送复杂对象问题
2019/06/04 Javascript
js判断鼠标移入移出方向的方法
2020/06/24 Javascript
vue监听键盘事件的相关总结
2021/01/29 Vue.js
[20:39]DOTA2-DPC中国联赛 正赛开幕式 1月18日
2021/03/11 DOTA
简单文件操作python 修改文件指定行的方法
2013/05/15 Python
python实现在windows服务中新建进程的方法
2015/06/30 Python
Python操作MongoDB详解及实例
2017/05/18 Python
Python设计模式之备忘录模式原理与用法详解
2019/01/15 Python
tensorflow 变长序列存储实例
2020/01/20 Python
pytorch 使用加载训练好的模型做inference
2020/02/20 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
css3利用transform变形结合事件完成扇形导航
2020/10/26 HTML / CSS
计算机开发个人求职信范文
2013/09/26 职场文书
酒店前厅员工辞职信
2014/01/08 职场文书
二年级数学教学反思
2014/01/21 职场文书
一位农村小子的自荐信
2014/04/07 职场文书
政府法律服务方案
2014/06/14 职场文书
金融专业求职信
2014/08/05 职场文书
2014年大堂经理工作总结
2014/11/21 职场文书
2015年学雷锋活动总结
2015/02/06 职场文书
2015大学生暑假调查报告
2015/07/13 职场文书
理解深度学习之深度学习简介
2021/04/14 Python
Python爬取英雄联盟MSI直播间弹幕并生成词云图
2021/06/01 Python
ubuntu20.04虚拟机无法上网的问题及解决
2022/12/24 Servers