Agregar clase a los botones de diálogo jquery

Question

Quiero agregar clase css en los botones de un cuadro de diálogo jquery.

Aquí está mi código:

$(document).ready(function(){ 
     $('#messageBox p').html('bla bla bla. Ok?'); 
     $('#messageBox').dialog({ 
     modal : true, 
     buttons: { 
      'Yes': function() { 
      doSomething(); 
      $(this).dialog('close'); 
      }, 
      'No': function() { 
      doAnotherThing(); 
      $(this).dialog('close'); 
      } 
     } 
     }); 
    }); 

Por ejemplo, me gustaría agregar la clase ".red" en mi botón 'sí'.

¿Cómo puedo hacer eso?

¡Gracias!

Answer 1

buttons: [ 
      { 
       text: "Submit", 
       "class": 'submit_class_name', 
       click: function() {      
        $(this).dialog("close"); 
       } 
      }, 
      { 
       text: "Cancel", 
       click: function() { 
        $(this).dialog("close"); 
       } 
      } 
      ] 

Answer 2

¿Has probado la función addClass?

Answer 3

.addClass funcionan  

Answer 4

Hay una opción dedialogClass de la función de diálogo puede utilizar para especificar una clase css para el propio diálogo. Puede darle un nombre de clase único y usar este nombre de clase para obtener una referencia a cualquier elemento secundario del diálogo. Luego, use los selectores para obtener una referencia a los botones secundarios por posición o por el texto que contiene (probablemente sea más eficiente usar el primero).

Answer 5

Tengo la solución, gracias a Rich:

$(document).ready(function(){ 
     $('#messageBox p').html('bla bla bla. Ok?'); 
     $('#messageBox').dialog({ 
     modal : true, 
     dialogClass: 'dialogButtons', 
     buttons: { 
      'Yes': function() { 
       doSomething(); 
       $(this).dialog('close'); 
      }, 
      'No': function() { 
       doAnotherThing(); 
       $(this).dialog('close'); 
      } 
     } 
     }); 
    }); 
$("div.dialogButtons div button:nth-child(1)").addClass("oneCssClass"); 
$("div.dialogButtons div button:nth-child(2)").addClass("anotherCssClass"); 

resuelto!

Answer 6

Tenía el mismo problema. Muy similar a la solución de nico además de añadir el estilo a la función de apertura en el diálogo:

open: function() { 
       // add style to buttons (can't seem to do this via the button definition without breaking IE) 
       $(".someDialog .ui-dialog-buttonset button:first").not(".buttonPrimary").addClass("buttonPrimary"); 
       $(".someDialog .ui-dialog-buttonset button:last").not(".buttonSecondary").addClass("buttonSecondary"); 
       $("#someDialog").focus(); 
      }