刚刚写的一个jquery的弹出层的插件

最新推荐文章于 2021-06-07 16:59:32 发布

iteye_1732

最新推荐文章于 2021-06-07 16:59:32 发布

阅读量75

点赞数

文章标签： jQuery CSS JavaScript prototype ViewUI

刚刚写的一个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、宽、高等，可以根据你自己设计的模板不同放在不同的位置.

iteye_1732

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
刚刚写的一个jquery的弹出层的插件

刚刚写的一个jquery的弹出层的插件String.prototype.replaceAll=function(s1,s2){returnthis.replace(newRegExp(s1,"gm"),s2);};(function($){/**$-layer0.1-jquerypulg-in**Copyright(c)2008KingWo...
复制链接

扫一扫