Добавить класс в диалоговые кнопки jquery

Question

Я хочу добавить класс css на кнопки диалогового окна jquery.

Вот мой код:

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

Например, я хотел бы добавить «.red» класс на моем кнопку „да“.

Как я могу это сделать?

Спасибо!

Answer 1

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

Answer 2

Вы пробовали функцию addClass?

Answer 3

.addClass функционировать  

Answer 4

Там в dialogClass вариант функции диалог вы можете использовать, чтобы задать класс CSS для самого диалога. Вы можете дать ему уникальное имя класса и использовать это имя класса, чтобы получить ссылку на любые дочерние элементы диалогового окна. Затем используйте селектора, чтобы либо получить ссылку на дочерние кнопки по положению, либо по содержащемуся в нем тексу (возможно, более эффективно использовать первый).

Answer 5

У меня есть решение, благодаря Рич:

$(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"); 

Решено!

Answer 6

Был такой же проблема. Очень похоже на решение NICO, но добавьте стиль к открытой функции в диалоге:

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