PHP程序员站--PHP编程开发平台
 当前位置:主页 >> 网页制作 >> Javascript >> 

3K大小的万能JQuery弹出层类库

3K大小的万能JQuery弹出层类库

来源:互联网  作者:  发布时间:2010-03-02
一个3k大小的万能jquery弹出层类,压缩包里共有9个弹出层效果,

一个3k大小的万能jquery弹出层类,压缩包里共有9个弹出层效果,其中包括经典的弹出层背景变暗效果.强烈推荐

演示地址

下载地址

 

 

以下为引用的内容:
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();
 }
});


延伸阅读:
什么是jquery
jQuery简单应用
jQuery压缩版
jQuery原版(未压缩版)
12个web开发必须知道的JQuery 技巧
JQuery 常用方法基础教程
jQuery1.4 Alpha 2发布
推荐10个jquery动画菜单 十分漂亮的插件
二十个超级酷和最实用的jQuery实例
jQuery+CSS图片展示特效


jQuery图片切换效果插件
21个演示展示强大的jQuery特效
15个最佳jQuery幻灯插件和教程
jQuery+CSS实现多级下拉菜单
7个jquery手风琴效果推荐
9个流行的jquery手风琴菜单插件
jQuery 1.4.4 RC2 发布
20个最新jQuery插件推荐
十个jQuery图片画廊插件推荐
26个功能强大的JQuery特效
Tags: class       弹出层   jQuery   万能   弹出  
最新文章
推荐阅读
月点击排行榜
PHP程序员站 Copyright © 2007-2010,PHPERZ.COM All Rights Reserved 粤ICP备07503606号