jquery调色板_使用jQuery的调色板生成器-蒲公英云

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

怼烎@ 2023-02-22 01:25 84阅读 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. 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创建的脚本开始很重要。这些脚本之一是我的调色板生成器脚本，该脚本在Eric Wendelin的博客上首次亮相。对于那些想念它的人，我的脚本会分析页面上的所有颜色(减去图像)并构建一个调色板。这就是jQuery的优点。

View Demo 观看演示

XHTML (The XHTML)

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

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 观看演示

There’s the jQuery Color Palette Generator for you!

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