Klasse zu Jquery-Dialogschaltflächen hinzufügen

Question

Ich möchte css-Klasse auf Schaltflächen eines Jquery-Dialogfeldes hinzufügen.

Hier ist mein Code:

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

Ich möchte zum Beispiel die Klasse ".red" zu meiner Schaltfläche "Ja" hinzufügen.

Wie kann ich das tun?

Ich danke Ihnen!

Answer 1

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

Answer 2

Ich habe die Lösung, dank 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");

Gelöst!

Answer 3

Es gibt eine dialogClass der Option Dialog Funktion können Sie eine CSS-Klasse für das Dialogfeld selbst angeben. Sie können ihm einen eindeutigen Klassennamen geben und diesen Klassennamen verwenden, um einen Verweis auf alle untergeordneten Elemente des Dialogs zu erhalten. Verwenden Sie dann die Selektoren, um entweder einen Verweis auf die untergeordneten Schaltflächen nach Position oder nach dem enthaltenen Text zu erhalten (wahrscheinlich ist es effizienter, Ersteres zu verwenden).

Answer 4

Haben Sie schon die addClass Funktion?

Answer 5

Ich hatte dasselbe Problem. Sehr ähnlich wie Nico's Lösung, aber fügen Sie das Styling auf die Funktion öffnen auf dem Dialog:

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