jQueryポップアップボックスコードパッケージDialogHelper

16248 ワード

jQueryUI Dialogの例を見て、効果は悪くなくて、使うのが少し違和感があって、書いたコードは少しねじれて、更にカプセル化する必要があります!そこで、次のような簡単なDialogHelper補助クラスがありました.この文章の共有の重点は構想なので、現在のバージョンのコードも非常に粗いです.構想は正しくて、後続は更にどのようにカプセル化してすべて形式にすぎないで、この構想がみんなに啓発することができることを望んで、同時にみんなが思考を開拓することを歓迎して、もっと良い改善意見を提出します.
 
  
//require ScrollHelper.js
function DialogHelper() {
    var _this = this;
    var doc = window.document;
    _this.maskDiv = null;
    _this.contentDiv = null;
    var options = {
        opacity: 0.4
    };
    this.popup = function (contentdiv, optionArg) {
        if (optionArg) {
            for (var prop in optionArg) {
                options[prop] = optionArg[prop];
            }
        }
        _this.contentDiv = contentdiv || _this.contentDiv;
        _this.maskDiv = $('
');
        _this.maskDiv.addClass('MaskDiv');
        _this.maskDiv.css({
            'filter': "Alpha(opacity=" + ( options.opacity - "0" ) * 100 + ");",
            'opacity': options.opacity,
            'display': 'block'
        });
        $(doc.body).append(_this.maskDiv);
        if (_this.contentDiv) {
            $(doc.body).append(_this.contentDiv);
            _this.contentDiv.show();
            _this.contentDiv.draggable({
                containment: "document",
                cursor: 'move',
                handle: ".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 (value, whole) {
        if (isNaN(value) && typeof value === "string") {
            if (value.indexOf("%") !== -1) {
                value = (value.replace("%", "") / 100) * whole;
            } else if (value.indexOf("px") !== -1) {
                value = value.replace("px", "");
            }
        }
        return Math.ceil(value);
    };
    this.position = function (dialog, dialogBody, minusHeight) {
        dialog = dialog || $(".ShowDialogDiv");
        if (dialog[0]) {
            var clientWidth = document.documentElement.clientWidth;
            var clientHeight = document.documentElement.clientHeight;
            var width = _this.formatPercentNumber(dialog.data("position").width, clientWidth) || dialog.width();
            var height = _this.formatPercentNumber(dialog.data("position").height, clientHeight) || dialog.height();
            width = width < 300 ? 300 : width;
            height = height < 450 ? 450 : height;
            $(dialog).css({
                "width": width + "px",
                "height": height + "px",
                "top": Math.ceil((clientHeight - height) / 2) + "px",
                "left": Math.ceil((clientWidth - width) / 2) + "px"
            });
            dialogBody = dialogBody || $(".Dialog_Body");
            if (dialogBody[0]) {
                minusHeight = minusHeight || ($(".Dialog_Head").outerHeight() + $(".Dialog_Foot").outerHeight());
                var dialogBodyHeight = height - minusHeight;
                dialogBody.height(dialogBodyHeight);
            }
        }
    }
}
var createDialogTemplate = function (optionArg, contentHtml, saveBtnClickHandler) {
    var options = {
        "Action": "",
        "Title": "",
        "Width": "50%",
        "Height": "50%"
    };
    if (optionArg) {
        for (var prop in optionArg) {
            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("click", function() {
        dialogHelper.remove();
    });
    ActionCancelDiv.on("click", function() {
        dialogHelper.remove();
    });
    var newA = $("
").appendTo(ActionCancelDiv);
    $("
").appendTo(newA);
    $("
").html("Cancel").appendTo(newA);
    var ActionSaveDiv = $("
").appendTo(newDiv);
    var newB = $("
").appendTo(ActionSaveDiv);
    newB.on('click', function () {
        if (typeof saveBtnClickHandler == "function") {
            saveBtnClickHandler();
        }
    });
    $("
").appendTo(newB);
    $("
").html("Save").appendTo(newB);
    var minusHeight = DialogHead.outerHeight() + DialogFoot.outerHeight();
    newDialog.data("position", {
        width: options.Width,
        height: options.Height
    });
    dialogHelper.position(newDialog, DialogBody, minusHeight);
    return newDialog;
};
var changeDialogLayout = function(optionArg, dialogObj) {
    var options = {
        "Width": "70%",
        "Height": "90%"
    };
    if (optionArg) {
        for (var prop in optionArg) {
            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("position", {
        width: options.Width,
        height: options.Height
    });
    dialogHelper.position(dialogObj, DialogBody, minusHeight);
};

, 。

jekyllにクールで簡潔な検索を追加
mysqlでDATE_FORMAT()とstr_to_date() 、to_days