jQuery ポップアップ ボックス コードは DialogHelper_jquery をカプセル化します

jQueryUI ダイアログの例を確認すると、効果は悪くありませんが、使用するのが少し難しく、記述されたコードは少しねじれていて、再度カプセル化する必要があります。したがって、次のような単純な DialogHelper 補助クラスがあります。この記事の焦点はアイデアにあるため、現在のバージョンのコードはまだ非常に大まかです。このアイデアは正しいものであり、将来的にどのような内容にまとめられるとしても、このアイデアがすべての人にインスピレーションを与え、改善のためのより良い提案を提案できることを願っています。

コードをコピー コードは次のとおりです:

//ScrollHelper.jsが必要
関数 DialogHelper() {
    var _this = this;
    var doc = window.document;
    _this.maskDiv = null;
    _this.contentDiv = null;
    var オプション = {
        不透明度: 0.4
    };
    this.popup = function (contentdiv, optionArg) {
        if (optionArg) {
            for (optionArg の var prop) {
                options[prop] = optionArg[prop];
            }
        }
        _this.contentDiv = コンテンツディビジョン || _this.contentDiv;
        _this.maskDiv = $('

');
        _this.maskDiv.addClass('MaskDiv');
        _this.maskDiv.css({
            'フィルター': "Alpha(opacity=" ( options.opacity - "0" ) * 100 ");",
            '不透明度': options.opacity,
            '表示': 'ブロック'
        });
        $(doc.body).append(_this.maskDiv);
        if (_this.contentDiv) {
            $(doc.body).append(_this.contentDiv);
            _this.contentDiv.show();
            _this.contentDiv.draggable({
                収容: "ドキュメント"、
                カーソル: '移動'、
                ハンドル: ".Dialog_Head"
            });
            $(_this.maskDiv).on("mousemove", function() {
                $("body").preventScroll();
            });
            $(_this.maskDiv).on("mouseout", function() {
                $("body").liveScroll();
            });
            if ($(".cke").length == 0 && $(".Dialog_Body").length > 0) {
                $(".Dialog_Body").preventOuterScroll();
            }
        }
    };
    this.remove = function () {
        if (_this.contentDiv) {
            _this.contentDiv.remove();
        }
        if (_this.maskDiv) {
            _this.maskDiv.remove();
        }
        $("body").liveScroll();
    };
    this.formatPercentNumber = 関数 (値、全体) {
        if (isNaN(value) && typeof value === "string") {
            if (value.indexOf("%") !== -1) {
                値 = (value.replace("%", "") / 100) * 全体;
            else if (value.indexOf("px") !== -1) {
                値 = value.replace("px", "");
            }
        }
        return Math.ceil(value);
    };
    this.position = function (ダイアログ、ダイアログボディ、マイナス高さ) {
        ダイアログ = ダイアログ || $(".ShowDialogDiv");
        if (ダイアログ[0]) {
            var clientWidth = document.documentElement.clientWidth;
            var clientHeight = document.documentElement.clientHeight;
            var width = _this.formatPercentNumber(dialog.data("position").width, clientWidth) ||ダイアログ.幅();
            var height = _this.formatPercentNumber(dialog.data("position").height, clientHeight) ||ダイアログ.高さ();
            幅 = 幅             身長 = 身長             $(ダイアログ).css({
                "width": 幅 "px",
                "高さ": 高さ "px",
                "top": Math.ceil((clientHeight - 高さ) / 2) "px",
                "left": Math.ceil((clientWidth - width) / 2) "px"
            });
            ダイアログボディ = ダイアログボディ || $(".Dialog_Body");
            if (dialogBody[0]) {
                マイナス高さ = マイナス高さ || ($(".Dialog_Head").outerHeight() $(".Dialog_Foot").outerHeight());
                var DialogBodyHeight = 高さ - マイナス高さ;
                DialogBody.height(dialogBodyHeight);
            }
        }
    }
}
var createDialogTemplate = function (optionArg、contentHtml、saveBtnClickHandler) {
    var オプション = {
        "アクション": "",
        "タイトル": "",
        "幅": "50%"、
        「高さ」: 「50%」
    };
    if (optionArg) {
        for (optionArg の var prop) {
            options[prop] = optionArg[prop];
        }
    }
    var newDialog = $("

");
    var DialogHead = $("

").appendTo(newDialog);
    $("").html(options.Action " " options.Title).appendTo(DialogHead);
    var DialogClose = $("").appendTo(DialogHead);
    var DialogBody = $("

").html(contentHtml).appendTo(newDialog);
    var DialogFoot = $("

").appendTo(newDialog);
    var newDiv = $("

").appendTo(DialogFoot);
    var ActionCancelDiv = $("

").appendTo(newDiv);
    DialogClose.on("クリック", function() {
        DialogHelper.remove();
    });
    ActionCancelDiv.on("クリック", function() {
        DialogHelper.remove();
    });
    var newA = $("

").appendTo(ActionCancelDiv);
    $("

").appendTo(newA);
    $("

").html("キャンセル").appendTo(newA);
    var ActionSaveDiv = $("

").appendTo(newDiv);
    var newB = $("

").appendTo(ActionSaveDiv);
    newB.on('クリック', function () {
        if (typeof saveBtnClickHandler == "関数") {
            saveBtnClickHandler();
        }
    });
    $("

").appendTo(newB);
    $("

").html("保存").appendTo(newB);
    varminusHeight = DialogHead.outerHeight() DialogFoot.outerHeight();
    newDialog.data("位置", {
        幅: options.Width,
        高さ: options.Height
    });
    DialogHelper.position(newDialog, DialogBody, minusHeight);
    newDialog を返す;
};
varchangeDialogLayout=function(optionArg,dialogObj){
    var オプション = {
        "幅": "70%"、
        「高さ」: 「90%」
    };
    if (optionArg) {
        for (optionArg の var prop) {
            options[prop] = optionArg[prop];
        }
    }
    var DialogBody = $(dialogObj).find(".Dialog_Body");
    var DialogHead = $(dialogObj).find(".Dialog_Head");
    var DialogFoot = $(dialogObj).find(".Dialog_Foot");
    var other = Math.round(DialogBody.css("padding-top").replace(/[a-z]/ig, "")) Math.round(DialogBody.css("padding-bottom").replace(/[ a-z]/ig, ""));
    varminusHeight = DialogHead.outerHeight() DialogFoot.outerHeight() other;
    DialogObj.data("位置", {
        幅: options.Width,
        高さ: options.Height
    });
    DialogHelper.position(dialogObj, DialogBody, minusHeight);
};

以上が、ここで共有されるすべての内容です。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：jQuery_jqueryの$.click()の無効問題の解析次の記事：jQuery_jqueryの$.click()の無効問題の解析

関連記事

続きを見る

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル

• ホームページ

• コース

• に質問

• 私の

• ホームページ
• コース
• 記事
• に質問
• 辞書
• マニュアル
• ダウンロード
• 特集

ホームページ

記事

に質問

コース

特集

ダウンロード

ゲーム

辞書

简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）