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 相关文章推荐
JS打开新窗口的2种方式
Apr 18 Javascript
js模仿hover的具体实现代码
Dec 30 Javascript
js控制文本框只输入数字和小数点的方法
Mar 10 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
Aug 24 Javascript
JavaScript String 对象常用方法总结
Apr 28 Javascript
Javascript的无new构建实例详解
May 15 Javascript
Angularjs过滤器使用详解
May 25 Javascript
完美实现js选项卡切换效果(二)
Mar 08 Javascript
JS实现数组按升序及降序排列的方法
Apr 26 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
Oct 26 Javascript
JS制作简易计算器的实例代码
Jul 04 Javascript
如何利用JS将手机号中间四位变成*号
Sep 29 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
从一个不错的留言本弄的mysql数据库操作类
2007/09/02 PHP
php数字游戏 计算24算法
2012/06/10 PHP
php使用PDO下exec()函数查询执行后受影响行数的方法
2017/03/28 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
Save a File Using a File Save Dialog Box
2007/06/18 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
2014/01/24 Javascript
Javascript学习笔记之数组的遍历和 length 属性
2014/11/23 Javascript
JavaScript中的console.log()函数详细介绍
2014/12/29 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
2015/09/14 Javascript
15个常用的jquery代码片段
2015/12/19 Javascript
Bootstrap Validator 表单验证
2016/07/25 Javascript
EasyUI创建对话框的两种方式
2016/08/23 Javascript
javascript实现去除HTML标签的方法
2016/12/26 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
2017/03/01 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
nodejs 图片预览和上传的示例代码
2017/09/30 NodeJs
微信小程序通过保存图片分享到朋友圈功能
2018/05/24 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
2019/11/01 Javascript
JS深入学习之数组对象排序操作示例
2020/05/01 Javascript
小程序Scroll-view上拉滚动刷新数据
2020/06/21 Javascript
[00:32]2018DOTA2亚洲邀请赛VGJ.T出场
2018/04/03 DOTA
python开发之IDEL(Python GUI)的使用方法图文详解
2015/11/12 Python
用不到50行的Python代码构建最小的区块链
2017/11/16 Python
Python之列表的插入&amp;替换修改方法
2018/06/28 Python
Python读取txt内容写入xls格式excel中的方法
2018/10/11 Python
python3去掉string中的标点符号方法
2019/01/22 Python
python matplotlib折线图样式实现过程
2019/11/04 Python
python中upper是做什么用的
2020/07/20 Python
python使用建议与技巧分享(一)
2020/08/17 Python
类、抽象类、接口的差异
2016/06/13 面试题
服务行业个人求职的自我评价
2013/12/12 职场文书
高一家长会邀请函
2014/01/12 职场文书
项目总经理岗位职责
2014/02/14 职场文书
《猴子种树》教学反思
2014/02/14 职场文书
2014年敬老院工作总结
2014/12/08 职场文书
个人工作总结怎么写?
2019/04/09 职场文书