Existe-t-il un moyen simple de changer la couleur d'un bouton de l'interface utilisateur jQuery? La modification du CSS est déconseillée dans la documentation et, de toute façon, c'est difficile. Ils disent: «Nous 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 alors comment obtenez-vous différents boutons de couleur sur la même page?Modification de la couleur des boutons de l'interface utilisateur jQuery

2010-12-08 at.

Je viens de faire ceci: créer un nouveau thème avec le nouveau bouton de couleur; copier les fichiers dégradés ..hard .. et ..soft ... du nouveau dossier des 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 à la pente et la couleur ...

Je viens d'essayer cela 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; 
}

Source

2011-02-15 15:42:51

J'ai fait quelque chose le long de ces lignes, mais j'ai utilisé des arrière-plans de dégradés css à la place. Je devrais avoir mis à jour la question avec ma solution ... à la place je vous créditerai avec la réponse. –

J'aimerais voir votre solution avec le gradient ... –

J'avais également expérimenté avec ces solutions plus tôt ... et personnellement j'ai préféré la réponse ci-dessus plutôt que des gradients. Principalement parce que le support de gradient n'est pas uniforme entre les navigateurs. De plus, vous pouvez personnaliser la même texture d'arrière-plan avec la solution ci-dessus, alors qu'avec les dégradés, vous ne pourrez peut-être pas obtenir la même texture. L'inconvénient est que vous accédez à un autre élément de l'image - mais si vous utilisez jqueryui, vous avez déjà accès au nombre d'images - 1 de plus ne devrait pas faire beaucoup de diff. – user1517108

La manière la plus simple serait d'ajouter une classe à vos boutons (pour différentes couleurs) et ensuite avoir un peu de 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; 
}

Source

2010-12-08 22:02:33 joekarl

réglage l'arrière-plan de couleur rouge ne change pas vraiment la couleur du bouton –

Les arrière-plans des boutons sont des images plutôt que des couleurs simples, vous aurez besoin de changer ' background-image' et éventuellement ajouter '! important' pour forcer le problème. –

vous pouvez simplement mettre 'background: red'. jquery utilise l'élément d'arrière-plan pour définir l'image, donc l'utiliser pour définir la couleur remplacera l'image. – ContextSwitch

Essayez ceci:

HTML:

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

jQuery:

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

Source

2014-09-02 04:03:06

Il existe deux (trois?) Types de boutons JQueryUI; Fondamentalement, vous faites une button 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 définir le style cela " classique "façon: (.myButtons {}, .myButtons:hover {} etc.)

Mais!

Si votre "bouton" est l'un des checkboxradio ou controlgroup il est 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>

Puis those classes peut (doit?) Être utilisé pour le style 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; 
}

Source

2018-02-27 14:08:58 yPhil

Modification de la couleur des boutons de l'interface utilisateur jQuery

Répondre

Mais!

Questions connexes