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:'<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>', cssurl:'', content:'', title:'', 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('<link type="text/css" href="'+_cssurl+'" rel="stylesheet" />'); })(); __index = $.layermaxindex(); var __left = (__bw - _width) > 0 ? (__bw - _width)/2 : 0; var __top = 100; var __bgdiv = '<div id="'+___id___+'_background" style="background:#000000; filter:alpha(opacity='+(opacity*100)+'); opacity: '+opacity+'; width:'+__bw+'px; height:'+__bh+'px; z-index:'+(__index++)+'; position:absolute; left:0px; top:0px;"></div>'; if($.layersettings.isbg) { $("body",win.document).append(__bgdiv); } $("body",win.document).append('<div id="'+___id___+'" style="z-index:'+__index+';position:absolute; left:'+__left+'px; top:'+__top+'px;"></div>'); 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] != 'false'){ 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] != '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,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:'为层设置布局模板如：<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>', opacity:设置遮照层的透明度, width:宽, height:高 }); $.layershow();
其中布局模板中的@titleid@、@moveid@、@contentid@、@width@、@height@为模板中放置标题id、拖动id、内容id、宽、高等，可以根据你自己设计的模板不同放在不同的位置.