Coloration icônes JQuery UI

Introduction

Avec Bootstrap il est facile de colorer les icônes, mais avec JQuery et JQuery UI, cela me semblait difficile.
Généralement les icônes sont de couleur différentes selon le thème que l'on choisi dans son application.
Mais quand n'est il, si on utilise qu'un seul thème et que l'on souhaite des icônes de couleur différentes!

Je suis tombè par hasard sur un blog anglais, qui expliquait comment il faisait.
Dans un premier temps rendez-vous à cette adresse (http://jqueryui.com/themeroller/)
Choisissez un thème en cliquant sur (Gallery).

Cliquez sur le thème.

Cliquez sur le bouton (edit).

Cliquez ensuite sur (Clickable: default state).

Récupérer la couleur de (background et texture).

Si vous voulez avoir toutes les couleurs de chaque thème vous devrez refaire la même procèdure, afin d'avoir un grand nombre de couleur.
De plus votre page devra faire appel au fichier css du thème, de la librairie JQuery et JQuery UI.

Code JavaScript

 

$(document).ready( function() {
				$('input[type="button"],input[type="submit"],input[type="reset"],button,a.button').button();
				addPrimaryIconsToButtons();
				setPrimaryButtonIconColor('blue');
				setPrimaryButtonIconColor('white');
				setPrimaryButtonIconColor('red');
			});
 
			function setPrimaryButtonIconColor(cssColorClass) {
				var iconButtonSelector = 'input.'+cssColorClass+'[type="button"], input.'+cssColorClass+'[type="submit"], input.'+cssColorClass+'[type="reset"], button.'+cssColorClass;
				$(iconButtonSelector).each(function () {
					var but = $(this);
					var classes = $(this).attr('class').split(/\s+/);
					$.each(classes, function (index, item) {
						if (item.indexOf('ui-icon-') === 0) {
							$(but).removeClass('ui-icon');
							$(but).removeClass(item);
							$(but).button(
								{
									icons: {
										primary: item
									},
									text: true
								}
						   );
						}
					});
				});
				$(iconButtonSelector).each(function () {
					$(this).find('span.ui-icon:first').addClass(cssColorClass);
				});
			}
 
			function addPrimaryIconsToButtons() {
				var iconButtonSelector = 'input.ui-icon[type="button"], input.ui-icon[type="submit"], input.ui-icon[type="reset"], button.ui-icon';
				$(iconButtonSelector).each(function () {
					var but = $(this);
					var classes = $(this).attr('class').split(/\s+/);
					$.each(classes, function (index, item) {
						if (item.indexOf('ui-icon-') === 0) {
							$(but).removeClass('ui-icon');
							$(but).button(
								{
									icons: {
										primary: item
									},
									text: true
								}
						   );
						}
					});
				});
			}			
          

Code HTML

Pour avoir une icône d'une couleur ou d'une autre l'attribut (class) se compose de trois classes.
La 3éme classe est défini non seulement dans le code CSS mais aussi dans le script JavaScript.


              <button class="ui-icon ui-icon-key red">Clic ic</button>
              <button class="ui-icon ui-icon-closethick white">Clic ici</button>
              <button class="ui-icon ui-icon-info blue">Clic ici</button>
            

Icône avec des balises (span)

Clic ici Clic ici


Icônes avec des boutons




Icônes dans une liste

 

Code CSS

Dans le code ci-dessous nous attribuons une couleur à la place de (CODE COULEUR) correspondant à la classe (white, ou red, ou bleu etc).

		  .ui-icon.white { background-image: url(http://download.jqueryui.com/themeroller/images/ui-icons_CODE COULEUR_256x240.png); }
		  .ui-icon.red { background-image: url(http://download.jqueryui.com/themeroller/images/ui-icons_CODE COULEUR_256x240.png); }
		  .ui-icon.blue { background-image: url(http://download.jqueryui.com/themeroller/images/ui-icons_CODE COULEUR_256x240.png); }
		  /*liste>*/
		  #mylist{list-style-type:none; width:200px;}
		  #mylist li { padding: 0 0 0 5px; overflow: visible !important; text-align:left !important; font-size:12px; line-height:20px;}
		  #mylist .ui-icon { float :left; }

          

Conclusion

Voilà un script qui peut être utile.
Avous de choisir entre JQuery UI ou Bootstrap pour réaliser la coloration de ces icônes

Bon dev