Positionnement du bouton jQuery UI Dialog

Question

Comment positionner les boutons de l'interface utilisateur jQuery séparément les uns des autres. Les boutons sont alignés dans la même direction. Je voudrais qu'un bouton soit aligné à gauche tandis que l'autre à droite. C'est possible?

Answer 1

OK, regardant ce par Firebug ...

Le Dialog créer un div avec une classe appelée ui-dialog-buttonpane, de sorte que vous pouvez rechercher pour cela. Si vous traitez avec plusieurs boutons, vous aurez probablement besoin des attributs :first et :last.

Donc, $(".ui-dialog-buttonpane button:first) devrait vous obtenir le premier bouton. et $(".ui-dialog-buttonpane button:last) devrait vous obtenir le dernier bouton. De là, vous pouvez modifier le css/style pour placer chaque bouton sur la droite et la gauche (modifiez les valeurs flottantes).

De toute façon, c'est comme ça que je l'aborderais maintenant.

Answer 2

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

Answer 3

J'ai eu le même problème mais j'ai trouvé la solution facile que nous changeons l'ordre des boutons Ok ou fermez la boîte de dialogue de forme chaque fois que nous faisons la définition jquery ui forme de dialogue.

Answer 4

Après sélection, essayez:
.prependTo(".ui-dialog-buttonpane");

Answer 5

C'est la façon que je suis en mesure d'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"); 
       } 
      } 
     }); 

Puis, dans les styles ajouter le! Indicateur important qui est nécessaire parce que la classe vient en premier et est écrasé par jquery.

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

Answer 6

Je trouve la .ui-dialogue-Buttonset s'effondre sans largeur de toute façon à la position deux bottons en bas à gauche et à droite ajoutés juste comme celui-ci css:

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

La première ligne Faites en sorte que le bouton du conteneur soit 100% large, le second appuie sur le dernier bouton situé à droite.

Answer 7

Vous souhaitez d'abord changer la largeur de .ui-dialogue-Buttonset à 100% en 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 comme explicite ci-dessous:

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

Answer 8

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

Answer 9

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:

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

le code HTML je (légèrement modifié 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"); 
      } 
     } 
    }); 

J'ai ensuite utilisé le CSS suivant:

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

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

Answer 10

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

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

Ceci n'a aucune incidence sur 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 formatage spécial pour chaque bouton. Pour définir la classe des boutons de gauche, il existe plusieurs façons de le faire.

Dans le cadre de la définition de dialogue:

$("#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 le style plus tard pour l'objet css 'myDeleteButton' comme gauche flottant. La définition de 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é dans Chrome, Safari, FF, IE11, jQuery UI 1.10

Answer 11

Ok, comme la réponse de @The Cook, vous pouvez le modifier dans le style css tag.Think par un autre way.you peut ajouter du style au sein de bouton, Plus besoin de css. Bonne chance.

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