Zastosuj CSS do przycisków dialogowych jQuery

Więc obecnie mam okno dialogowe jQuery z dwoma przyciskami: Zapisz i Zamknij. Tworzę okno dialogowe za pomocą poniższego kodu:

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

Jednak oba przyciski mają ten sam kolor, gdy używany jest ten kod. Chciałbym, aby mój przycisk Anuluj miał inny kolor niż mój Zapisz. Czy istnieje sposób, aby to zrobić za pomocą niektórych wbudowanych opcji jQuery? Dokumentacja nie pomogła mi zbytnio.

Zwróć uwagę, że przycisk Anuluj, który tworzę, jest wstępnie zdefiniowanym typem, ale „Zapisz” definiuję siebie. Nie jestem pewien, czy będzie to miało jakiś wpływ na problem.

Każda pomoc będzie mile widziana. Dzięki.

AKTUALIZACJA: Konsensus był taki, że istnieją dwie drogi do podróży:

1. Sprawdź kod HTML za pomocą wtyczki Firefox, takiej jak firebug , i zwróć uwagę na klasy CSS, które jQuery stosuje do przycisków, i spróbuj je zastąpić. Uwaga: w moim kodzie HTML oba przyciski miały dokładnie te same klasy CSS i żadnych unikalnych identyfikatorów, więc ta opcja nie była dostępna.
2. Użyj selektora jQuery w otwartym oknie dialogowym, aby złapać przycisk, który chciałem, a następnie dodaj do niego klasę CSS.

Wybrałem drugą opcję i użyłem metody find () jQuery, ponieważ uważam, że jest to bardziej odpowiednie niż użycie: first lub: first-child b / c przycisk, który chciałem zmienić, niekoniecznie był pierwszym przyciskiem wymienionym w znaczniki. Korzystając z funkcji find, mogę po prostu określić nazwę przycisku i w ten sposób dodać CSS. Kod, który otrzymałem, znajduje się poniżej:

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

Ponownie zamieszczam moją odpowiedź na podobne pytanie, ponieważ wydaje się, że nikt jej tutaj nie udzielił i jest znacznie czystsza i schludniejsza:

Użyj alternatywnej buttonsskładni właściwości:

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

Możesz użyć procedury obsługi zdarzenia open, aby zastosować dodatkowe style:

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

Myślę, że można sobie z tym poradzić na dwa sposoby:

1. Sprawdź za pomocą czegoś takiego jak firebug, czy istnieje różnica (w klasie, identyfikatorze itp.) Między dwoma przyciskami i użyj tego do zaadresowania określonego przycisku
2. Użyj czegoś takiego jak: first-child, aby wybrać na przykład pierwszy przycisk i nadać mu inny styl

Kiedy patrzę na źródło z firebug dla jednego z moich dialogów, pojawia się coś takiego:

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

Mogę więc na przykład zająć się przyciskiem Wyślij, dodając kilka stylów do .ui-state-focus (być może z dodatkowymi selektorami, aby upewnić się, że nadpisuję style jquery).

Swoją drogą, w tym przypadku wybrałbym drugą opcję, aby uniknąć problemów, gdy zmienia się fokus ...

Należy zmienić słowo „className” na „class”

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

Może coś takiego?

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

Wybierz div, który ma okno dialogowe roli, a następnie pobierz odpowiednie przyciski i ustaw CSS.

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

Istnieje również prosta odpowiedź na zdefiniowanie konkretnych stylów, które będą stosowane tylko do tego konkretnego przycisku, a Jquery może zadeklarować styl elementu podczas deklarowania okna dialogowego:

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

po wykonaniu tej czynności kod HTML pokazuje:

pozwala to na ustawienie go, ale późniejsza zmiana przy użyciu jquery niekoniecznie jest łatwa.

Dlaczego po prostu nie sprawdzić wygenerowanych znaczników, zanotować klasę na wybranym przycisku i samodzielnie ją nadać stylowi?

Proponuję przyjrzeć się kodowi HTML, który wypluwa kod i sprawdzić, czy istnieje sposób na jednoznaczną identyfikację jednego (lub obu) przycisków (prawdopodobnie atrybuty identyfikatora lub nazwy), a następnie użyć jQuery, aby wybrać ten element i zastosować css do niego.

Jeśli nadal działa notowanie, dodaj następujące style do arkusza stylów strony

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

Zmieni kolor tła przycisków dialogowych.