Ändern der Farbe der jQuery UI-Schaltflächen

Question

Gibt es eine einfache Möglichkeit, die Farbe einer jQuery UI-Schaltfläche zu ändern? Das Ändern der CSS wird von der Dokumentation abgeraten, und dies trotzdem zu tun, ist schwierig. Sie sagen: "Wir empfehlen, das ThemeRoller-Tool zum Erstellen und Herunterladen benutzerdefinierter Designs zu verwenden, die einfach zu erstellen und zu warten sind." Ich verstehe, wie man das Thema ändert, aber wie bekommen Sie verschiedene farbige Knöpfe auf der gleichen Seite?

Answer 1

Ich habe gerade dies: ein neues Thema mit der neuen Farbtaste erstellen; Kopieren Sie die ..hard .. und ..soft ... Gradienten-Dateien aus dem neuen Ordner theme images; benenne sie um, damit sie nicht mit dem Hauptthema verwechselt werden; und schließlich den Stil der Schaltfläche hinzufügen. Dies sorgt für den Verlauf und die Farbe ...

ich das gerade versucht, für eine grüne Taste:

a.green-button 
{ 
    background: url(Images/GreenBGHardGrad.png) repeat-x center; 
    border: 1px solid #132b14; 
    color:#FFFFFF; 
} 
a.green-button:hover 
{ 
    background: url(Images/GreenBGSoftGrad.png) repeat-x center; 
    border: 1px solid #132b14; 
    color:#FFFFFF; 
} 
a.green-button:active 
{ 
    background-color:#FFFFFF; 
    border: 1px solid #132b14; 
    color:#132b14; 
} 

Answer 2

Der einfachste Weg wäre, eine Klasse zu Ihren Tasten hinzuzufügen (für verschiedene Farben) und dann eine CSS zu haben, die die jquery-ui CSS überschreibt.

Beispiel

var $button = $(document.createElement('a')); 
//add class 
$button.addClass('redButton'); 
//call the jquery-ui button function 
$button.button(); 

Css

.ui-button.redButton { 
    background-color: red; 
} 
.ui-button.greenButton { 
    background-color: green; 
} 

Answer 3

Versuchen Sie folgendes:

HTML:

<button type="button" id="change_color"> change button </button> 

jQuery:

$("#change_color").css("background","green"); 

Answer 4

Es gibt zwei (drei?) Arten von JQueryUI-Schaltflächen; Grundsätzlich Sie eine button wie diese machen:

<span class="myButtons">Click here</span> 

Dann sagen Sie jQueryUI, dass es eine Taste ist:

$('span.myButtons').button() 

So Herstellung dieser Auszeichnungs:

<span class="myButtons ui-button ui-corner-all ui-widget" role="button">Click here</span> 

Und Sie können diesen Stil der " klassischer Weg: (.myButtons {}, .myButtons:hover {} usw.)

Aber!

Wenn Ihr "Knopf" eine von checkboxradio oder controlgroup ist, dann ist es andere Markup:

<fieldset> 
    <legend>Select a Location: </legend> 
    <label for="radio-1">New York</label> 
    <input type="radio" name="radio-1" id="radio-1"> 
    <label class"danger" for="radio-2">Paris</label> 
    <input type="radio" name="radio-1" id="radio-2"> 
    <label for="radio-3">London</label> 
    <input type="radio" name="radio-1" id="radio-3"> 
</fieldset> 

Dann, wenn Sie die Methode anwenden:

$("input").checkboxradio(); 

Sie erhalten diese generierte Markup (die 2. Pseudoknopf, "Paris" ist markiert/geklickt):

<fieldset> 
     <legend>Select a Location: </legend> 
     <label for="radio-1" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-radio-label"><span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-blank"></span><span class="ui-checkboxradio-icon-space"> </span>New York</label> 
     <input name="radio-1" id="radio-1" class="ui-checkboxradio ui-helper-hidden-accessible" type="radio"> 
     <label for="radio-2" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-radio-label ui-checkboxradio-checked ui-state-active"><span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-blank"></span><span class="ui-checkboxradio-icon-space"> </span>Paris</label> 
     <input name="radio-1" id="radio-2" class="ui-checkboxradio ui-helper-hidden-accessible" type="radio"> 
     <label for="radio-3" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-radio-label"><span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-blank"></span><span class="ui-checkboxradio-icon-space"> </span>London</label> 
     <input name="radio-1" id="radio-3" class="ui-checkboxradio ui-helper-hidden-accessible" type="radio"> 
</fieldset> 

Und dann those classes kann (muss?) Verwendet werden, um die Pseudo „Tasten“ stylen:

.ui-visual-focus { 
    box-shadow: none; 
} 

label.ui-checkboxradio.ui-state-default { 
    color: black; 
    background-color: teal; 
} 

label.ui-checkboxradio.danger.ui-state-active { 
    background-color: red; 
}