Dodaj klasę do przycisków dialogowych jquery

Question

Chcę dodać klasę css na przyciskach okna dialogowego jquery.

Oto mój kod:

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

Na przykład, chciałbym dodać „.red” klasę na mój przycisk «Tak».

Jak mogę to zrobić?

Dziękujemy!

Answer 1

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

Answer 2

Czy wypróbowałeś funkcję addClass?

Answer 3

.addClass funkcjonować  

Answer 4

Jest dialogClass opcja funkcji dialogowe można wykorzystać, aby określić klasę css dla samego dialogu. Możesz nadać mu unikalną nazwę klasy i użyć tej nazwy klasy, aby uzyskać odniesienie do wszystkich elementów podrzędnych w oknie dialogowym. Następnie użyj selektorów, aby uzyskać odniesienie do przycisków podrzędnych według pozycji lub tekstu, który zawiera (prawdopodobnie bardziej wydajne użycie tego pierwszego).

Answer 5

Mam rozwiązanie, dzięki 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"); 

rozwiązany!

Answer 6

Miał ten sam problem. Bardzo podobny do rozwiązania Nico, ale dodać stylizacji do otwartego funkcji w oknie dialogowym:

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