Gibt es eine einfache Möglichkeit, die Farbe einer jQuery-UI-Schaltfläche zu ändern? Von der Änderung des CSS wird in der Dokumentation abgeraten, und es ist ohnehin schwierig, dies zu tun. Sie sagen: “Wir empfehlen die Verwendung des ThemeRoller-Tools zum Erstellen und Herunterladen benutzerdefinierter Designs, die einfach zu erstellen und zu warten sind.” Ich verstehe, wie man das Design ändert, aber wie bekommt man dann verschiedenfarbige Schaltflächen auf derselben Seite?

Ich habe gerade Folgendes getan: Erstellen Sie ein neues Design mit der Schaltfläche „Neue Farbe“. Kopieren Sie die ..harten.. und ..weichen… Verlaufsdateien aus dem Ordner mit den neuen Themenbildern; umbenennen, um sie nicht mit dem Hauptthema zu verwechseln; und fügen Sie schließlich den Stil der Schaltfläche hinzu. Dies sorgt für den Farbverlauf und die Farbe …

Ich habe das gerade für einen grünen Knopf versucht:

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

Der einfachste Weg wäre, Ihren Schaltflächen eine Klasse hinzuzufügen (für verschiedene Farben) und dann ein CSS zu haben, das das 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;
}

Versuche dies:

HTML:

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

jQuery:

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

Es gibt zwei (drei?) Arten von JQueryUI-Schaltflächen ; Grundsätzlich machst du a Taste so was:

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

Dann teilen Sie JQueryUI mit, dass es sich um eine Schaltfläche handelt:

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

So entsteht dieses Markup:

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

Und Sie können dies auf die “klassische” Weise stylen: (.myButtons {}, .myButtons:hover {} etc.)

Aber !

Wenn Ihr “Button” einer von ist Kontrollkästchenradio oder Kontrollgruppe dann ist es Ein weiterer Auszeichnung:

<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 dieses generierte Markup (das 2 Pseudo-Taste“Paris” ist angekreuzt/angeklickt):

<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 diese Klassen kann (muss?) verwendet werden, um die Pseudo-“Buttons” zu 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;
}