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

Question

¿Existe 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 icono 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

puedo ver que es bastante vieja pregunta, pero usted puede hacerlo ahora de manera mucho más agradable en jQuery UI, sólo tiene que añadir la 'clase' o propiedades 'estilo' a objeto de botón como este:

$("#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 2

Sí, puede sobrescribir las clases de diálogo modal de CSS para satisfacer sus necesidades. Por ejemplo, usted crear diálogo con la especificación de la 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; 
} 

Ver http://docs.jquery.com/UI/Dialog#theming para el estilo de diálogo clasificado disponibles

Answer 3

Esto es lo que estoy usando en este momento 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');       
     } 
    }); 

Primero 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 4

Este hilo - jQuery UI confirmation dialog - manipulating output - 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 en un primer momento, pero tengo trabajo después de notar que esto no va a devolver un objeto jQuery DOM; 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');