jquery调色板_使用jQuery的调色板生成器

怼烎@ 2023-02-22 01:25 2阅读 0赞

jquery调色板

As I continue to learn jQuery, I think it's important that I begin by porting over scripts I've created using MooTools. One of those scripts is my [Color Palette Generator][] script, which debuted on [Eric Wendelin's blog][Eric Wendelin_s blog]. For those of you that missed it, my script analyzes all of the colors on the page (minus images) and builds a palette of colors. Here it is in some jQuery goodness.

随着我继续学习jQuery，我认为从移植使用MooTools创建的脚本开始很重要。 这些脚本之一是我的[调色板生成器][Color Palette Generator]脚本，该脚本在[Eric Wendelin的博客][Eric Wendelin_s blog]上首次亮相。 对于那些想念它的人，我的脚本会分析页面上的所有颜色(减去图像)并构建一个调色板。 这就是jQuery的优点。

[View Demo][] [观看演示][View Demo]

## XHTML **(**The XHTML**)** ##

All we need to begin with is the button that triggers the palette generation and a DIV container that will hold all of the DIVs my jQuery creates.

我们所需要做的只是触发调色板生成的按钮和一个DIV容器，该容器将保存我的jQuery创建的所有DIV。

## CSS **(**The CSS**)** ##

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

These CSS classes act as containers for the text DIV I generate and the color-displaying DIV I generate. Those two DIVs are held in one wrapping DIV.

这些CSS类充当我生成的文本DIV和我生成的颜色显示DIV的容器。 这两个DIV被保存在一个包装的DIV中。

## jQuery JavaScript **(**The jQuery JavaScript**)** ##

/* 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);
    			}
    			
    		});
    		
    	});
    });

When someone clicks the "Get Colors" button, I grab every element in the DOM and collect its color, background-color, and border-color. Once I've cycled through all of the elements, cycle through all of the colors and display them as DIVs inside my colors-wrapper element. You'll note that I utilized the rel attribute to prevent duplicates.

当有人单击“获取颜色”按钮时，我抓取DOM中的每个元素并收集其颜色，背景色和边框色。 遍历所有元素后，遍历所有颜色并将它们显示为我的color -wrapper元素内的DIV。 您会注意到，我利用rel属性来防止重复。

[View Demo][] [观看演示][View Demo]

There's the jQuery Color Palette Generator for you!

有适合您的jQuery调色板生成器！

> 翻译自: [https://davidwalsh.name/color-palette-generator-jquery][https_davidwalsh.name_color-palette-generator-jquery]

jquery调色板

[Color Palette Generator]: http://eriwen.com/css/color-palette-with-css-and-moo/
[Eric Wendelin_s blog]: http://eriwen.com/
[View Demo]: https://davidwalsh.name/demo/color-palette-jquery.php
[https_davidwalsh.name_color-palette-generator-jquery]: https://davidwalsh.name/color-palette-generator-jquery