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

wlcxx98

浏览: 62870 次
性别:
来自: 长沙

最近访客更多访客>>

cuiwenxiao

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery CSS JavaScript prototype

刚刚写的一个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.ondrag=function(callback){

returnthis.each(function(){

dragCallbacks[this.id]=callback;
});
};

$.fn.ondrop=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();