jQueryベースのcustomboxポップアップボックス

前言
jqueryを使用しています.custombox.js時のいくつかの記録
本文
jquery.customboxは、親ページを含む要素と、子ページを含む要素(JavaScriptで書かれたもので、大まかにしか見えない)の2つのdivを生成するポップアップボックスのjqueryプラグインです.したがって、サブページでは、親ページに必要なcssスタイルも参照する必要があります(そうでない場合は、ポップアップボックス以降に透明度を<1に設定すると、関連するcssスタイル構造が欠けているため、親ページが表示されます)公式サイトドキュメント:customboxv 3.0.2
プラグインソースの探究
プラグインの基本構造
これはwindowに値するのでglobalはwindow、factoryはプラグインパッケージの関数です.globalを使用します.Custombox = factory(); 外部にCustomboxインタフェースを提供し、このCustomboxの内容はreturnが返すオブジェクトの直接量である.Windowsを使うたびに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関数呼び出しのためにいくつかのカプセル化された方法を定義した.
Windowsを呼び出すたびにCustomboxでは、新しいオブジェクトが返されます(各オブジェクトは新しいポップアップボックスに対応します).したがって、各オブジェクトには独自の設定が必要です.作成したオブジェクトを外部に記録するだけで、特定のオブジェクトには独自のコンテキストがあり、あるオブジェクトのメソッドを実行すると、対応するコンテキストでいくつかのデータ(上記の構成、いくつかのメソッド、いくつかの独自のデータ)が得られます._privateは{}のオブジェクトであり、windowが呼び出されるたびに現在のダイアログボックスのオブジェクトのデータも保存するため、大量のパッケージ方法が定義されている.Customboxは、factory()メソッドを実行するときにこの_privateも新しいオブジェクトを生成します.この効果はnewがオブジェクトを作成し、対応するメンバー属性を保存する効果と同じです(メンバー属性とメソッドの用途は、異なるオブジェクトの属性であり、データは異なり、クラス属性は複数のオブジェクトを作成すると上書きされます).
プラグインのいくつかの方法
ビルトメソッド

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を返し、指定したサブページのdivにこのhtmlを挿入します.

     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オブジェクトを保存し、openオブジェクトとcloseオブジェクトを実行するために_customboxを使用します.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)のスタイルを継承せずに、このページでこれらのスタイルを指定することです.