jQuery弹出层插件简化版代码下载_jquery-js教程-PHP中文网

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

WBOY

发布： 2016-05-16 18:59:55

原创

1041 人浏览过

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:'@title@close
', 
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 = '
'; 
if($.layerSettings.isbg) 
{ 
$("body").append(__bgDiv); 
} 
$("body").append('
'); 
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); 
返回 false; 
} 
}); 
$(document).mouseup(function(e){ 
if(isMouseDown && DragStatus[currentElement.id] != 'false'){ 
isMouseDown = false; 
if(dropCallbacks[currentElement] .id] != undefined){ 
dropCallbacks[currentElement.id](e, currentElement) 
返回 false 
} 
}); 
(function(){ 
bubblings[___id___] = true; 

dragStatus[___id___] = "on"; 

//setHandler 
bubblings[this.id ] = true; 

dragStatus[_moveid] = "处理程序"

$("#" _moveid).css("光标", "移动"); $("#" _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; 
}); 
//结束 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; 
} 
} 
}); 
返回___索引； 
} 
}); 
})(jQuery);



使用方法： 

（1）显示层： 