jQuery ポップアップボックスコードは DialogHelper_jquery をカプセル化します-jsチュートリアル-php.cn

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);
};

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