jQuery基础之custombox弹出框

前言

在使用jquery.custombox.js时的一些记录

正文

jquery.custombox 是一款弹出框的jquery插件，它的原理是在一张新页面生成两个div，一种一个div是包含父页面的元素另外一个div是包含子页面的元素（大概是这样吧，这个插件使用JavaScript写的，只能看个大概），因此在子页面中也应该引用父页面所需的css样式（否则弹出框以后如果设置透明度为 <1,看到的父页面因为缺少相关的css样式结构会发生变化）
参考官网文档：customboxv3.0.2

插件源码探究

插件的基本结构

this值得是window,因此global是window,factory是插件封装的函数。使用 global.Custombox = factory(); 向外界提供一个Custombox 接口，这个Custombox 的内容为return返回的对象直接量。每次使用window.Custombox调用都会返回一个新的对象 直接量

(function( global, factory ) {
    if ( typeof exports === 'object' && typeof module !== 'undefined' ) {
        module.exports = factory();
    } else if ( typeof define === 'function' && define.amd ) {
        define(factory);
    } else {
        global.Custombox = factory();
    }
}(this,function(){
//定义一些配置
//定义一些方法
/** 这是闭包*/
return {
open: function(){
_private.set( options );
_private.init();},
close: function(){}
})

插件在function() {}的return之前定义了一些封装好的方法供open与close函数调用

因为每次调用window.Custombox都会返回一个新的对象（每个对象对应一个全新的弹出框），因此每个对象都需要有自己独特的设置。我们只需要在外界记录这些创建的对象，特定的对象有自己的上下文，执行某个对象的方法时会在对应的上下文得到一些数据（如上面的一些配置，一些方法，一些自己的数据）

_private是一个{}的对象，里面定义了大量的封装方法同时也保存当前对话框对象的一些数据，因为每次调用window.Custombox会产生一个新的对象，在执行factory()方法的时候这个_private也是新的，这种的效果和new创建对象并保存相应的成员属性的效果相同（成员属性和方法的用处就是不同对象的属性，数据不同，而类属性在创建多个对象会发生覆盖）

插件的一些方法

built方法

switch ( item ) {
    case 'container':
    case 'overlay':
    case 'modal':
    case 'loading':
}

container创建一个div存放父页面的元素
overlay创建一个div作为遮罩层
modal创建一个div存放子页面元素
loading创建一个div作为加载样式

binds方法
binds方法里监听了一些事件，比如点击遮罩层实现对话框关闭（可配置）

ajax获取子页面

open方法实现了获取子页面并将页面插入到自定的div的代码逻辑

// Create overlay.
if ( this.cb[this.item].settings.overlay ) {
    this.built('overlay').built('modal').open();
} else {
    this.built('modal').open();
}

open方法里面使用ajax加载子页面，而ajax返回的是html，将这个html插入到指定的子页面的div中

     xhr.onreadystatechange = function() {
                if ( xhr.readyState === 4 ) {
                    if( xhr.status === 200 ) {
                        modal.innerHTML = xhr.responseText;
                        cb.content = modal;
                        cb.content.style.display = 'block';
                        if ( _config.oldIE ) {
                            cb.content.style.styleFloat = 'left';
                        } else {
                            cb.content.style.cssFloat = 'left';
                        }
                        cb.container.appendChild(cb.content);
                        _this.size();
                    } else {
                        _this.error();
                    }
                }
            };

插件使用

插件提供了option的可配置项，在使用中可以指定自己喜欢的选项来更改弹出框的一些表现形式

打开一个对话框

 Custombox.open({
    target: '#modal',
    effect: 'fadein',
    close:function(){}
 });

关闭一个对话框

Custombox.close(element,callback)

需要注意的是关闭的对话框对象和打开的对话框对象要一致，正如上面源码探究一节所述那样Custombox都会返回一个新的对象，如果打算采用上面所写的代码去打开关闭对话框会出现异常，因为它们的Custombox返回的对象直接量不一致导致打开对话框生成的一些数据在关闭对话框的时候无法获取。
解决办法是在父页面使用window._custombox保存这个Custombox对象，使用_custombox来执行open和close对象。因为close的方法调用是在子页面而上面源码分析所知子页面和父页面的元素都是在同一张页面中，所以可以在子页面访问到window_custombox对象，从而可以用这个对象实现关闭对话框的功能

在关闭对话框时可以执行callback做一些父页面数据刷新功能，也可以在open的时候指定close：function（）{},当关闭对话框后回调这个在open函数配置的close方法时刷新父页面一些表格数据

封装custombox

直接使用custombox有点麻烦，所以自己在这个插件基础上再次封装了一层

例子-框架的结构

(function($){
    var easyDialog =  function() {
         var $$this = new easyDialog.prototype.init(); 
         return $$this;
     }
     $.extend(easyDialog, {
        //配置类属性，所有对象通用
        defaultOption: {},
     }
     //原型方法
     easyDialog.prototype = { 
        init: function () {  //初始化方法，返回init的this对象
             return this;
         }
         //其他一些成员方法
     }
     easyDialog.prototype.init.prototype = easyDialog.prototype;
     window.easyDialog = easyDialog;
}(jQuery));

在原型上重写了close和open方法，重写的方法也只是调用custombox插件的open和close方法，适当处理是使用this.currentCustombox来记录每次创建的custombox对象

使用custombox注意的地方

单独使用子页面显示一些行内元素是正常，但是在对话框中就不正常了。例如text-align:center这是custombox所产生的div的一个指定的样式，而在子页面的一些布局中没有指定采用默认的，因此会继承这个custombox的text-algin:center样式，导致效果发生变化。
解决办法就是在这页面指定这些样式，而不去继承父（custombox）的样式