web-dev-qa-db-fra.com

Comment spécifier (remplacer) la couleur de l'icône JQuery

J'ai fait bon usage des icônes jQuery dans mon application Web, mais j'en suis arrivé à un point où j'aimerais utiliser une couleur que je ne peux pas obtenir par défaut. J'utilise actuellement le thème "State Street", qui utilise principalement du vert. Mais j'ai une boîte rouge avec du texte blanc et je voudrais également utiliser une icône blanche. Il y a des icônes blanches qui sont fournies avec le thème, mais elles ne sont appliquées que lorsque les icônes sont à l'intérieur d'un div (ou d'un autre conteneur) qui a une classe de "ui-state-focus". Cela rendra l'icône blanche, mais changera la couleur d'arrière-plan en vert, que je veux laisser en rouge.

Existe-t-il un moyen (très probablement via CSS) de remplacer quelle image d'arrière-plan jQuery utilise pour les icônes, afin que je puisse utiliser une couleur différente?

Merci.

CLARIFICATION: Je suppose que cela m'aiderait à publier le code HTML avec lequel je travaille actuellement:

<!-- currently produces a default 'grey' icon color -->
<!-- this b/c no jquery ui class (like ui-state-focus) given for errorMessage div -->
<div id="errorMessage">
    <span class="ui-icon ui-icon-alert" style="float: left"></span>
    Only 1 Activity can be added at a time 
</div>

J'ai aussi du CSS:

.dialog #errorMessage
{
    /*display: none;*/
    background-color: #CC3300;
    color: #FFFFFF;
    font-weight: bold;
    padding-top: 3px;
    padding-bottom: 3px;
    vertical-align: bottom;
    bottom: auto;
    font-size: .80em;
    width: 100%
}

"display: none" est actuellement commenté pour que je puisse le voir. Je l'ai configuré pour disparaître en cas d'erreur. Merci encore pour votre aide.

jquerycssjquery-uiicons
61
MegaMatt

Vous pouvez remplacer les icônes avec le CSS suivant:

.ui-icon
{
    background-image: url(icons.png);
}

Vous pouvez télécharger le fichier icône png dans la couleur de votre choix. Modifiez simplement la partie de couleur dans l'url suivante:

http://download.jqueryui.com/themeroller/images/ui-icons_*COLOR*_256x240.png

Par exemple, si vous souhaitez des icônes rouges et des icônes bleues de bleuet, les URL dont vous avez besoin sont les suivantes:

http://download.jqueryui.com/themeroller/images/ui-icons_ff0000_256x240.png
http://download.jqueryui.com/themeroller/images/ui-icons_6495ED_256x240.png

RedCornflower Blue

etc.

(mais n'utilisez pas l'URL comme CDN, soyez gentil et enregistrez les fichiers localement)

88
matt burns

AUTO-RÉPONSE: Spécifie moi-même l'URL de l'image d'arrière-plan comme étant le fichier qui utilise les icônes blanches. J'ai donc ajouté quelques lignes à mon fichier CSS:

.dialog #errorMessage .ui-icon
{
    background-image: url(../../CSS/themes/custom_green/imag/ui-icons_ffffff_256x240.png);
}

Cela remplace essentiellement l'image d'arrière-plan que le fichier css jQuery par défaut veut utiliser pour l'icône, et a atteint la couleur que je voulais. Bien sûr, cela ne fonctionnait que parce qu'un fichier .png d'icône blanche était inclus avec le thème. Si je voulais une couleur folle, comme le violet, j'aurais eu besoin de créer mes propres icônes. Notez que j'avais besoin d'allonger l'URL dans mon propre fichier CSS par rapport à l'URL spécifiée dans le fichier CSS jQuery, car elles sont situées à deux endroits différents dans ma source.

22
MegaMatt

Utilisez le générateur d'icônes intégré pour la couleur d'icône # 00a300 # vert foncé

.ui-icon
{
    background-image: url(http://jqueryui.com/themeroller/images/?new=00a300&w=256&h=240&f=png&fltr[]=rcd|256&fltr[]=mask|icons/icons.png) !important;
}
16
mcdba

La façon la plus simple de le faire est probablement de savoir exactement quel fichier image jQuery utilise pour les icônes, puis de modifier ce fichier image (ou de créer le vôtre) et de le déposer en place.

0
singingwolfboy

boutons: [texte: // ne pas utiliser ceci
html: 'Non', "classe": 'bg-secondaire texte-blanc p-2 frontière-0',
cliquez sur: fonction () {
$ (this) .dialog ("close");

0
jhombalz