Home > Web Front-end > JS Tutorial > A jquery pop-up layer plug-in_jquery

A jquery pop-up layer plug-in_jquery

PHP中文网
Release: 2016-05-16 19:00:20
Original
1038 people have browsed it

Pop-up layer plug-in

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);
Copy after login

Usage:

$.layerSetup({ 
id:"弹出层的ID", 
title:&#39;弹出层的标题文字&#39;, 
target:在哪个目标柜架弹出层如window.parent,默认为window.self, 
cssurl:&#39;弹出层的CSS样式文件的地址&#39;, 
content:&#39;弹出的内容&#39;, 
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();
Copy after login

The "@titleid@", "@moveid@", "@contentid" in the layout template @", "@width@", "@height@" are used to place the title ID, drag ID, content ID, width, height, etc. in the template. They can be placed in different locations according to the template you design.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template