分享3k大小的万能jquery弹出层类库...
时间:2010-08-09 来源:jeff06143132
附上demo下载地址,附送教程。 http://files.cnblogs.com/shuicaituya/Javascripters%E5%A4%A7%E4%BD%9C--jQuery%E5%BC%B9%E5%B1%82%E7%B1%BB.rar Function.prototype.binding=function() {if(arguments.length<2&&typeofarguments[0]=="undefined")returnthis;var__method=this, args=jQuery.makeArray(arguments), object=args.shift();returnfunction() {return__method.apply(object, args.concat(jQuery.makeArray(arguments))); } }varClass=function(subclass){ subclass.setOptions=function(options){this.options=jQuery.extend({},this.options,options);for(varkeyinoptions){if(/^on[A-Z][A-Za-z]*$/.test(key)){ $(this).bind(key,options[key]); } } }varfn=function(){if(subclass._init&&typeofsubclass._init=='function'){this._init.apply(this,arguments); } }if(typeofsubclass=='object'){ fn.prototype=subclass; }returnfn; }varPopupLayer=newClass({ options:{ trigger:null,//触发的元素或id,必填参数popupBlk:null,//弹出内容层元素或id,必填参数closeBtn:null,//关闭弹出层的元素或idpopupLayerClass:"popupLayer",//弹出层容器的class名称eventType:"click",//触发事件的类型offsets:{//弹出层容器位置的调整值x:0, y:0}, useFx:false,//是否使用特效useOverlay:false,//是否使用全局遮罩usePopupIframe:true,//是否使用容器遮罩isresize:true,//是否绑定window对象的resize事件onBeforeStart:function(){}//自定义事件}, _init:function(options){this.setOptions(options);//载入设置this.isSetPosition=this.isDoPopup=this.isOverlay=true;//定义一些开关this.popupLayer=$(document.createElement("div")).addClass(this.options.popupLayerClass);//初始化最外层容器this.popupIframe=$(document.createElement("iframe")).attr({border:0,frameborder:0});//容器遮罩,用于屏蔽ie6下的selectthis.trigger=$(this.options.trigger);//把触发元素封装成实例的一个属性,方便使用及理解this.popupBlk=$(this.options.popupBlk);//把弹出内容层元素封装成实例的一个属性this.closeBtn=$(this.options.closeBtn);//把关闭按钮素封装成实例的一个属性$(this).trigger("onBeforeStart");//执行自定义事件。this._construct()//通过弹出内容层,构造弹出层,即为其添加外层容器及底层iframethis.trigger.bind(this.options.eventType,function(){//给触发元素绑定触发事件if(this.isSetPosition){this.setPosition(this.trigger.offset().left+this.options.offsets.x,this.trigger.offset().top+this.trigger.get(0).offsetHeight+this.options.offsets.y); }this.options.useOverlay?this._loadOverlay():null;//如果使用遮罩则加载遮罩元素(this.isOverlay&&this.options.useOverlay)?this.overlay.show():null;if(this.isDoPopup&&(this.popupLayer.css("display")=="none")){this.options.useFx?this.doEffects("open"):this.popupLayer.show(); } }.binding(this));this.isresize?$(window).bind("resize",this.doresize.binding(this)):null;this.options.closeBtn?this.closeBtn.bind("click",this.close.binding(this)):null;//如果有关闭按钮,则给关闭按钮绑定关闭事件}, _construct:function(){//构造弹出层this.popupBlk.show();this.popupLayer.append(this.popupBlk.css({opacity:1})).appendTo($(document.body)).css({position:"absolute",'z-index':2,width:this.popupBlk.get(0).offsetWidth,">this.popupBlk.get(0).offsetHeight});this.options.usePopupIframe?this.popupLayer.append(this.popupIframe):null;this.recalculatePopupIframe();this.popupLayer.hide(); }, _loadOverlay:function(){//加载遮罩pageWidth=($.browser.version=="6.0")?$(document).width()-21:$(document).width();this.overlay?this.overlay.remove():null;this.overlay=$(document.createElement("div"));this.overlay.css({position:"absolute","z-index":1,left:0,top:0,zoom:1,display:"none",width:pageWidth,height:$(document).height()}).appendTo($(document.body)).append("<div style='position:absolute;z-index:2;width:100%;height:100%;left:0;top:0;opacity:0.3;filter:Alpha(opacity=30);background:#000'></div><iframe frameborder='0' border='0' style='width:100%;height:100%;position:absolute;z-index:1;left:0;top:0;filter:Alpha(opacity=0);'></iframe>") }, doresize:function(){this.overlay?this.overlay.css({width:($.browser.version=="6.0")?$(document).width()-21:$(document).width(),height:($.browser.version=="6.0")?$(document).height()-4:$(document).height()}):null;if(this.isSetPosition){this.setPosition(this.trigger.offset().left+this.options.offsets.x,this.trigger.offset().top+this.trigger.get(0).offsetHeight+this.options.offsets.y); } }, setPosition:function(left,top){//通过传入的参数值改变弹出层的位置this.popupLayer.css({left:left,top:top}); }, doEffects:function(way){//做特效way=="open"?this.popupLayer.show("slow"):this.popupLayer.hide("slow"); }, recalculatePopupIframe:function(){//重绘popupIframe,这个不知怎么改进,只好先用这个笨办法。this.popupIframe.css({position:"absolute",'z-index':-1,left:0,top:0,opacity:0,width:this.popupBlk.get(0).offsetWidth,">this.popupBlk.get(0).offsetHeight}); }, close:function(){//关闭方法this.options.useOverlay?this.overlay.hide():null;this.options.useFx?this.doEffects("close"):this.popupLayer.hide(); } }); |
相关阅读 更多 +