使用jquery minicolors更改颜色

Question

如何使用jquery minicolors更改页面背景，页眉，字体和页脚颜色？

http://www.abeautifulsite.net/blog/2011/02/jquery-minicolors-a-color-selector-for-input-controls/

演示：http://jsfiddle.net/fNHkL/4/

$(document).ready( function() {
    var consoleTimeout;

    $('.minicolors').each( function() {

        $(this).minicolors({
            control: $(this).attr('data-control') || 'hue',
            defaultValue: $(this).attr('data-default-value') || '',
            inline: $(this).hasClass('inline'),
            letterCase: $(this).hasClass('uppercase') ? 'uppercase' : 'lowercase',
            opacity: $(this).hasClass('opacity'),
            position: $(this).attr('data-position') || 'default',
            styles: $(this).attr('data-style') || '',
            swatchPosition: $(this).attr('data-swatch-position') || 'left',
            textfield: !$(this).hasClass('no-textfield'),
            theme: $(this).attr('data-theme') || 'default',
            change: function(hex, opacity) {

                // Generate text to show in console
                text = hex ? hex : 'transparent';
                if( opacity ) text += ', ' + opacity;
                text += ' / ' + $(this).minicolors('rgbaString');

                // Show text in console; disappear after a few seconds
                $('#console').text(text).addClass('busy');
                clearTimeout(consoleTimeout);
                consoleTimeout = setTimeout( function() {
                    $('#console').removeClass('busy');
                }, 3000);

            }
        });

    });

});

Answer 1

Updated DEMO

$(document).ready(function () {
    var consoleTimeout;

    $('.minicolors').each(function () {
        var self = this;
        $(this).minicolors({
            control: $(this).attr('data-control') || 'hue',
            defaultValue: $(this).attr('data-default-value') || '',
            inline: $(this).hasClass('inline'),
            letterCase: $(this).hasClass('uppercase') ? 'uppercase' : 'lowercase',
            opacity: $(this).hasClass('opacity'),
            position: $(this).attr('data-position') || 'default',
            styles: $(this).attr('data-style') || '',
            swatchPosition: $(this).attr('data-swatch-position') || 'left',
            textfield: !$(this).hasClass('no-textfield'),
            theme: $(this).attr('data-theme') || 'default',
            change: function (hex, opacity) {
                var color = $(this).minicolors('rgbaString');
                var parent = $(self).closest("div");
                if (parent.hasClass("bg-option")) {
                    $(".page-bg").css("background-color", color);
                } else if (parent.hasClass("header-option")) {
                    $(".header-bg").css("background-color", color);
                } else if (parent.hasClass("font-option")) {
                    $(".fonts-bg").css("color", color);
                } else if (parent.hasClass("footer-option")) {
                    $(".footer-bg").css("background-color", color);
                }
            }
        });

    });

});