jQuery UI Posizionamento del pulsante di dialogo

Question

Come posso posizionare i pulsanti dell'interfaccia utente jQuery separatamente l'uno dall'altro. I pulsanti sono allineati nella stessa direzione. Vorrei che un pulsante fosse allineato a sinistra mentre l'altro a destra. È possibile?

Answer 1

OK, guardando questo attraverso Firebug ...

Il controllo finestra di dialogo Crea un div con una classe chiamata ui-dialog-buttonpane, in modo da poter cercare per questo.

Se si hanno a che fare con più pulsanti, è probabile che si desiderino gli attributi :first e :last.

Quindi, $(".ui-dialog-buttonpane button:first) dovrebbe ottenere il primo pulsante. e $(".ui-dialog-buttonpane button:last) dovrebbero ottenere l'ultimo pulsante.

Da lì è possibile modificare il css/stile per inserire ciascun pulsante a destra e a sinistra (modificare i valori float).

In ogni caso, è così che mi piacerebbe affrontarlo proprio ora.

Answer 2

potresti anche aggiungere classe alla finestra di dialogo (http://docs.jquery.com/UI/Dialog#option-dialogClass) per localizzare il tuo stile.

Answer 3

Ho avuto lo stesso problema ma ho trovato la soluzione semplice che cambiamo l'ordine dei pulsanti OK o chiusura della finestra di dialogo ogni volta che creiamo la forma di dialogo di definizione jquery ui.

Answer 4

Dopo selezionare, provare:
.prependTo(".ui-dialog-buttonpane");

Answer 5

Questo è il modo in cui sono stato in grado di realizzare i risultati.

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

Poi nel stili aggiungere il flag! Importante, che è necessaria perché la classe viene prima ed è sovrascritta da jQuery.

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

Answer 6

ho trovato il .ui-dialogo-buttonset crolla giù con no Larghezza comunque in modo di posizione di due bottoni in basso a sinistra e destra aggiunti proprio css come questo:

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

La prima linea fai in modo che il set di pulsanti sia largo al 100%, il secondo prema l'ultimo pulsante trovato a destra.

Answer 7

Faresti prima necessario cambiare la larghezza di .ui-dialogo-buttonset al 100% in jquery-ui.css

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

Poi nella dichiarazione modale, per i pulsanti, si potrebbe fare qualcosa di simile esplicito qui di seguito:

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

finii con la seguente soluzione (in base alla risposta dal cuoco).Questo ha una serie di vantaggi (per me) sopra le altre risposte:

• puro HTML/CSS - javascript
• Non c'è bisogno di impostare una larghezza fissa nella finestra di dialogo (pulsante sarà sempre l'allineamento al bordo sinistro , anche se l'utente ridimensiona la finestra)
• Non c'è bisogno per l'importante bandiera nel CSS

il codice HTML che ho usato (leggermente modificato dalla risposta dal cuoco):!

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

poi ho usato il seguente CSS:

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

Con il risultato che il pulsante "leftButton" è sempre fissata a 8px fuori dal bordo sinistro della finestra di dialogo, mentre gli altri pulsanti sono allineati a destra. Se hai più di un pulsante che hai bisogno di giustificare a sinistra, allora avresti bisogno di aumentare il parametro di sinistra per la larghezza dei pulsanti precedenti più la spaziatura che vuoi per ogni pulsante, che a mio parere è meno elegante. Tuttavia, per un singolo pulsante giustificato a sinistra questo funziona come un incantesimo.

Answer 10

Questo non ha alcun impatto sui pulsanti predefiniti, appariranno a destra. Inoltre, puoi posizionare tutti i pulsanti a sinistra come desideri senza una formattazione speciale per ciascun pulsante. Per impostare la classe dei pulsanti di sinistra, ci sono molti modi per farlo.

Come parte della finestra di definizione:

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

Oppure si può fare qualcosa di simile:

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

E lo stile in seguito il CSS per l'oggetto 'myDeleteButton' come floating sinistra. L'impostazione dell'ID del pulsante può essere utile se vuoi anche mostrare o nascondere il pulsante senza ricreare la finestra di dialogo.

Testato in Chrome, Safari, FF, IE11, jQuery UI 1.10

Answer 11

Ok, come la risposta di @The Cook, è possibile modificare questo css in tag.Think stile da un altro way.you può aggiungere stile all'interno di tasto, non serve più css. Buona fortuna.

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