4 votes

Ajout de contenu dans la boîte de dialogue jQuery UI

Existe-t-il un moyen d'ajouter du contenu entre deux boutons d'une page Web ? jQuery UI boîte de dialogue ? Avec le code ci-dessous, j'aimerais avoir OR écrit entre les deux boutons. Est-ce possible ?

$("#dialog-delivery").dialog({
              bgiframe: true,
              resizable: true,
              height:350,
              width:400,
              modal: true,
              buttons: {
                  "Continue": function() {
                        $(this).dialog( "close" );
                        $(".option-separate").hide();
                        $("#nonsubscribers").hide();
                        $('<div class="radio-alert">Thank you for your selection</div>').appendTo('#subscribers');
                        $("#change-subs").css('visibility','visible');
                    },
                    "Change to Non-Subscriber": function() {
                          $(this).dialog( "close" );
                          $("#subscribers").hide();
                          $(".option-separate").hide();
                          $("#nonsubscribers").show();
                          $("#change-nonsubs").css('visibility','visible');
                      }
              }
    });

5voto

Ender Points 8243

C'est un peu compliqué, mais jetez un coup d'œil à cette démo ->.

L'ajout pertinent est un gestionnaire d'ouverture de dialogue :

open: function() {
    $('.ui-button-text:contains("Continue")')
        .parent()
        .after('<div class="button-divider">OR</div>');
}

Ce que ça fait : Sélectionnez un bouton de l'interface utilisateur avec un texte spécifique, et insérez une icône <div> après elle. La classe est importante car vous aurez besoin d'au moins un style CSS pour que le séparateur soit placé correctement. Voici les styles que j'ai utilisés :

.button-divider {
    margin: .5em .2em .5em 0;
    float: right;
    padding: .2em 0 .3em 0;
    width: auto;
}

La partie importante est float:right; Comme les boutons de l'interface flottent, votre séparateur doit également flotter pour être placé correctement.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X