文章详情

  • 游戏榜单
  • 软件榜单
关闭导航
热搜榜
热门下载
热门标签
php爱好者> php文档>分享3k大小的万能jquery弹出层类库...

分享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();
    }
});
相关阅读 更多 +
排行榜 更多 +
辰域智控app

辰域智控app

系统工具 下载
网医联盟app

网医联盟app

运动健身 下载
汇丰汇选App

汇丰汇选App

金融理财 下载