刚刚写的一个jquery的弹出层的插件
- String.prototype.replaceAll=function(s1,s2){
- returnthis.replace(newRegExp(s1,"gm"),s2);
- };
- (function($){
- /*
- *$-layer0.1-jquerypulg-in
- *
- *Copyright(c)2008KingWong
- *$Date:2008-09-28$
- */
- var___win___=window.self;
- var___self___=window.self;
- var___id___="";
- var___settings___={};
- varisMouseDown=false;
- varcurrentElement=null;
- vardropCallbacks={};
- vardragCallbacks={};
- varbubblings={};
- varlastMouseX;
- varlastMouseY;
- varlastElemTop;
- varlastElemLeft;
- vardragStatus={};
- varholdingHandler=false;
- $.getMousePosition=function(e){
- varposx=0;
- varposy=0;
- if(!e)vare=window.event;
- if(e.pageX||e.pageY){
- posx=e.pageX;
- posy=e.pageY;
- }
- elseif(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){
- varpos=$.getMousePosition(e);
- varspanX=(pos.x-lastMouseX);
- varspanY=(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.οndrag=function(callback){
- returnthis.each(function(){
- dragCallbacks[this.id]=callback;
- });
- };
- $.fn.οndrοp=function(callback){
- returnthis.each(function(){
- dropCallbacks[this.id]=callback;
- });
- };
- $.fn.dragOff=function(){
- returnthis.each(function(){
- dragStatus[this.id]='off';
- });
- };
- $.fn.dragOn=function(){
- returnthis.each(function(){
- dragStatus[this.id]='on';
- });
- };
- $.extend({
- layerSettings:{
- id:"layerdiv",
- target:window.self,
- width:220,
- height:220,
- templete:'<divstyle="height:20px;width:@width@px;background-color:#777777;"><spanid="@moveid@"style="position:relative;left:0px;top:0px;height:20px;width:100px;"><spanid="@titleid@">@title@</span></span><spanclass="layerclose"style="position:relative;top:0px;float:right;right:20px;color:red;">close</span></div><divstyle="border:solid#ff00001px;width:@width@px;height:@height@px;"><divstyle="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;
- varwin=$.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;
- varopacity=$.layerSettings.opacity;
- (function(){
- $("head",win.document).append('<linktype="text/css"href="'+_cssurl+'"rel="stylesheet"/>');
- })();
- __index=$.layermaxindex();
- var__left=(__bw-_width)>0?(__bw-_width)/2:0;
- var__top=100;
- var__bgDiv='<divid="'+___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('<divid="'+___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);
- varself=window.self;
- var___win=$.layerSettings.target.document;
- varidd=___id___;
- $(".layerclose",win.document).bind("click",function()
- {
- self.$.layerclose(idd,___win);
- });
- $("#"+___id___,win.document).bind("click",function()
- {
- varid=this.id;
- self.$.layerSetup(___settings___[id]);
- self.$(this).css("z-index",$.layermaxindex());
- });
- $(win.document,win).bind("click",function(e)
- {
- varpos=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);
- }
- returnfalse;
- }
- });
- $(win.document,win).mouseup(function(e){
- if(isMouseDown&&dragStatus[currentElement.id]!='false'){
- isMouseDown=false;
- if(dropCallbacks[currentElement.id]!=undefined){
- dropCallbacks[currentElement.id](e,currentElement);
- }
- returnfalse;
- }
- });
- (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){
- varid=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))
- returnbubblings["#"+___id___];
- isMouseDown=true;
- currentElement=self.$("#"+___id___);
- varpos=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;
- });
- //endsetHandler
- })();
- },
- 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:'为层设置布局模板如:<divclass="showwint_mini_title"><spanclass="showwint_mini_close_btn"><ahref="javascript:void(null);"class="layerclose"></a></span><spanclass="showwint_mini_title_content"id="@moveid@"><spanid="@titleid@"></span></span></div><divclass="showwint_mini_content"><divclass="showwint_mini_content_content"id="@contentid@"></div></div>',
- opacity:设置遮照层的透明度,
- width:宽,
- height:高
- });
- $.layershow();
其中布局模板中的"@titleid@"、"@moveid@"、"@contentid@"、"@width@"、"@height@"为模板中放置标题ID、拖动ID、内容ID、宽、高等,可以根据你自己设计的模板不同放在不同的位置.