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