Home > Web Front-end > JS Tutorial > jQuery popup layer plug-in simplified version code download_jquery

jQuery popup layer plug-in simplified version code download_jquery

WBOY
Release: 2016-05-16 18:59:55
Original
1022 people have browsed it
Copy code The code is as follows:

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);
}
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:'
'//模板
});
$.layershow();
}

(2)关闭层:
复制代码 代码如下:

$.layerclose("弹出层的ID");

注意:那个如果你的模板有CSS文件的话,就要直接引入到本页面就行了,这个简化版不能在别的框架弹出层的,所以也就没有了那个cssurl属性了,也没有target 属性了。
源码下载http://xiazai.jb51.net/jslib/jquery-layer.rar
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template