only - jquery ui themes

jQuery UI: estilo de botón de diálogo

Question

¿Hay alguna manera fácil de aplicar CSS / iconos a los botones modales en un cuadro de diálogo modal jQuery UI?

Si incluyo el HTML para mostrar un ícono con el texto del botón, muestra el HTML como texto en lugar de mostrar el código.

Supongo que podría escribir algo de jQuery para encontrar el botón y sobrescribir el HTML con lo que quiero, pero espero que haya una manera más fácil y directa.

Answer 1

Sí, puede sobreescribir las clases de diálogo modal css para satisfacer sus necesidades. Por ejemplo, puede crear un diálogo con la especificación de su clase personalizada:

$("#id-dialog").dialog({ 
            dialogClass: "loadingScreenWindow",
            ...

Y luego en css:

/* hide the title bar on the loading screen */ 
.loadingScreenWindow .ui-dialog-titlebar {
  display: none;
}

Consulte http://docs.jquery.com/UI/Dialog#theming para conocer el estilo de diálogo disponible.

Answer 2

Esto es lo que estoy usando ahora para nuestros proyectos:

$("#id-dialog").dialog({
        modal: true,
        buttons: {
            ''Login'': logIn,
            Cancel: logOut
        },
        open: function() {
            $buttonPane = $(this).next();
            $buttonPane.find(''button:first'').addClass(''accept'').addClass(''ui-priority-primary'');
            $buttonPane.find(''button:last'').addClass(''cancel'').addClass(''ui-priority-secondary'');                        
        }
    });

Primer y último trabajo en este caso ya que solo hay dos botones. Puede usar: nth-child (índice) si tiene más de dos botones.

Otra forma de hacer esto sería hacer referencia al elemento padre que abarca tanto el elemento div de diálogo como el elemento div de botón, y luego buscar los botones individuales dentro del elemento principal.

Answer 3

Puedo ver su vieja pregunta, pero ahora puedes hacerlo de una manera mucho más agradable en la interfaz de usuario de jQuery, solo agrega las propiedades de "clase" o "estilo" al objeto de botón de esta manera:

$("#id-dialog").dialog({
    modal: true,
    buttons: [
        { text: "Save", click: function () { alert("save"); }, class:"sampleClass1", style:"color:Red" },
        { text: "Cancel", click: function () { alert("close"); ;}, class:"sampleClass2"}
    ]
});  

Answer 4

Este subproceso - diálogo de confirmación de jQuery UI - manipulación de salida - parece proporcionar una opción más limpia, que debe ejecutarse más rápido que un hallazgo.

$(''.ui-dialog-buttonpane'').children(''button'')[1]

Me quedé atrapado tratando de usarlo al principio, pero lo hice funcionar después de notar que esto no devolverá un objeto DOM de jquery; devuelve el html, por lo que debe pegarlo dentro de un operador jquery para usarlo. Por ejemplo -

var button1 = $(''.ui-dialog-buttonpane'').children(''button'')[1];
$(button1).removeClass(''ui-button-text-only'').addClass(''ui-button-text-icon'');