Interfaccia utente jQuery - Modifica dei colori dei pulsanti

Question

Uso dell'interfaccia utente jQuery Ho due pulsanti di opzione Approva/Rifiuta, che desidero impostare in modo indipendente, quindi quando è selezionato "Approva", sarà blu e quando "Rifiuta" è selezionato , sarà rosso:

mi scuso per il mio terribile pulsante rosso mockup :-) Speriamo che questo vi darà un'idea di quello che sto cercando. Ho provato a cambiare la classe di entrambi i pulsanti/etichette, ma questo non si riflette sull'overlay jQuery-UI.

Ecco il mio codice corrente che genera i pulsanti, e anche la visualizzazione di un segno di spunta o una croce a seconda della selezione:

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

Qualsiasi aiuto sarebbe molto apprezzato - grazie!

Answer 1

Quello che devi fare è ignorare lo stile predefinito dell'interfaccia jQuery.

Ecco ciò che il documentation afferma:

Se è necessario un livello più profondo di personalizzazione, ci sono classi specifiche di widget riferimento all'interno del jquery.ui.button.css foglio di stile che può essere modificato. Queste classi sono evidenziate in grassetto qui sotto.

markup di esempio con jQuery UI CSS classi del framework

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

Quindi, in sostanza, cosa si può fare, è qualcosa di simile:

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(Importante!Questo stile deve essere dichiarato dopo che il file CSS UI 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();​ 

uscita:

See the working jsFiddle demo

Answer 2

Io lo uso per jQueryUI Button

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> 

Per voi caso forse possibile utilizzare:

CSS:

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