Aplicar CSS para jQuery diálogo Botones

Question

Así que tengo actualmente un cuadro de diálogo jQuery con dos botones: Guardar y cerrar. Creo el diálogo usando el siguiente código:

$dialogDiv.dialog({ 
    autoOpen: false, 
    modal: true, 
    width: 600, 
    resizable: false, 
    buttons: { 
     Cancel: function() { 
         // Cancel code here 
     }, 
     'Save': function() { 
         // Save code here 
     } 
    }, 
    close: function() { 
     // Close code here (incidentally, same as Cancel code) 
    } 
}); 

Sin embargo, ambos botones son del mismo color cuando se utiliza este código. Me gustaría que mi botón Cancelar sea de un color diferente al de Guardar. ¿Hay alguna manera de hacer esto usando algunas opciones jQuery integradas? No obtuve mucha ayuda de la documentación.

Tenga en cuenta que el botón Cancelar que estoy creando es un tipo predefinido, pero en 'Guardar' estoy definiendo mi mismo. No estoy seguro de si eso tendrá alguna relación con el problema.

Cualquier ayuda sería apreciada. Gracias.

ACTUALIZACIÓN: consenso era que había dos caminos a recorrer aquí:

1. Inspeccionar el HTML usando un plugin de Firefox como firebug y observe las clases CSS que jQuery es aplicar a los botones , y toma una puñalada para anularlos. Nota: en mi HTML, ambos botones se utilizaron las mismas exactas clases CSS y no hay identificadores únicos, por lo que esta opción estaba fuera.
2. Use un selector jQuery en el cuadro de diálogo abrir para capturar el botón que yo quería, y añádale una clase CSS.

Fui con la segunda opción, y se utiliza el jQuery método find() ya que creo que es más apropiado que el uso de: primer o: first-child no b/c el botón que quería cambiar era necesariamente el primer botón enumerado en el marcado. Usando find, puedo simplemente especificar el nombre del botón y agregar CSS de esa manera. El código que terminó con está por debajo de:

$dialogDiv.dialog({ 
    autoOpen: false, 
    modal: true, 
    width: 600, 
    resizable: false, 
    buttons: { 
     Cancel: function() { 
         // Cancel code here 
     }, 
     'Save': function() { 
         // Save code here 
     } 
    }, 
     open: function() { 
      $('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('cancelButtonClass'); 
     } 
    close: function() { 
     // Close code here (incidentally, same as Cancel code) 
    } 
}); 

Answer 1

estoy reposting my answer a una pregunta similar, porque nadie parece haberse dado aquí y es mucho más limpio y más ordenado:

Utilice la sintaxis buttons propiedad alternativa:

$dialogDiv.dialog({ 
    autoOpen: false, 
    modal: true, 
    width: 600, 
    resizable: false, 
    buttons: [ 
     { 
      text: "Cancel", 
      "class": 'cancelButtonClass', 
      click: function() { 
       // Cancel code here 
      } 
     }, 
     { 
      text: "Save", 
      "class": 'saveButtonClass', 
      click: function() { 
       // Save code here 
      } 
     } 
    ], 
    close: function() { 
     // Close code here (incidentally, same as Cancel code) 
    } 
}); 

Answer 2

¿Por qué no inspeccione el marcado generado, tenga en cuenta la clase en el botón de elección y el estilo por sí mismo?

Answer 3

Tal vez algo como esto?

$('.ui-state-default:first').addClass('classForCancelButton'); 

Answer 4

creo que hay dos maneras de manejar que:

1. Comprobar el uso de algo como Firebug si hay una diferencia (en clase, identificación, etc.) entre los dos botones y el uso que se para abordar el botón específico
2. usar algo como: first-child para seleccionar, por ejemplo, el primer botón y el estilo que uno diferente

Cuando miro a la fuente con Firebug para uno de mis diálogos, resulta algo así como:

<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"> 
    <button class="ui-state-default ui-corner-all ui-state-focus" type="button">Send</button> 
    <button class="ui-state-default ui-corner-all" type="button">Cancel</button> 
</div> 

por lo que podría, por ejemplo, abordar el botón Enviar mediante la adición de algunos estilos de .ui por el estado de enfoque (tal vez con algunos selectores adicionales para asegurarse de que yo anulación los estilos de jquery).

Por cierto, Me va por la segunda opción, en este caso para evitar problemas cuando el foco cambia ...

Answer 5

sugiero que eche un vistazo en el que el código HTML escupe y ver si Hay una forma de identificar de forma única uno (o ambos) de los botones (posiblemente los atributos id o name), luego use jQuery para seleccionar ese elemento y aplicarle una clase css.

Answer 6

Usted puede utilizar el controlador de eventos abiertos al aplicar un estilo adicional:

open: function(event) { 
    $('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('cancelButton'); 
} 

Answer 7

Seleccione el div que tiene función de diálogo a continuación, obtener los botones apropiados en ella y establecer el CSS.

$("div[role=dialog] button:contains('Save')").css("color", "green"); 
$("div[role=dialog] button:contains('Cancel')").css("color", "red"); 

Answer 8

Debe cambiar la palabra "className" para "clase"

buttons: [ 
    { 
     text: "Cancel", 
     class: 'ui-state-default2', 
     click: function() { 
      $(this).dialog("close"); 
     } 
    } 
], 

Answer 9

If Todavía señalando que está trabajando para agregar los siguientes estilos en la hoja de estilo de página

.ui-widget-content .ui-state-default { 
    border: 0px solid #d3d3d3; 
    background: #00ACD6 50% 50% repeat-x; 
    font-weight: normal; 
    color: #fff; 
} 

Se va a cambiar el color de fondo de los botones de diálogo.

Answer 10

También hay una respuesta simple para definir los estilos específicos que sólo se van a aplicar a ese botón específico y que puede tener Jquery declarar estilo de elemento cuando se declara el diálogo:

id: "button-delete", 
text: "Delete", 
style: "display: none;", 
click: function() {} 

después de hacer eso aquí es lo que muestra el html:

haciendo esto le permite configurarlo, pero no es necesariamente fácil de cambiar usando jquery más adelante.