집 > 기사 > 웹 프론트엔드 > jQuery 팝업 상자 코드는 DialogHelper_jquery를 캡슐화합니다.

jQuery 팝업 상자 코드는 DialogHelper_jquery를 캡슐화합니다.

WBOY원래의: 2016-05-16 16:16:591162검색

jQueryUI Dialog 예제를 보니 효과는 나쁘지 않은데 사용하기가 좀 어색하고 작성한 코드가 좀 꼬여 있어서 다시 캡슐화해야 합니다! 따라서 다음과 같은 간단한 DialogHelper 보조 클래스가 있습니다. 이 기사의 초점은 아이디어에 맞춰져 있기 때문에 현재 버전의 코드는 여전히 매우 대략적입니다. 이 아이디어는 옳습니다. 앞으로 어떤 내용을 요약하더라도 이 아이디어가 모든 사람에게 영감을 줄 수 있기를 바랍니다. 동시에 모든 사람이 자신의 생각을 확장하고 개선을 위한 더 나은 제안을 할 수 있기를 바랍니다.

코드 복사 코드는 다음과 같습니다.

//ScrollHelper.js 필요
함수 DialogHelper() {
    var _this = this;
    var doc = window.document;
    _this.maskDiv = null;
    _this.contentDiv = null;
    var 옵션 = {
        불투명도: 0.4
    };
    this.popup = 함수(contentdiv, optionArg) {
        if (optionArg) {
            for (optionArg의 var prop) {
                옵션[prop] = optionArg[prop];
            }
        }
        _this.contentDiv = 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 = 함수 () {
        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 = value.replace("px", "");
            }
        }
        return Math.ceil(값);
    };
    this.position = 함수(dialog,dialogBody, minusHeight) {
        대화상자 = 대화상자 || $(".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) || 대화상자.높이();
            너비 = 너비 < 300? 300 : 너비;
            높이 = 높이 < 450? 450 : 높이;
            $(대화상자).css({
                "너비": 너비 "px",
                "높이": 높이 "px",
                "top": Math.ceil((clientHeight - 높이) / 2) "px",
                "왼쪽": Math.ceil((clientWidth - 너비) / 2) "px"
            });
            다이얼로그바디 = 다이얼로그바디 || $(".Dialog_Body");
            if (dialogBody[0]) {
                마이너스 높이 = 마이너스 높이 || ($(".Dialog_Head").outerHeight() $(".Dialog_Foot").outerHeight());
                varDialogBodyHeight = 높이 - 마이너스 높이;
                DialogBody.height(dialogBodyHeight);
            }
        }
    }
}
var createDialogTemplate = function (optionArg, contentHtml, saveBtnClickHandler) {
    var 옵션 = {
        "액션": "",
        "제목": "",
        "너비": "50%",
        "높이": "50%"
    };
    if (optionArg) {
        for (optionArg의 var prop) {
            옵션[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 (saveBtnClickHandler 유형 == "함수") {
            saveBtnClickHandler();
        }
    });
    $("

").appendTo(newB);
$("

").html("Save").appendTo(newB);
    var minusHeight = DialogHead.outerHeight() DialogFoot.outerHeight();
    newDialog.data("위치", {
        너비: 옵션.너비,
        높이: 옵션.높이
    });
    DialogHelper.position(newDialog, DialogBody, minusHeight);
    newDialog 반환;
};
varchangeDialogLayout = function(optionArg,dialogObj) {
    var 옵션 = {
        "너비": "70%",
        "높이": "90%"
    };
    if (optionArg) {
        for (optionArg의 var prop) {
            옵션[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, ""));
    var minusHeight = DialogHead.outerHeight() DialogFoot.outerHeight() 기타;
    DialogObj.data("위치", {
        너비: 옵션.너비,
        높이: 옵션.높이
    });
    DialogHelper.position(dialogObj, DialogBody, minusHeight);
};

以上就是本文所分享의 전체 부서 内容了, 希望大家能够喜欢。

성명：

이전 기사：jQuery_jquery의 $.click() 유효하지 않은 문제 분석다음 기사：jQuery_jquery의 $.click() 유효하지 않은 문제 분석

jQuery 팝업 상자 코드는 DialogHelper_jquery를 캡슐화합니다.

관련 기사