Maison >interface Web >js tutoriel >Le code de la boîte contextuelle jQuery encapsule DialogHelper_jquery

Le code de la boîte contextuelle jQuery encapsule DialogHelper_jquery

WBOYoriginal: 2016-05-16 16:16:591218parcourir

Après avoir regardé l'exemple de jQueryUI Dialog, l'effet n'est pas mauvais, mais il est un peu délicat à utiliser et le code écrit est un peu tordu et doit être à nouveau encapsulé ! Il existe donc la simple classe auxiliaire DialogHelper suivante. Étant donné que cet article se concentre sur les idées, la version actuelle du code est encore très approximative. L'idée est bonne, et quoi qu'elle soit contenue dans le futur, ce n'est qu'une formalité. J'espère que cette idée pourra inspirer tout le monde. En même temps, chacun est invité à élargir sa réflexion et à proposer de meilleures suggestions d'amélioration.

Copier le code Le code est le suivant :

//exige ScrollHelper.js
fonction DialogHelper() {
    var _this = ceci;
    var doc = window.document;
    _this.maskDiv = null;
    _this.contentDiv = null;
    options var = {
        opacité : 0,4
    };
    this.popup = fonction (contentdiv, optionArg) {
        si (optionArg) {
            pour (var prop dans optionArg) {
                options[prop] = optionArg[prop];
            >
        >
        _this.contentDiv = contentdiv || _this.contentDiv;
        _this.maskDiv = $('

');
        _this.maskDiv.addClass('MaskDiv');
        _this.maskDiv.css({
            'filtre' : "Alpha(opacity=" ( options.opacity - "0" ) * 100 ");",
            'opacité' : options.opacité,
            'affichage' : 'bloquer'
        });
        $(doc.body).append(_this.maskDiv);
        si (_this.contentDiv) {
            $(doc.body).append(_this.contentDiv);
            _this.contentDiv.show();
            _this.contentDiv.draggable({
                confinement : "document",
                curseur : 'déplacer',
                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 () {
        si (_this.contentDiv) {
            _this.contentDiv.remove();
        >
        si (_this.maskDiv) {
            _this.maskDiv.remove();
        >
        $("body").liveScroll();
    };
    this.formatPercentNumber = fonction (valeur, entier) {
        if (isNaN(value) && typeof value === "string") {
            if (value.indexOf("%") !== -1) {
                valeur = (value.replace("%", "") / 100) * entier;
            } else if (value.indexOf("px") !== -1) {
                valeur = valeur.replace("px", "");
            >
        >
        return Math.ceil(valeur);
    };
    this.position = function (dialog, dialogBody, minusHeight) {
        dialogue = dialogue || $(".ShowDialogDiv");
        si (dialogue[0]) {
            var clientWidth = document.documentElement.clientWidth;
            var clientHeight = document.documentElement.clientHeight;
            var width = _this.formatPercentNumber(dialog.data("position").width, clientWidth) || dialogue.width();
            var hauteur = _this.formatPercentNumber(dialog.data("position").height, clientHeight) || dialogue.hauteur();
            largeur = largeur < 300 ? 300 : largeur;
            hauteur = hauteur < 450 ? 450 : hauteur;
            $(dialog).css({
                "width": largeur "px",
                "hauteur": hauteur "px",
                "top": Math.ceil((clientHeight - height) / 2) "px",
                "gauche": Math.ceil((clientWidth - width) / 2) "px"
            });
            corps de dialogue = corps de dialogue || $(".Dialog_Body");
            si (dialogBody[0]) {
                moinsHauteur = moinsHauteur || ($(".Dialog_Head").outerHeight() $(".Dialog_Foot").outerHeight());
                var dialogBodyHeight = hauteur - minusHeight;
                dialogBody.height(dialogBodyHeight);
            >
        >
    >
>
var createDialogTemplate = fonction (optionArg, contentHtml, saveBtnClickHandler) {
    options var = {
        "Action": "",
        "Titre": "",
        "Largeur": "50%",
        "Hauteur": "50%"
    };
    si (optionArg) {
        pour (var prop dans 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("clic", function() {
        dialogHelper.remove();
    });
    ActionCancelDiv.on("clic", function() {
        dialogHelper.remove();
    });
    var newA = $("

").appendTo(ActionCancelDiv);
$("

").appendTo(newA);
$("

").html("Annuler").appendTo(newA);
var ActionSaveDiv = $("

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

").appendTo(ActionSaveDiv);
    newB.on('clic', function() {
        if (typeof saveBtnClickHandler == "function") {
            saveBtnClickHandler();
        >
    });
    $("

").appendTo(newB);
$("

").html("Enregistrer").appendTo(newB);
    var minusHeight = DialogHead.outerHeight() DialogFoot.outerHeight();
    newDialog.data("position", {
        largeur : options.Largeur,
        hauteur : options.Hauteur
    });
    dialogHelper.position(newDialog, DialogBody, minusHeight);
    retourner newDialog;
};
var changeDialogLayout = function(optionArg, dialogObj) {
    options var = {
        "Largeur": "70%",
        "Hauteur": "90%"
    };
    si (optionArg) {
        pour (var prop dans optionArg) {
            options[prop] = optionArg[prop];
        >
    >
    var DialogBody = $(dialogObj).find(".Dialog_Body");
    var DialogHead = $(dialogObj).find(".Dialog_Head");
    var DialogFoot = $(dialogObj).find(".Dialog_Foot");
    var autre = 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() autre;
    dialogObj.data("position", {
        largeur : options.Largeur,
        hauteur : options.Hauteur
    });
    dialogHelper.position(dialogObj, DialogBody, minusHeight);
};

以上就是本文所分享的全部内容了，希望大家能够喜欢。

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Analyse du problème invalide de $.click() dans jQuery_jqueryArticle suivant：Analyse du problème invalide de $.click() dans jQuery_jquery

Articles Liés

Voir plus