Wenden Sie CSS auf jQuery-Dialogschaltflächen an

Daher habe ich derzeit einen jQuery-Dialog mit zwei Schaltflächen: Speichern und Schließen. Ich erstelle den Dialog mit dem folgenden Code:

$dialogDiv.dialog({
    autoOpen: false,
    modal: true,
    width: 600,
    resizable: false,
    buttons: {
        Cancel: function() {
                        // Cancel code here
        },
        'Save': function() {
                        // Save code here
        }
    },
    close: function() {
        // Close code here (incidentally, same as Cancel code)
    }
});

Beide Schaltflächen haben jedoch dieselbe Farbe, wenn dieser Code verwendet wird. Ich möchte, dass meine Schaltfläche Abbrechen eine andere Farbe hat als meine Schaltfläche Speichern. Gibt es eine Möglichkeit, dies mithilfe einiger integrierter jQuery-Optionen zu tun? Die Dokumentation hat mir nicht viel geholfen.

Beachten Sie, dass die Schaltfläche Abbrechen, die ich erstelle, ein vordefinierter Typ ist, aber 'Speichern' definiere ich selbst. Ich bin mir nicht sicher, ob dies einen Einfluss auf das Problem haben wird.

Jede Hilfe wäre dankbar. Vielen Dank.

UPDATE: Einigkeit bestand darin, dass hier zwei Straßen zu befahren waren:

1. Überprüfen Sie den HTML-Code mit einem Firefox-Plugin wie Firebug , notieren Sie sich die CSS-Klassen, die jQuery auf die Schaltflächen anwendet, und versuchen Sie, sie zu überschreiben. Hinweis: In meinem HTML-Code wurden für beide Schaltflächen genau dieselben CSS-Klassen und keine eindeutigen IDs verwendet. Daher war diese Option deaktiviert.
2. Verwenden Sie beim Öffnen des Dialogfelds einen jQuery-Selektor, um die gewünschte Schaltfläche abzufangen, und fügen Sie dann eine CSS-Klasse hinzu.

Ich habe mich für die zweite Option entschieden und die Methode jQuery find () verwendet, da dies meiner Meinung nach angemessener ist als die Verwendung von: first oder: first-child b / c Die Schaltfläche, die ich ändern wollte, war nicht unbedingt die erste in das Markup. Mit find kann ich einfach den Namen der Schaltfläche angeben und auf diese Weise CSS hinzufügen. Der Code, mit dem ich gelandet bin, ist unten:

$dialogDiv.dialog({
    autoOpen: false,
    modal: true,
    width: 600,
    resizable: false,
    buttons: {
        Cancel: function() {
                        // Cancel code here
        },
        'Save': function() {
                        // Save code here
        }
    },
        open: function() {
            $('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('cancelButtonClass');
        }
    close: function() {
        // Close code here (incidentally, same as Cancel code)
    }
});

Ich poste meine Antwort auf eine ähnliche Frage erneut, weil niemand sie hier gegeben zu haben scheint und sie viel sauberer und ordentlicher ist:

Verwenden Sie die alternative buttonsEigenschaftssyntax:

$dialogDiv.dialog({
    autoOpen: false,
    modal: true,
    width: 600,
    resizable: false,
    buttons: [
        {
            text: "Cancel",
            "class": 'cancelButtonClass',
            click: function() {
                // Cancel code here
            }
        },
        {
            text: "Save",
            "class": 'saveButtonClass',
            click: function() {
                // Save code here
            }
        }
    ],
    close: function() {
        // Close code here (incidentally, same as Cancel code)
    }
});

Mit dem Open Event Handler können Sie zusätzliches Styling anwenden:

 open: function(event) {
     $('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('cancelButton');
 }

Ich denke, es gibt zwei Möglichkeiten, wie Sie damit umgehen können:

1. Überprüfen Sie mit Firebug, ob zwischen den beiden Schaltflächen ein Unterschied (in Klasse, ID usw.) besteht, und verwenden Sie diesen, um die jeweilige Schaltfläche zu adressieren
2. Verwenden Sie etwas wie: Erstes Kind, um zum Beispiel die erste Schaltfläche auszuwählen und diese anders zu gestalten

Wenn ich mir die Quelle mit Firebug für einen meiner Dialoge ansehe, wird Folgendes angezeigt:

<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
    <button class="ui-state-default ui-corner-all ui-state-focus" type="button">Send</button>
    <button class="ui-state-default ui-corner-all" type="button">Cancel</button>
</div>

So könnte ich zum Beispiel die Schaltfläche Senden ansprechen, indem ich einige Stile zu .ui-state-focus hinzufüge (mit möglicherweise einigen zusätzlichen Selektoren, um sicherzustellen, dass ich die Stile von jquery überschreibe).

Übrigens würde ich in diesem Fall die zweite Option wählen, um Probleme zu vermeiden, wenn sich der Fokus ändert ...

Sie sollten das Wort "className" für "class" ändern.

buttons: [ 
    { 
        text: "Cancel",
        class: 'ui-state-default2', 
        click: function() { 
            $(this).dialog("close"); 
        } 
    }
],

Vielleicht so etwas?

$('.ui-state-default:first').addClass('classForCancelButton');

Wählen Sie das Div mit dem Rollendialog aus, rufen Sie die entsprechenden Schaltflächen auf und legen Sie das CSS fest.

$("div[role=dialog] button:contains('Save')").css("color", "green");
$("div[role=dialog] button:contains('Cancel')").css("color", "red"); 

Es gibt auch eine einfache Antwort zum Definieren bestimmter Stile, die nur auf diese bestimmte Schaltfläche angewendet werden, und Sie können Jquery beim Deklarieren des Dialogfelds den Elementstil deklarieren lassen:

id: "button-delete",
text: "Delete",
style: "display: none;",
click: function () {}

Danach zeigt das HTML Folgendes:

Auf diese Weise können Sie es einstellen, aber es ist nicht unbedingt einfach, es später mit jquery zu ändern.

Überprüfen Sie das generierte Markup, notieren Sie sich die Klasse auf der Schaltfläche Ihrer Wahl und gestalten Sie sie selbst.

Ich schlage vor, Sie werfen einen Blick auf den HTML-Code, den der Code ausspuckt, und prüfen, ob es eine Möglichkeit gibt, eine (oder beide) der Schaltflächen (möglicherweise die ID- oder Namensattribute) eindeutig zu identifizieren. Wählen Sie dann mit jQuery das Element aus und wenden Sie a an CSS-Klasse dazu.

Wenn dies immer noch funktioniert, fügen Sie die folgenden Stile zu Ihrem Seitenstylesheet hinzu

.ui-widget-content .ui-state-default {
  border: 0px solid #d3d3d3;
  background: #00ACD6 50% 50% repeat-x;
  font-weight: normal;
  color: #fff;
}

Dadurch wird die Hintergrundfarbe der Dialogschaltflächen geändert.