jQuery UI - zmiana kolorów przycisków

Question

Używanie jQuery UI Mam dwa przyciski opcji: Zatwierdź/Odrzuć, które chciałbym stylizować niezależnie, więc po zaznaczeniu opcji "Zatwierdź" będą one niebieskie, a po wybraniu "Odrzuć" , to będzie czerwony:

Przepraszam za moją straszną czerwony przycisk makieta :-) mam nadzieję, że to daje wyobrażenie o tym, co ja jestem po. Próbowałem zmienić klasę obu przycisków/etykiet, ale to nie jest następnie odzwierciedlane w nakładce jQuery-UI.

Oto mój aktualny kod, który generuje przycisków, a także wyświetlanie kleszcza lub krzyż w zależności od wyboru:

$('.approvedToggle').buttonset(); 

$('input:radio').click(function() { 
    if($(this).val() === 'approve') { 
     $(this).parent('div').children(".tick").show(); 
     $(this).parent('div').children(".cross").hide(); 
    } else { 
     $(this).parent('div').children(".tick").hide(); 
     $(this).parent('div').children(".cross").show(); 
    } 
}); 

Każda pomoc będzie mile widziane - dzięki!

Answer 1

Co należy zrobić, to zastąpić domyślnym stylem jQuery UI.

Oto co documentation stany:

Jeśli potrzebny jest głębszy poziom personalizacji, istnieje klasy widget specyficzne przywoływane w jquery.ui.button.css stylów, które mogą być modyfikowane. Te klasy są pożywne pogrubioną czcionką poniżej.

Próbka znaczniki z jQuery klas ramowych UI CSS

<button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all"> <span class="ui-button-text">Button Label</span> </button>

Więc w zasadzie, co można zrobić, to coś takiego:

HTML:

<div id="approvedToggle"> 
    <input type="radio" id="ApproveButton" name="radio" /> 
    <label id="ApproveButtonLabel" for="ApproveButton">Approve</label> 

    <input type="radio" id="RejectButton" name="radio" /> 
    <label id="RejectButtonLabel" for="RejectButton">Reject</label> 
</div>​ 

CSS(Ważne!Ta stylizacja MUSI być zadeklarowane po UI pliku CSS jQuery):

#ApproveButtonLabel.ui-state-active { background: blue; } 
#ApproveButtonLabel.ui-state-active span.ui-button-text { color: red; } 

#RejectButtonLabel.ui-state-active { background: red; } 
#RejectButtonLabel.ui-state-active span.ui-button-text { color: blue; } 

jQuery:

$('#approvedToggle').buttonset();​ 

Output:

See the working jsFiddle demo

Answer 2

Używam tego dla jQueryUI Buttona

CSS:

button.red-button 
{ 
    background:radial-gradient(#FF0000,#660000); 
    color:white; 
    border-color:#660000; 
} 
button.red-button:hover 
{ 
    background:radial-gradient(#FF0000,#880000); 
    color:white; 
    border-color:#660000; 
} 
button.red-button:active 
{ 
    background:radial-gradient(#FF0000,#660000); 
    color:white; 
    border-color:#660000; 
} 

html:

<button class="red-button">Button</button> 

Dla ciebie przypadek może można użyć:

CSS:

input.red-button 
input.red-button:hover 
input.red-button:active