web-dev-qa-db-fra.com

Changer la couleur des boutons jQuery UI

Existe-t-il un moyen simple de modifier la couleur d'un bouton d'interface utilisateur jQuery? La modification du css est déconseillée dans la documentation et le faire de toute façon est délicat. Ils disent: "Nous vous recommandons d'utiliser l'outil ThemeRoller pour créer et télécharger des thèmes personnalisés faciles à créer et à gérer." Je comprends comment changer le thème, mais comment obtenir des boutons de couleur différente sur la même page?

jqueryhtmljquery-uibuttonjquery-ui-button
30
at.

Je viens de faire ceci: créer un nouveau thème avec le nouveau bouton de couleur; copiez les fichiers de dégradé ..hard .. et ..soft ... du nouveau dossier d'images de thème; les renommer pour ne pas les confondre avec le thème principal; et enfin ajouter le style au bouton. Cela répond au dégradé et à la couleur ...

Je viens d'essayer ceci pour un bouton vert:

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;
}
17
Mark Redman

Le moyen le plus simple serait d'ajouter une classe à vos boutons (pour différentes couleurs), puis d'avoir un CSS qui écrase le CSS jquery-ui.

Exemple

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

Essaye ça:

HTML:

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

jQuery:

$("#change_color").css("background","green");
3
Praveen Kumar K R

Il existe deux (trois?) Types de boutons JQueryUI; Fondamentalement, vous faites un bouton comme ceci:

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

Ensuite, vous dites à JQueryUI que c'est un bouton:

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

Produisant ainsi ce balisage:

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

Et vous pouvez styliser ceci de la manière "classique": (.myButtons {}, .myButtons:hover {} etc.)

Mais !

Si votre "bouton" est l'un des checkboxradio ou controlgroup alors c'est un autre balisage:

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

Ensuite, si vous appliquez la méthode:

$( "input" ).checkboxradio();

Vous obtenez ce balisage généré (le 2ème pseudo bouton , "Paris" est coché/cliqué):

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

Et puis ces classes peut (doit?) Être utilisé pour styliser les pseudo "boutons":

.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;
}
0
yPhil