使用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); 
       } 
      } 
     }); 

    }); 

});