jQuery UI Posición del botón de diálogo

Question

¿Cómo puedo colocar los botones de jQuery UI por separado? Los botones están alineados en la misma dirección. Me gustaría que un botón esté alineado a la izquierda mientras que el otro a la derecha. ¿Es posible?

Answer 1

OK, mirando a través de este Firebug ...

El control de diálogo Crear un div con una clase llamada ui-dialog-buttonpane, por lo que puede buscar eso.

Si se trata de varios botones, es probable que desee :first y :last atributos.

Por lo tanto, $(".ui-dialog-buttonpane button:first) debería conseguir el primer botón. y $(".ui-dialog-buttonpane button:last) debería obtener el último botón.

Desde allí puede modificar el estilo css/para poner cada botón a la derecha e izquierda (modifique los valores de flotación).

De todos modos, así es como lo abordaría ahora mismo.

Answer 2

también podría agregar una clase a su cuadro de diálogo (http://docs.jquery.com/UI/Dialog#option-dialogClass) para localizar su estilo.

Answer 3

Tengo el mismo problema, pero encontré la solución fácil que cambiamos el orden de los botones Aceptar o cerrar el diálogo del formulario cada vez que hacemos la definición jquery ui cuadro de diálogo.

Answer 4

tras la selección, probar:
.prependTo(".ui-dialog-buttonpane");

Answer 5

Esta es la manera en que yo era capaz de lograr los resultados.

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

Luego, en Estilos añadir la Bandera importante, que es necesaria porque la clase es lo primero y se sobrescribe con jQuery.

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

Answer 6

he encontrado el .ui-diálogo-buttonset colapsa sin ancho de todos modos así a la posición dos bottons en la parte inferior izquierda y la esquina derecha añaden simplemente css así:

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

La primera línea haga que el botón coloque el contenedor al 100% de ancho, el segundo presione el último botón que se encuentra a la derecha.

Answer 7

Te primero tiene que cambiar el ancho de .ui-diálogo-buttonset al 100% en jquery-ui.css

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

Luego, en su declaración modal, para los botones, se podría hacer algo como explícita a continuación:

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

terminé con la siguiente solución (en base a la respuesta por el cocinero).Esto tiene una serie de ventajas (para mí) sobre las otras respuestas:

• puro HTML/CSS - sin javascript
• No hay necesidad de establecer un ancho fijo en el cuadro de diálogo (botón siempre alinearse con el borde izquierdo , incluso si el usuario cambia el tamaño de la ventana de diálogo)
• Sin necesidad de que el indicador importante de la CSS

el HTML utilicé (ligeramente modificado a partir de la respuesta por el cocinero):

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

Luego utiliza el siguiente CSS:

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

Con el resultado de que el botón "leftButton" siempre se fija en 8 píxeles fuera del borde izquierdo del cuadro de diálogo, mientras que los otros botones están justificados a la derecha. Si tiene más de un botón que necesita justificado a la izquierda, entonces tendrá que aumentar el parámetro izquierdo por el ancho de los botones anteriores más cualquier espaciado que desee para cada botón, que es menos que elegante en mi opinión. Sin embargo, para un solo botón justificado a la izquierda esto funciona como un encanto.

Answer 10

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

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

Esto no afecta a los botones predeterminados, que aparecerán a la derecha. Además, puede colocar tantos botones a la izquierda como desee sin un formato especial para cada botón. Para configurar la clase de los botones de la izquierda, hay muchas maneras de hacerlo.

Como parte de la definición de diálogo:

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

O puede hacer algo como esto:

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

Y después, el estilo CSS para el objeto 'myDeleteButton' como flotante a la izquierda. Configurar el ID del botón puede ser útil si también desea mostrar u ocultar el botón sin volver a crear el cuadro de diálogo.

Probado en Chrome, Safari, FF, EI11, jQuery UI 1.10

Answer 11

Ok, como la respuesta de @The cocinera, puede cambiar esto css en tag.Think estilo por otro way.you puede agregar estilo dentro botón, ya no necesitas css. Buena suerte.

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