JQuery弹出层类库

Function.prototype.binding = function() { if (arguments.length < 2 && typeof arguments[0] == "undefined") return this; var __method = this, args = jQuery.makeArray(arguments), object = args.shift(); return function() { return __method.apply(object, args.concat(jQuery.makeArray(arguments))); } } var Class = function(subclass){ subclass.setOptions = function(options){ this.options = jQuery.extend({}, this.options,options); for(var key in options){ if(/^on[A-Z][A-Za-z]*$/.test(key)){ $(this).bind(key,options[key]); } } } var fn = function(){ if(subclass._init && typeof subclass._init == 'function'){ this._init.apply(this,arguments); } } if(typeof subclass == 'object'){ fn.prototype = subclass; } return fn; } var PopupLayer = new Class({ options:{ trigger:null, //触发的元素或id,必填参数 popupBlk:null, //弹出内容层元素或id,必填参数 closeBtn:null, //关闭弹出层的元素或id popupLayerClass:"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下的select this.trigger = $(this.options.trigger); //把触发元素封装成实例的一个属性，方便使用及理解 this.popupBlk = $(this.options.popupBlk); //把弹出内容层元素封装成实例的一个属性 this.closeBtn = $(this.options.closeBtn); //把关闭按钮素封装成实例的一个属性 $(this).trigger("onBeforeStart"); //执行自定义事件。 this._construct() //通过弹出内容层，构造弹出层，即为其添加外层容器及底层iframe this.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,height: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,height:this.popupBlk.get(0).offsetHeight}); }, close:function(){ //关闭方法 this.options.useOverlay?this.overlay.hide():null; this.options.useFx?this.doEffects("close"):this.popupLayer.hide(); } });

 

附上demo下载地址，附送教程。
http://files.cnblogs.com/shuicaituya/Javascripters%E5%A4%A7%E4%BD%9C--jQuery%E5%BC%B9%E5%B1%82%E7%B1%BB.rar