jQuery彈出框程式碼封裝DialogHelper_jquery-js教程-PHP中文網

jQuery彈出框程式碼封裝DialogHelper_jquery

WBOY

發布： 2016-05-16 16:16:59

原創

1205 人瀏覽過

看了jQueryUI Dialog的例子，效果還不錯，就是用起來有點彆扭，寫出的程式碼有點擰巴，需要再封裝一下！於是就有了下面這個簡單的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 = 內容div || _this.contentDiv;
        _this.maskDiv = $('

');
        _this.maskDiv.addClass('MaskDiv');
        _this.maskDiv.css({
            'filter': "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 = function (值, 整體) {
        if (isNaN(value) && typeof value === "string") {
            if (value.indexOf("%") !== -1) {
                value = (value.replace("%", "") / 100) * 整體;
            } else if (value.indexOf("px") !== -1) {
                value = value.replace("px", "");
            }
        }
        return Math.ceil(值);
    };
    this.position = function (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) ||對話框.width();
            var height = _this.formatPercentNumber(dialog.data("position").height, clientHeight) ||對話框.height();
            寬度=寬度             高度=高度             $(對話方塊).css({
                “寬度”：寬度“px”，
                “高度”：高度“px”，
                "上": Math.ceil((clientHeight - 高度) / 2) "px",
                "左": Math.ceil((clientWidth - 寬度) / 2) "px"
            });
            對話主體 = 對話主體 || $(".Dialog_Body");
            if (dialogBody[0]) {
                減高度 = 減少高度 || ($(".Dialog_Head").outerHeight() $(".Dialog_Foot").outerHeight()))
;
;
;
;
;
;
;
;
;
;
;                 vardialogBodyHeight = 高度 - minusHeight;
                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);
    var minusHeight = DialogHead.outerHeight() DialogFoot.outerHeight();
    newDialog.data("位置", {
        寬度：選項.寬度，
        高度：選項.高度
    });
    dialogHelper.position(newDialog, DialogBody, minusHeight);
    返回新對話框；
};
var changeDialogLayout = 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, ""));
    var minusHeight = DialogHead.outerHeight() DialogFoot.outerHeight() other;
    dialogObj.data("位置", {
        寬度：選項.寬度，
        高度：選項.高度
    });
    dialogHelper.position(dialogObj, DialogBody, minusHeight);
};

以上就是本文所分享的全部內容了，希望大家能夠喜歡。