wake-up-neo.com

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:

  1. Ü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.
  2. 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)
    }
});
77
MegaMatt

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

Sie können den offenen Ereignishandler verwenden, um zusätzliches Styling anzuwenden:

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

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

  1. Ü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
  2. 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 ...

6
jeroen

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

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

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"); 
3
jitter

Vielleicht so etwas?

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

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: enter image description here

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

2
eragon2262

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

1
rfunduk

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.

0
Qammar Feroz

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.

0
Rory