logo

Generátor palety barev pomocí jQuery

Jak se stále učím jQuery, myslím, že je důležité, abych začal portováním skriptů, které jsem vytvořil pomocí MooTools. Jedním z těchto skriptů je můj skript Color Palette Generator, který debutoval na blogu Erica Wendelina. Pro ty z vás, kterým to uniklo, můj skript analyzuje všechny barvy na stránce (bez obrázků) a vytvoří paletu barev. Tady je to v nějaké dobrotě jQuery.

Zobrazit ukázku

XHTML

<input type="button" id="get-colors" value="Get Colors" class="button" />
<div id="colors-wrapper"></div>

Vše, co potřebujeme, je tlačítko, které spustí generování palety, a kontejner DIV, který bude obsahovat všechny DIV, které moje jQuery vytvoří.

CSS

.dcolor		{ height:40px; }
.dtext		{  }
.dwrapper	{ width:200px; float:left; padding:10px; margin:0 20px 20px 0; border:1px solid #ccc; }

Tyto třídy CSS fungují jako kontejnery pro textový DIV, který vygeneruji, a pro vygenerovaný DIV zobrazující barvy. Tyto dva DIV jsou uloženy v jednom obalu DIV.

JavaScript jQuery

/* when the dom is ready */
$(document).ready(function() {
	$('#get-colors').click(function() {  
		
		//my colors array
		var colors = new Array();
		
		//get all elements
		$('*').each(function() {
			if($(this).css('background-color') && $(this).css('background-color') != 'transparent') { colors.push($(this).css('background-color')); }
			if($(this).css('color')) { colors.push($(this).css('color')); }
			if($(this).css('border-color')) { colors.push($(this).css('border-color')); }
		});
		
		//remove dupes and sort
		colors.sort();
		
		//create a color block for all of them
		jQuery.each(colors,function(it,value) {
			
			if(!$('div[rel=\'' + value + '\']').length)
			{
			
				//inject the wrapper
				var wrapper_id = 'w' + it;
				$('<div class="dwrapper" id="' + wrapper_id + '" rel="' + value + '"> </div>').appendTo('#colors-wrapper');
				
				//inject the color div
				$('<div class="dcolor" style="background-color:' + value + '"> </div>').appendTo('#' + wrapper_id);
				
				//inject text div
				$('<div class="text">' + value + '</div>').appendTo('#' + wrapper_id);
			}
			
		});
		
	});
});

Když někdo klikne na tlačítko „Získat barvy“, vezmu každý prvek v DOM a shromáždím jeho barvu, barvu pozadí a barvu okraje. Jakmile projdu všechny prvky, procházejte všechny barvy a zobrazte je jako DIV uvnitř mého prvku obálky barev. Všimněte si, že jsem použil atribut rel, abych zabránil duplicitám.

Zobrazit ukázku

Je tu pro vás generátor barevných palet jQuery!