jQuery弹出层插件简化版

wlcxx98

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

最近访客更多访客>>

cuiwenxiao

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery CSS JavaScript prototype 框架

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.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",
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 属性了。

分享到：

MS SQL大值数据类型varchar(max)、nvarchar ... | jquery日期选择插件

2008-10-09 21:47
浏览 1660
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery弹出层插件简化版

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery弹出层插件简化版

评论

发表评论

相关推荐

最近访客更多访客>>