web-dev-qa-db-fra.com

positionnement des boutons de la boîte de dialogue jQuery UI

Comment puis-je positionner les boutons de jQuery UI séparément les uns des autres. Les boutons sont alignés dans la même direction. Je voudrais que l'un des boutons soit aligné à gauche et l'autre à droite. C'est possible?

jqueryjquery-uimodal-dialog
26
turezky

OK, en regardant ça à travers Firebug ...

Le contrôle Dialog crée un div avec une classe appelée ui-dialog-buttonpane afin que vous puissiez le rechercher. 

Si vous utilisez plusieurs boutons, vous voudrez probablement les attributs :first et :last.

Donc, $(".ui-dialog-buttonpane button:first) devrait vous avoir le premier bouton . Et $(".ui-dialog-buttonpane button:last) devrait vous avoir le dernier bouton.

De là, vous pouvez modifier le style css/pour placer chaque bouton à droite et à gauche (modifier les valeurs de float).

Quoi qu'il en soit, c'est la façon dont je l'aborderais maintenant.

29
Chris Brandsma

C’est ainsi que j’ai pu accomplir les résultats.

 $('#dialog-UserDetail').dialog({
            autoOpen: false,
            height: 318,
            width: 531,
            modal: true,
            resize: false,
            buttons: {
                DelUser:{ 
                    class: 'leftButton',
                    text: 'Delete User',
                    click : function (){
                        alert('delete here');
                    }
                },
                "Update User": function () {
                       alert('update here');
           },
                Close: function () {
                    $(this).dialog("close");
                }
            }
        });

Ensuite, dans Styles, ajoutez le drapeau! Important, nécessaire car la classe vient en premier et est écrasée par jquery.

<style>
    .leftButton
    {
        margin-right: 170px !important;
    }
</style>
14
The Cook

Je me suis retrouvé avec la solution suivante (basée sur la réponse de The Cook). Cela présente un certain nombre d'avantages (pour moi) par rapport aux autres réponses:

  • Pure HTML/CSS - pas de javascript
  • Pas besoin de définir une largeur fixe dans la boîte de dialogue (le bouton s'alignera toujours sur le bord gauche, même si l'utilisateur redimensionne la boîte de dialogue)
  • Pas besoin du drapeau! Important dans le CSS

Le HTML que j'ai utilisé (légèrement modifié à partir de la réponse par le cuisinier):

$('#dialog-UserDetail').dialog({
        autoOpen: false,
        width: 'auto',
        modal: true,
        buttons: {
            DelUser:{ 
                class: 'leftButton',
                text: 'Delete User',
                click : function (){
                    alert('delete here');
                }
            },
            "Update User": function () {
                   alert('update here');
       },
            Close: function () {
                $(this).dialog("close");
            }
        }
    });

Ensuite, j'ai utilisé le CSS suivant:

.leftButton
{
    position: absolute;
    left:8px;
}

Il en résulte que le bouton "leftButton" est toujours fixé à 8px du bord gauche de la boîte de dialogue, tandis que les autres boutons sont justifiés à droite. Si vous avez plus d'un bouton dont vous avez besoin d'être justifié à gauche, vous devrez alors augmenter le paramètre de gauche de la largeur des boutons précédents, ainsi que de l'espacement souhaité pour chaque bouton, ce qui est moins qu'élégant à mon avis. Cependant, pour un seul bouton justifié à gauche, cela fonctionne à merveille.

11
ibrewster

Vous devez d'abord changer la largeur de .ui-dialog-buttonset à 100% dans jquery-ui.css

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { width: 100%;}

Ensuite, dans votre déclaration modale, pour les boutons, vous pouvez faire quelque chose d’explicite comme ci-dessous:

buttons: [
        {
           text: "Close",
           open: function(){
                        $(this).css('float','left');}, 
                  }
        }
             ]
4
Angad

vous pouvez également ajouter une classe à votre dialogue ( http://docs.jquery.com/UI/Dialog#option-dialogClass ) pour localiser votre style.

4
pashcan
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
  float: none !important;
  text-align:right;
}

.ui-button-left {
  float: left;
}

Cela n’impacte pas les boutons par défaut, ils apparaîtront à droite. En outre, vous pouvez placer autant de boutons sur la gauche que vous le souhaitez sans mise en forme spéciale pour chaque bouton. Pour définir la classe des boutons de gauche, il existe plusieurs façons de procéder.

Dans le cadre de la définition du dialogue:

$("#mydialog").dialog(
    {buttons: [
        {"class": "ui-button-left", "text": "Delete"},
        {"text": "Cancel"},
        {"text": "Save"}
    ]});

Ou vous pouvez faire quelque chose comme ça:

$("#mydialog").dialog(
    {buttons: [
        {"id": "myDeleteButton", "text": "Delete"},
        {"text": "Cancel"},
        {"text": "Save"}
    ]});

Ensuite, définissez le css de l’objet 'myDeleteButton' comme flottant à gauche. Définir l'identifiant du bouton peut être utile si vous souhaitez également afficher ou masquer le bouton sans recréer la boîte de dialogue.

Testé sous Chrome, Safari, FF, IE11 et jQuery UI 1.10

1
spekary

J'ai trouvé que le .ui-dialog-buttonset s'effondrait sans largeur de toute façon, donc pour positionner deux boutons dans le coin en bas à gauche et à droite, juste en css comme ceci:

.ui-dialog-buttonset {width:100%}
.ui-dialog-buttonset .ui-button:last-child {float:right !important;}

La première ligne élargit le conteneur de boutons à 100%, la seconde appuie sur le dernier bouton situé à droite.

1
Shaun

J'ai eu le même problème mais j'ai trouvé la solution facile qui consiste à changer l'ordre des boutons Ok ou à fermer le dialogue de formulaire chaque fois que nous faisons la définition du formulaire de dialogue jQuery ui. 

1
nvtthang
$('#dialog-UserDetail').dialog({
            autoOpen: false,
            height: 318,
            width: 531,
            modal: true,
            resize: false,
            buttons: {
                DelUser:{ 
                    text  : 'Delete User',
                    click : function (){
                        alert('delete here');
                    }
                },
                space: { 
                    text  : '',
                    id : 'space',
                    width : '(the distance you want!)',
                },
                "Update User": function () {
                       alert('update here');
           },
                Close: function () {
                    $(this).dialog("close");
                }
            }
        });
$("#space").visibility("hidden");
0
user2653803

Ok, comme réponse du cuisinier, vous pouvez changer ce css en balise de style.Pensez d'une autre façon.

                      "Ok":{                                
                            style:"margin-right:640px",                                
                            click: function () {
                                //Your Code 
                            }
                        },
0
Jze