jQuery UI - Ändern der Schaltflächenfarben

Question

Verwenden von jQuery UI Ich verfüge über zwei Optionsfelder, Genehmigen/Ablehnen, die ich unabhängig voneinander stylen möchte. Wenn "Genehmigen" ausgewählt ist, wird es blau und wenn "Ablehnen" ausgewählt sein, wird es rot:

Entschuldigt meine schreckliche Mockup roten Knopf :-) Hoffentlich Ihnen eine Vorstellung davon geben, was ich bin nach. Ich habe versucht, die Klasse der beiden Schaltflächen/Labels zu ändern, aber dies wird nicht auf das Overlay von jQuery-UI übertragen.

Hier ist mein aktueller Code, den die Tasten erzeugt, und auch einen Haken oder ein Kreuz in Abhängigkeit von der Auswahl angezeigt wird:

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

Jede Hilfe wäre sehr willkommen - Danke!

Answer 1

Was Sie tun müssen, ist überschreiben der jQuery UI Standard-Styling.

Hier ist, was die documentation heißt es:

Wenn eine tiefere Ebene der Anpassung erforderlich ist, gibt es widget-spezifische Klassen im jquery.ui.button.css verwiesen Sheet, das geändert werden kann. Diese Klassen sind fett markiert unten.

Beispiel Markup mit jQuery UI CSS Framework-Klassen

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

Also im Grunde, was Sie tun können, ist so etwas wie dieses:

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(Wichtig!Das Styling muss nach der jQuery UI CSS-Datei deklariert werden):

#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();​ 

Ausgang:

See the working jsFiddle demo

Answer 2

Ich benutze dies für jQueryUI Knopf

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> 

Für Sie Fall vielleicht verwenden können:

CSS:

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