Jquery 팝업 레이어 Plug-in_jquery

팝업 레이어 플러그인

String.prototype.replaceAll = function(s1,s2){ 
return this.replace(new RegExp(s1,"gm"),s2); 
}; 
(function($){ 
/* 
* $-layer 0.1 - jquery pulg-in 
* 
* Copyright (c) 2008 King Wong 

* $Date: 2008-09-28 $ 
*/ 
var ___win___ = window.self; 
var ___self___ = window.self; 
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___,___win___.document).css("top", _top); 
$("#"+___id___,___win___.document).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", 
target:window.self, 
width:220, 
height:220, 
templete:&#39;<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>&#39;, 
cssurl:&#39;&#39;, 
content:&#39;&#39;, 
title:&#39;&#39;, 
isbg:true, 
opacity:0.3 
}, 
layerSetup: function( settings ) { 
$.extend( $.layerSettings, settings ); 
___settings___[settings.id] = settings; 
___id___ = settings.id; 
}, 
layershow:function(){ 
___win___ = $.layerSettings.target == undefined || $.layerSettings.target == null ? window.self : $.layerSettings.target; 

var win = $.layerSettings.target == undefined || $.layerSettings.target == null ? window.self : $.layerSettings.target; 
var __bw = $("body",win.document).width(); 
var __bh = $("body",win.document).height() > $(window).height() ? $("body",win.document).height() : $(window).height(); 
var _width = $.layerSettings.width; 
var _height = $.layerSettings.height; 

if(___win___.document.getElementById(___id___)) return; 
var _moveid = ___id___ + "_move"; 
var _titleid = ___id___ + "_title"; 
var _contentid = ___id___ + "_content"; 
var _cssurl = $.layerSettings.cssurl; 
var opacity = $.layerSettings.opacity; 
(function(){ 
$("head",win.document).append(&#39;<link type="text/css" href="&#39;+_cssurl+&#39;" rel="stylesheet" />&#39;); 
})(); 
__index = $.layermaxindex(); 
var __left = (__bw - _width) > 0 ? (__bw - _width)/2 : 0; 
var __top = 100; 
var __bgDiv = &#39;<div id="&#39;+___id___+&#39;_background" style="background:#000000; filter:alpha(opacity=&#39;+(opacity*100)+&#39;); opacity: &#39;+opacity+&#39;; width:&#39;+__bw+&#39;px; height:&#39;+__bh+&#39;px; z-index:&#39;+(__index++)+&#39;; position:absolute; left:0px; top:0px;"></div>&#39;; 
if($.layerSettings.isbg) 
{ 
$("body",win.document).append(__bgDiv); 
} 
$("body",win.document).append(&#39;<div id="&#39;+___id___+&#39;" style="z-index:&#39;+__index+&#39;;position:absolute; left:&#39;+__left+&#39;px; top:&#39;+__top+&#39;px;"></div>&#39;); 
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___,win.document).append(__templete); 
$("#"+_contentid,win.document).append($.layerSettings.content); 
var self = window.self; 
var ___win = $.layerSettings.target.document; 
var idd = ___id___; 
$(".layerclose",win.document).bind("click",function() 
{ 
self.$.layerclose(idd,___win); 
}); 
$("#"+___id___,win.document).bind("click",function() 
{ 
var id = this.id; 
self.$.layerSetup(___settings___[id]); 
self.$(this).css("z-index",$.layermaxindex()); 
}); 
$(win.document,win).bind("click",function(e) 
{ 
var pos = self.$.getMousePosition(e); 

}); 
$(win.document,win).mousemove(function(e){ 
if(isMouseDown && dragStatus[currentElement.id] != &#39;false&#39;){ 
self.$.updatePosition(e); 
if(dragCallbacks[currentElement.id] != undefined){ 
dragCallbacks[currentElement.id](e, currentElement); 
} 
return false; 
} 
}); 
$(win.document,win).mouseup(function(e){ 
if(isMouseDown && dragStatus[currentElement.id] != &#39;false&#39;){ 
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,win.document).css("cursor", "move"); 

$("#"+_moveid,win.document).mousedown(function(e){ 
var id = this.id.replace("_move",""); 
___id___ = id; 
self.$("#"+id,win.document).css("z-index",$.layermaxindex()); 
self.$.layerSetup(___settings___[id]); 
if((dragStatus[___id___] == "off") || (dragStatus[___id___] == "handler" && !holdingHandler)) 
return bubblings["#"+___id___]; 

isMouseDown = true; 
currentElement = self.$("#"+___id___); 

var pos = self.$.getMousePosition(e); 
lastMouseX = pos.x; 
lastMouseY = pos.y; 

lastElemTop = win.document.getElementById(___id___).offsetTop; 
lastElemLeft = win.document.getElementById(___id___).offsetLeft; 

self.$.updatePosition(e); 
holdingHandler = true; 
}); 

$("#"+_moveid,win.document).mouseup(function(e){ 
holdingHandler = false; 
}); 
//end setHandler 
})(); 
}, 
layerclose:function(__id,__win) 
{ 
$("#"+__id+"_background",__win).remove(); 
$("#"+__id,__win).remove(); 
}, 
layermaxindex:function() 
{ 
var ___index = 0; 
$.each($("*",___win___.document),function(i,n){ 
var __tem = $(n).css("z-index"); 
if(__tem>0) 
{ 
if(__tem > ___index) 
{ 
___index = __tem + 1; 
} 
} 
}); 
return ___index; 
} 
}); 
})(jQuery);

사용법:

$.layerSetup({ 
id:"弹出层的ID", 
title:'弹出层的标题文字', 
target:在哪个目标柜架弹出层如window.parent，默认为window.self, 
cssurl:'弹出层的CSS样式文件的地址', 
content:'弹出的内容', 
isbg:是否显示一个遮照层, 
templete:&#39;为层设置布局模板如：<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>&#39;, 
opacity:设置遮照层的透明度, 
width:宽, 
height:高 
}); 
$.layershow();

"@titleid@", "@moveid@", "@contentid" 레이아웃 템플릿에서 @", "@width@", "@height@"는 제목 ID, 드래그 ID, 콘텐츠 ID, 너비, 높이 등을 템플릿에 배치하는 데 사용됩니다. 이는 템플릿에 따라 다른 위치에 배치될 수 있습니다. 당신이 디자인한 템플릿에