Aplicar CSS a los botones de diálogo de jQuery

Entonces, 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 integradas de jQuery? No recibí 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 usando un complemento de Firefox como firebug , y observe las clases CSS que jQuery está aplicando a los botones, y trate de anularlas . Nota: en mi HTML, ambos botones se usaron exactamente las mismas clases de CSS y sin ID únicos, por lo que esta opción estaba descartada.
2. Use un selector de jQuery en el diálogo abierto para capturar el botón que quería, y luego agregue una clase CSS.

Fui con la segunda opción y usé 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 listado en el marcado. Usando buscar, puedo 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 publicar mi respuesta a una pregunta similar porque nadie parece haberla dado aquí y es mucho más limpio y ordenado:

Utilice la buttonssintaxis de 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)
    }
});

Puede usar el controlador de eventos abierto para aplicar estilos adicionales:

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

Creo que hay dos formas de manejar eso:

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

Cuando miro la fuente con firebug para uno de mis diálogos, aparece algo 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>

Entonces podría, por ejemplo, abordar 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, me decantaría por la segunda opción en este caso para evitar problemas cuando cambia el enfoque ...

Deberías cambiar la palabra "className" por "class"

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

¿Quizás algo como esto?

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

Seleccione el div que tiene un diálogo de rol, luego obtenga los botones apropiados 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, esto es lo que muestra el html:

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 HTML que escupe el código y vea si hay una manera de identificar de manera única uno (o ambos) de los botones (posiblemente los atributos de identificación o nombre), luego use jQuery para seleccionar ese elemento y aplicar un clase css.

Si aún nota que le funciona, agregue los siguientes estilos en la hoja de estilo 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.