jQuery UI Dialog bouton de positionnement

OK, en regardant ce grâce à Firebug...

Le contrôle de boîte de Dialogue créer un div avec une classe appelée ui-dialog-buttonpane, de sorte que vous pouvez rechercher pour cela.

Si vous êtes aux prises avec de multiples boutons, vous voudrez probablement :first et :last attributs.

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

À partir de là, vous pouvez modifier le fichier css/style de placer chacun sur le bouton de droite et de gauche (modifier les valeurs float).

De toute façon, c'est la façon dont je l'approche de ce droit maintenant.

Je me suis retrouvé avec la solution suivante (en fonction de la réponse par Le Cuisinier). Cela a un certain nombre d'avantages (pour moi) sur les autres réponses:

• Pur HTML/CSS sans javascript
• Pas besoin de définir une largeur fixe dans la boîte de dialogue (bouton de toujours aligner sur le bord gauche, même si l'utilisateur redimensionne la fenêtre de dialogue)
• Pas besoin de la !important indicateur dans le CSS

Le HTML, 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 code CSS suivant:

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

Avec le résultat que l' "leftButton" bouton est toujours fixé à 8px le bord gauche de la boîte de dialogue, tandis que les autres boutons sont justifiés à droite. Si vous avez plus d'un bouton que vous avez besoin justifié à gauche, alors il faut augmenter la gauche paramètre de la largeur des boutons précédent, ainsi que l'espacement que vous voulez pour chaque bouton, ce qui est moins élégant, à mon avis. Cependant, pour un seul justifié à gauche du bouton, cela fonctionne comme un charme.

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

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

Puis dans votre modal de la déclaration, pour les boutons, vous pourriez faire quelque chose d'explicite, comme ci-dessous:

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

Après avoir sélectionner, essayez de:

.prependTo(".ui-dialog-buttonpane");

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

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

Cela n'a pas d'impact sur les boutons par défaut, ils apparaissent vers la droite. Aussi, vous pouvez placer autant de boutons sur la gauche que vous le voulez sans mise en forme particulière pour chaque bouton. Pour définir la classe de la gauche des boutons, il y a beaucoup de façons de le faire.

Dans le cadre de la boîte de dialogue définition:

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

Ou vous pouvez faire quelque chose comme ceci:

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

Et, plus tard, de style css pour le "myDeleteButton' objet flottant à gauche. Réglage du bouton id peut être utile si vous aussi vous souhaitez afficher ou masquer le bouton sans avoir à recréer le dialogue.

Testé dans Chrome, Safari, FF, IE11, jQuery UI 1.10

$('#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");