Aplicar CSS a los botones de diálogo jQuery

Así que actualmente tengo 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 usa 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 ‘Guardar’ me estoy definiendo a mí mismo. No estoy seguro de si eso tendrá alguna relación con el problema.

Cualquier ayuda sería apreciada. Gracias.

ACTUALIZACIÓN: el consenso fue que había dos caminos para viajar aquí:

  1. Inspeccione el HTML utilizando un complemento de Firefox como Firebug , y tenga en cuenta las clases de CSS que jQuery aplica a los botones, y tome una puñalada para anularlos. Nota: en mi HTML, ambos botones se usaron exactamente con las mismas clases de CSS y sin ID únicos, por lo que esta opción se eliminó.
  2. Use un selector jQuery en el cuadro de diálogo abierto para capturar el botón que yo quería, y luego añádale una clase CSS.

Fui con la segunda opción, y utilicé el método jQuery find () ya que creo que esto es más apropiado que usar: first o: first-child b / c, el botón que quería cambiar no 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 con el que terminé está a continuación:

 $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) } }); 

Estoy volviendo a enviar mi respuesta a una pregunta similar porque nadie parece haberla dado aquí y es mucho más clara y ordenada:

Use la syntax de la propiedad de los buttons alternativos:

 $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) } }); 

Puede usar el controlador de eventos abierto para aplicar un estilo adicional:

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

Creo que hay dos formas en que puedes manejar eso:

  1. Comprueba usando algo como firebug si hay una diferencia (en clase, identificación, etc.) entre los dos botones y úsala para abordar el botón específico
  2. Use algo como: primer hijo para seleccionar, por ejemplo, el primer botón y estilo de forma diferente

Cuando miro la fuente con Firebug para uno de mis cuadros de diálogo, aparece algo así como:

 

Así que podría, por ejemplo, dirigir el botón Enviar agregando algunos estilos a .ui-state-focus (con quizás algunos selectores adicionales para asegurarme de anular los estilos de jquery).

Por cierto, elegiría la segunda opción en este caso para evitar problemas cuando cambie el enfoque …

Debes cambiar la palabra “className” por “clase”

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

Tal vez algo como esto?

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

Seleccione el div que tiene diálogo de roles, luego obtenga los botones apropiados en él y configure el CSS.

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

También hay una respuesta simple para definir estilos específicos que solo se aplicarán a ese botón específico y puede hacer que Jquery declare el estilo del elemento al declarar el diálogo:

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

después de hacer eso, aquí está lo que muestra el html: enter image description here

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

¿Por qué no simplemente inspeccionar el marcado generado, anotar la clase en el botón de elección y diseñarlo usted mismo?

Le sugiero que eche un vistazo al código HTML que el código escupe y vea si hay una forma de identificar de manera única uno (o ambos) de los botones (posiblemente los atributos id o name), luego use jQuery para seleccionar ese elemento y aplicar un css clase a eso.

Si todavía está trabajando para usted, agregue los siguientes estilos en la hoja de estilos de su página

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

Cambiará el color de fondo de los botones de diálogo.