- String.prototype.replaceAll=function(s1,s2){
- returnthis.replace(newRegExp(s1,"gm"),s2);
- };
- (function($){
- /*
- *$-layer0.1-NewWaveJavascript
- *
- *Copyright(c)2008KingWong
- *$Date:2008-10-09$
- */
- 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___).css("top",_top);
- $("#"+___id___).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",
- 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>',
- 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;
- varopacity=$.layerSettings.opacity;
- __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").append(__bgDiv);
- }
- $("body").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___).append(__templete);
- $("#"+_contentid).append($.layerSettings.content);
- $("#"+_titleid).append($.layerSettings.title);
- varidd=___id___;
- $(".layerclose").bind("click",function()
- {
- $.layerclose(idd);
- });
- $("#"+___id___).bind("click",function()
- {
- varid=this.id;
- $.layerSetup(___settings___[id]);
- $(this).css("z-index",$.layermaxindex());
- });
- $(document).bind("click",function(e)
- {
- varpos=$.getMousePosition(e);
- });
- $(document).mousemove(function(e){
- if(isMouseDown&&dragStatus[currentElement.id]!='false'){
- $.updatePosition(e);
- if(dragCallbacks[currentElement.id]!=undefined){
- dragCallbacks[currentElement.id](e,currentElement);
- }
- returnfalse;
- }
- });
- $(document).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).css("cursor","move");
- $("#"+_moveid).mousedown(function(e){
- varid=this.id.replace("_move","");
- ___id___=id;
- $("#"+id).css("z-index",$.layermaxindex());
- $.layerSetup(___settings___[id]);
- if((dragStatus[___id___]=="off")||(dragStatus[___id___]=="handler"&&!holdingHandler))
- returnbubblings["#"+___id___];
- isMouseDown=true;
- currentElement=$("#"+___id___);
- varpos=$.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;
- });
- //endsetHandler
- })();
- },
- 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)显示层:
- functionshow()
- {
- $.layerSetup({
- id:"abc",//弹出层的ID
- title:"test",//标题
- content:'test',//内容
- isbg:false,//是否显示背景遮照层
- opacity:0.3,//背景遮照层的透明度,值越大透明度越低,0为完全透明,1为不透明
- 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>'//模板
- });
- $.layershow();
- }
(2)关闭层:
- $.layerclose("弹出层的ID");
注意:那个如果你的模板有CSS文件的话,就要直接引入到本页面就行了,这个简化版不能在别的框架弹出层的,所以也就没有了那个cssurl属性了,也没有target 属性了。