Wenden Sie CSS auf jQuery-Dialogschaltflächen an

80

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)
    }
});
MegaMatt
quelle

Antworten:

131

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)
    }
});
Raphael Schweikert
quelle
11
Bei neuen Versionen der jQuery-Benutzeroberfläche (oder jQuery, kann ich nicht sagen) müssen Sie möglicherweise den Schlüssel für die zusätzlichen Klassen von classNameauf ändern "class".
Raphael Schweikert
In Version> jqueryui 1.8. existiert Klasse nicht Klassenname.
Kajo
2
@ RaphaelSchweikert - Dies wird einen Skriptfehler in IE7 / 8/9
auslösen
1
@maxp Was für ein Skriptfehler? Stellen Sie sicher, dass Sie das zitieren "class"und es sollte nicht.
Raphael Schweikert
13

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

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

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 ...

Jeroen
quelle
zum Hinzufügen des Fokusstatus der Schaltfläche zur Lösung.
Chris22
4

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

buttons: [ 
    { 
        text: "Cancel",
        class: 'ui-state-default2', 
        click: function() { 
            $(this).dialog("close"); 
        } 
    }
],
dfortun
quelle
4
Die Verwendung class: 'ui-state-default2'kann zu Browserproblemen führen, da dies classin einigen JavaScript-Versionen ein Schlüsselwort ist ( als Referenz ). Verwenden Sie "class" : 'ui-state-default2'stattdessen.
sinemetu1
3

Vielleicht so etwas?

$('.ui-state-default:first').addClass('classForCancelButton');
Nick Spires
quelle
3

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"); 
Jitter
quelle
Andere Antworten, die besagten, dass die Dialogoption "Öffnen" verwendet werden sollte, funktionierten bei mir nicht (obwohl der von mir verwendete Selektor korrekt war, wenn er nach dem Öffnen des Dialogfelds verwendet wurde), aber dies tat es.
Chris Lawlor
2

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: Geben Sie hier die Bildbeschreibung ein

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

eragon2262
quelle
1

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

rfunduk
quelle
Er hat das Markup nicht zur Verfügung gestellt. Meine Antwort wurde ein paar Stunden vor seinem Update geschrieben, wo er diese Tatsache spezifiziert.
Rfunduk
0

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.

Rory
quelle
0

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.

Qammar Feroz
quelle