Anwenden von CSS auf jQuery-Dialogfeldschaltflächen
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)
}
});
Bei Verwendung dieses Codes haben beide Tasten jedoch dieselbe Farbe. Ich möchte, dass meine Abbrechen-Schaltfläche eine andere Farbe hat als meine Speichern-Schaltfläche. 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' ich selbst definiere. Ich bin mir nicht sicher, ob dies Auswirkungen auf das Problem haben wird.
Jede Hilfe wäre dankbar. Vielen Dank.
UPDATE: Es bestand Einigkeit darüber, dass hier zwei Straßen zu befahren waren:
- Überprüfen Sie den HTML-Code mit einem Firefox-Plugin wie firebug und 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 die gleichen CSS-Klassen und keine eindeutigen IDs verwendet, daher war diese Option deaktiviert.
- Verwenden Sie im geöffneten Dialogfeld 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 sinnvoller ist als: first oder: first-child b/c. Die Schaltfläche, die ich ändern wollte, war nicht unbedingt die erste in der Liste aufgeführte Schaltfläche 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 reposte meine Antwort auf eine ähnliche Frage, weil es hier anscheinend niemand gegeben hat und es viel sauberer und ordentlicher ist:
Verwenden Sie die alternative buttons -Eigenschaftssyntax:
$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)
}
});
Sie können den offenen Ereignishandler verwenden, um zusätzliches Styling anzuwenden:
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:
- Überprüfen Sie mit so etwas wie einem Firebug, ob zwischen den beiden Schaltflächen ein Unterschied (in der Klasse, der ID usw.) besteht, und verwenden Sie diesen, um die jeweilige Schaltfläche zu adressieren
- Verwenden Sie etwas wie: first-child, um zum Beispiel die erste Schaltfläche auszuwählen und diese anders zu stylen
Wenn ich mir die Quelle mit dem Firebug für einen meiner Dialoge ansehe, ergibt sich so etwas wie:
<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" adressieren, 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");
}
}
],
Wählen Sie das Div mit dem Rollendialog aus, klicken Sie auf die entsprechenden Schaltflächen und stellen Sie das CSS ein.
$("div[role=dialog] button:contains('Save')").css("color", "green");
$("div[role=dialog] button:contains('Cancel')").css("color", "red");
Vielleicht so etwas?
$('.ui-state-default:first').addClass('classForCancelButton');
Es gibt auch eine einfache Antwort zum Definieren bestimmter Stile, die nur auf diese bestimmte Schaltfläche angewendet werden, und Sie können Jquery veranlassen, den Elementstil beim Deklarieren des Dialogfelds zu deklarieren:
id: "button-delete",
text: "Delete",
style: "display: none;",
click: function () {}
danach ist hier, was der HTML-Code zeigt: 
auf diese Weise können Sie es einstellen, aber es ist nicht unbedingt einfach, es später mit jquery zu ändern.
Prüfen Sie das generierte Markup, notieren Sie sich die Klasse auf der Schaltfläche Ihrer Wahl und gestalten Sie sie selbst.
Wenn immer noch nichts für Sie funktioniert, fügen Sie die folgenden Stile zu Ihrem Seitenstilblatt 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.
Ich schlage vor, Sie werfen einen Blick auf den HTML-Code, den der Code ausgibt, und prüfen, ob es eine Möglichkeit gibt, eine (oder beide) Schaltflächen (möglicherweise die ID- oder Namensattribute) eindeutig zu identifizieren. Verwenden Sie dann jQuery, um dieses Element auszuwählen und a anzuwenden CSS Klasse dazu.