以下是 jQuery颜色选择器插件_2特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery颜色选择器插件</title>
<link rel="stylesheet" type="text/css" href="spectrum.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="spectrum.js"></script>
<script type='text/javascript' src='docs/docs.js'></script>
</head>
<body>
<br><br><br>
<div style='text-align:center;'>
<input id="full" />
</div>
</body>
</html>JS代码(docs.js):
function updateBorders(color){
var hexColor = "transparent";
if(color){
hexColor = color.toHexString();
}
$("#docs-content").css("border-color",hexColor);
}
$(function(){
$("#full").spectrum({
allowEmpty:true,color:"#ECC",showInput:true,containerClassName:"full-spectrum",showInitial:true,showPalette:true,showSelectionPalette:true,showAlpha:true,maxPaletteSize:10,preferredFormat:"hex",localStorageKey:"spectrum.demo",move:function (color){
updateBorders(color);
}
,show:function (){
}
,beforeShow:function (){
}
,hide:function (color){
updateBorders(color);
}
,palette:[ ["rgb(0,0,0)","rgb(67,67,67)","rgb(102,102,102)",/*"rgb(153,153,153)","rgb(183,183,183)",*/
"rgb(204,204,204)","rgb(217,217,217)",/*"rgb(239,239,239)","rgb(243,243,243)",*/
"rgb(255,255,255)"],["rgb(152,0,0)","rgb(255,0,0)","rgb(255,153,0)","rgb(255,255,0)","rgb(0,255,0)","rgb(0,255,255)","rgb(74,134,232)","rgb(0,0,255)","rgb(153,0,255)","rgb(255,0,255)"],["rgb(230,184,175)","rgb(244,204,204)","rgb(252,229,205)","rgb(255,242,204)","rgb(217,234,211)","rgb(208,224,227)","rgb(201,218,248)","rgb(207,226,243)","rgb(217,210,233)","rgb(234,209,220)","rgb(221,126,107)","rgb(234,153,153)","rgb(249,203,156)","rgb(255,229,153)","rgb(182,215,168)","rgb(162,196,201)","rgb(164,194,244)","rgb(159,197,232)","rgb(180,167,214)","rgb(213,166,189)","rgb(204,65,37)","rgb(224,102,102)","rgb(246,178,107)","rgb(255,217,102)","rgb(147,196,125)","rgb(118,165,175)","rgb(109,158,235)","rgb(111,168,220)","rgb(142,124,195)","rgb(194,123,160)","rgb(166,28,0)","rgb(204,0,0)","rgb(230,145,56)","rgb(241,194,50)","rgb(106,168,79)","rgb(69,129,142)","rgb(60,120,216)","rgb(61,133,198)","rgb(103,78,167)","rgb(166,77,121)",/*"rgb(133,32,12)","rgb(153,0,0)","rgb(180,95,6)","rgb(191,144,0)","rgb(56,118,29)","rgb(19,79,92)","rgb(17,85,204)","rgb(11,83,148)","rgb(53,28,117)","rgb(116,27,71)",*/
"rgb(91,15,0)","rgb(102,0,0)","rgb(120,63,4)","rgb(127,96,0)","rgb(39,78,19)","rgb(12,52,61)","rgb(28,69,135)","rgb(7,55,99)","rgb(32,18,77)","rgb(76,17,48)"] ]}
);
$("#hideButtons").spectrum({
showButtons:false,change:updateBorders}
);
var isDisabled = true;
$("#toggle-disabled").click(function(){
if (isDisabled){
$("#disabled").spectrum("enable");
}
else{
$("#disabled").spectrum("disable");
}
isDisabled = !isDisabled;
return false;
}
);
$("input:disabled").spectrum({
}
);
$("#disabled").spectrum({
disabled:true}
);
$("#pick1").spectrum({
flat:true,change:function(color){
var hsv = color.toHsv();
var rgb = color.toRgbString();
var hex = color.toHexString();
//console.log("callback",color.toHslString(),color.toHsl().h,color.toHsl().s,color.toHsl().l) $("#docs-content").css({
'background-color':color.toRgbString()}
).toggleClass("dark",hsv.v < .5);
$("#switch-current-rgb").text(rgb);
$("#switch-current-hex").text(hex);
}
,show:function(){
}
,hide:function(){
}
,showInput:true,showPalette:true,palette:['white','#306','#c5c88d','#ac5c5c','#344660']}
);
$("#collapsed").spectrum({
color:"#dd3333",change:updateBorders,show:function(){
}
,hide:function(){
}
}
);
$("#flat").spectrum({
flat:true,showInput:true,move:updateBorders}
);
$("#flatClearable").spectrum({
flat:true,move:updateBorders,change:updateBorders,allowEmpty:true,showInput:true}
);
$("#showInput").spectrum({
color:"#dd33dd",showInput:true,change:updateBorders,show:function(){
}
,hide:function(){
}
}
);
$("#showAlpha").spectrum({
color:"rgba(255,128,0,.5)",showAlpha:true,change:updateBorders}
);
$("#showAlphaWithInput").spectrum({
color:"rgba(255,128,0,.5)",showAlpha:true,showInput:true,showPalette:true,palette:[ ["rgba(255,128,0,.9)","rgba(255,128,0,.5)"],["red","green","blue"],["hsla(25,50,75,.5)","rgba(100,.5,.5,.8)"] ],change:updateBorders}
);
$("#showAlphaWithInputAndEmpty").spectrum({
color:"rgba(255,128,0,.5)",allowEmpty:true,showAlpha:true,showInput:true,showPalette:true,palette:[ ["rgba(255,128,0,.9)","rgba(255,128,0,.5)"],["red","green","blue"],["hsla(25,50,75,.5)","rgba(100,.5,.5,.8)"] ],change:updateBorders}
);
$("#showInputWithClear").spectrum({
allowEmpty:true,color:"",showInput:true,change:updateBorders,show:function(){
}
,hide:function(){
}
}
);
$("#openWithLink").spectrum({
color:"#dd3333",change:updateBorders,show:function(){
}
,hide:function(){
}
}
);
$("#className").spectrum({
className:'awesome'}
);
$("#replacerClassName").spectrum({
replacerClassName:'awesome'}
);
$("#containerClassName").spectrum({
containerClassName:'awesome'}
);
$("#showPalette").spectrum({
showPalette:true,palette:[ ['black','white','blanchedalmond'],['rgb(255,128,0);
','hsv 100 70 50','lightyellow'] ],change:updateBorders}
);
var textPalette = ["rgb(255,255,255)","rgb(204,204,204)","rgb(192,192,192)","rgb(153,153,153)","rgb(102,102,102)","rgb(51,51,51)","rgb(0,0,0)","rgb(255,204,204)","rgb(255,102,102)","rgb(255,0,0)","rgb(204,0,0)","rgb(153,0,0)","rgb(102,0,0)","rgb(51,0,0)","rgb(255,204,153)","rgb(255,153,102)","rgb(255,153,0)","rgb(255,102,0)","rgb(204,102,0)","rgb(153,51,0)","rgb(102,51,0)","rgb(255,255,153)","rgb(255,255,102)","rgb(255,204,102)","rgb(255,204,51)","rgb(204,153,51)","rgb(153,102,51)","rgb(102,51,51)","rgb(255,255,204)","rgb(255,255,51)","rgb(255,255,0)","rgb(255,204,0)","rgb(153,153,0)","rgb(102,102,0)","rgb(51,51,0)","rgb(153,255,153)","rgb(102,255,153)","rgb(51,255,51)","rgb(51,204,0)","rgb(0,153,0)","rgb(0,102,0)","rgb(0,51,0)","rgb(153,255,255)","rgb(51,255,255)","rgb(102,204,204)","rgb(0,204,204)","rgb(51,153,153)","rgb(51,102,102)","rgb(0,51,51)","rgb(204,255,255)","rgb(102,255,255)","rgb(51,204,255)","rgb(51,102,255)","rgb(51,51,255)","rgb(0,0,153)","rgb(0,0,102)","rgb(204,204,255)","rgb(153,153,255)","rgb(102,102,204)","rgb(102,51,255)","rgb(102,0,204)","rgb(51,51,153)","rgb(51,0,153)","rgb(255,204,255)","rgb(255,153,255)","rgb(204,102,204)","rgb(204,51,204)","rgb(153,51,153)","rgb(102,51,102)","rgb(51,0,51)"];
$("#showPaletteOnly").spectrum({
color:'blanchedalmond',showPaletteOnly:true,showPalette:true,palette:[ ['black','white','blanchedalmond','rgb(255,128,0);
','hsv 100 70 50'],['red','yellow','green','blue','violet'] ]}
);
$("#clickoutFiresChange").spectrum({
clickoutFiresChange:true,change:updateBorders}
);
$("#clickoutDoesntFireChange").spectrum({
change:updateBorders}
);
$("#showInitial").spectrum({
showInitial:true}
);
$("#showInputAndInitial").spectrum({
showInitial:true,showInput:true}
);
$("#showInputInitialClear").spectrum({
allowEmpty:true,showInitial:true,showInput:true}
);
$("#changeOnMove").spectrum({
move:function(c){
var label = $("#changeOnMoveLabel");
label.text("Move called:" + c.toHexString());
}
}
);
$("#changeOnMoveNo").spectrum({
showInput:true,change:function(c){
var label = $("#changeOnMoveNoLabel");
label.text("Change called:" + c.toHexString());
}
}
);
function prettyTime(){
var date = new Date();
return date.toLocaleTimeString();
}
$("#eventshow").spectrum({
show:function(c){
var label = $("#eventshowLabel");
label.text("show called at " + prettyTime() + " (color is " + c.toHexString() + ")");
}
}
);
$("#eventhide").spectrum({
hide:function(c){
var label = $("#eventhideLabel");
label.text("hide called at " + prettyTime() + " (color is " + c.toHexString() + ")");
}
}
);
$("#eventdragstart").spectrum({
showAlpha:true}
).on("dragstart.spectrum",function(e,c){
var label = $("#eventdragstartLabel");
label.text("dragstart called at " + prettyTime() + " (color is " + c.toHexString() + ")");
}
);
$("#eventdragstop").spectrum({
showAlpha:true}
).on("dragstop.spectrum",function(e,c){
var label = $("#eventdragstopLabel");
label.text("dragstop called at " + prettyTime() + " (color is " + c.toHexString() + ")");
}
);
$(".basic").spectrum({
change:updateBorders}
);
$(".override").spectrum({
color:"yellow",change:updateBorders}
);
$(".startEmpty").spectrum({
allowEmpty:true,change:updateBorders}
);
$("#beforeShow").spectrum({
beforeShow:function(){
return false;
}
}
);
$("#custom").spectrum({
color:"#f00"}
);
$("#buttonText").spectrum({
allowEmpty:true,chooseText:"Alright",cancelText:"No way"}
);
$("#showSelectionPalette").spectrum({
showPalette:true,showSelectionPalette:true,// true by default palette:[ ]}
);
$("#showSelectionPaletteStorage").spectrum({
showPalette:true,localStorageKey:"spectrum.homepage",// Any picker with the same string will share selection showSelectionPalette:true,palette:[ ]}
);
$("#showSelectionPaletteStorage2").spectrum({
showPalette:true,localStorageKey:"spectrum.homepage",// Any picker with the same string will share selection showSelectionPalette:true,palette:[ ]}
);
$("#preferredHex").spectrum({
preferredFormat:"hex",showInput:true,showPalette:true,palette:[["red","rgba(0,255,0,.5)","rgb(0,0,255)"]]}
);
$("#preferredHex3").spectrum({
preferredFormat:"hex3",showInput:true,showPalette:true,palette:[["red","rgba(0,255,0,.5)","rgb(0,0,255)"]]}
);
$("#preferredHsl").spectrum({
preferredFormat:"hsl",showInput:true,showPalette:true,palette:[["red","rgba(0,255,0,.5)","rgb(0,0,255)"]]}
);
$("#preferredRgb").spectrum({
preferredFormat:"rgb",showInput:true,showPalette:true,palette:[["red","rgba(0,255,0,.5)","rgb(0,0,255)"]]}
);
$("#preferredName").spectrum({
preferredFormat:"name",showInput:true,showPalette:true,palette:[["red","rgba(0,255,0,.5)","rgb(0,0,255)"]]}
);
$("#preferredNone").spectrum({
showInput:true,showPalette:true,palette:[["red","rgba(0,255,0,.5)","rgb(0,0,255)"]]}
);
$("#triggerSet").spectrum({
change:updateBorders}
);
// Show the original input to demonstrate the value changing when calling `set`$("#triggerSet").show();
$("#btnEnterAColor").click(function(){
$("#triggerSet").spectrum("set",$("#enterAColor").val());
}
);
$("#toggle").spectrum();
$("#btn-toggle").click(function(){
$("#toggle").spectrum("toggle");
return false;
}
);
$('#toc').toc({
'selectors':'h2,h3',//elements to use as headings 'container':'#docs',//element to find all selectors in 'smoothScrolling':true,//enable or disable smooth scrolling on click 'prefix':'toc',//prefix for anchor tags and class names 'highlightOnScroll':true,//add class to heading that is currently in focus 'highlightOffset':100,//offset to trigger the next headline 'anchorName':function(i,heading,prefix){
//custom function for anchor name return heading.id || prefix+i;
}
}
);
prettyPrint();
}
);
JS代码(spectrum.js):
// Spectrum Colorpicker v1.3.4// https://github.com/bgrins/spectrum// Author:Brian Grinstead// License:MIT(function (window,$,undefined){
var defaultOpts ={
// Callbacks beforeShow:noop,move:noop,change:noop,show:noop,hide:noop,// Options color:false,flat:false,showInput:false,allowEmpty:false,showButtons:true,clickoutFiresChange:false,showInitial:false,showPalette:false,showPaletteOnly:false,showSelectionPalette:true,localStorageKey:false,appendTo:"body",maxSelectionSize:7,cancelText:"cancel",chooseText:"choose",clearText:"Clear Color Selection",preferredFormat:false,className:"",// Deprecated - use containerClassName and replacerClassName instead. containerClassName:"",replacerClassName:"",showAlpha:false,theme:"sp-light",palette:[["#ffffff","#000000","#ff0000","#ff8000","#ffff00","#008000","#0000ff","#4b0082","#9400d3"]],selectionPalette:[],disabled:false}
,spectrums = [],IE = !!/msie/i.exec( window.navigator.userAgent ),rgbaSupport = (function(){
function contains( str,substr ){
return !!~('' + str).indexOf(substr);
}
var elem = document.createElement('div');
var style = elem.style;
style.cssText = 'background-color:rgba(0,0,0,.5)';
return contains(style.backgroundColor,'rgba') || contains(style.backgroundColor,'hsla');
}
)(),inputTypeColorSupport = (function(){
var colorInput = $("<input type='color' value='!' />")[0];
return colorInput.type === "color" && colorInput.value !== "!";
}
)(),replaceInput = [ "<div class='sp-replacer'>","<div class='sp-preview'><div class='sp-preview-inner'></div></div>","<div class='sp-dd'>▼
</div>","</div>" ].join(''),markup = (function (){
// IE does not support gradients with multiple stops,so we need to simulate // that for the rainbow slider with 8 divs that each have a single gradient var gradientFix = "";
if (IE){
for (var i = 1;
i <= 6;
i++){
gradientFix += "<div class='sp-" + i + "'></div>";
}
}
return [ "<div class='sp-container sp-hidden'>","<div class='sp-palette-container'>","<div class='sp-palette sp-thumb sp-cf'></div>","</div>","<div class='sp-picker-container'>","<div class='sp-top sp-cf'>","<div class='sp-fill'></div>","<div class='sp-top-inner'>","<div class='sp-color'>","<div class='sp-sat'>","<div class='sp-val'>","<div class='sp-dragger'></div>","</div>","</div>","</div>","<div class='sp-clear sp-clear-display'>","</div>","<div class='sp-hue'>","<div class='sp-slider'></div>",gradientFix,"</div>","</div>","<div class='sp-alpha'><div class='sp-alpha-inner'><div class='sp-alpha-handle'></div></div></div>","</div>","<div class='sp-input-container sp-cf'>","<input class='sp-input' type='text' spellcheck='false' />","</div>","<div class='sp-initial sp-thumb sp-cf'></div>","<div class='sp-button-container sp-cf'>","<a class='sp-cancel' href='#'></a>","<button type='button' class='sp-choose'></button>","</div>","</div>","</div>" ].join("");
}
)();
function paletteTemplate (p,color,className,tooltipFormat){
var html = [];
for (var i = 0;
i < p.length;
i++){
var current = p[i];
if(current){
var tiny = tinycolor(current);
var c = tiny.toHsl().l < 0.5 ? "sp-thumb-el sp-thumb-dark":"sp-thumb-el sp-thumb-light";
c += (tinycolor.equals(color,current)) ? " sp-thumb-active":"";
var formattedString = tiny.toString(tooltipFormat || "rgb");
var swatchStyle = rgbaSupport ? ("background-color:" + tiny.toRgbString()):"filter:" + tiny.toFilter();
html.push('<span title="' + formattedString + '" data-color="' + tiny.toRgbString() + '" class="' + c + '"><span class="sp-thumb-inner" style="' + swatchStyle + ';
" /></span>');
}
else{
var cls = 'sp-clear-display';
html.push('<span title="No Color Selected" data-color="" style="background-color:transparent;
" class="' + cls + '"></span>');
}
}
return "<div class='sp-cf " + className + "'>" + html.join('') + "</div>";
}
function hideAll(){
for (var i = 0;
i < spectrums.length;
i++){
if (spectrums[i]){
spectrums[i].hide();
}
}
}
function instanceOptions(o,callbackContext){
var opts = $.extend({
}
,defaultOpts,o);
opts.callbacks ={
'move':bind(opts.move,callbackContext),'change':bind(opts.change,callbackContext),'show':bind(opts.show,callbackContext),'hide':bind(opts.hide,callbackContext),'beforeShow':bind(opts.beforeShow,callbackContext)}
;
return opts;
}
function spectrum(element,o){
var opts = instanceOptions(o,element),flat = opts.flat,showSelectionPalette = opts.showSelectionPalette,localStorageKey = opts.localStorageKey,theme = opts.theme,callbacks = opts.callbacks,resize = throttle(reflow,10),visible = false,dragWidth = 0,dragHeight = 0,dragHelperHeight = 0,slideHeight = 0,slideWidth = 0,alphaWidth = 0,alphaSlideHelperWidth = 0,slideHelperHeight = 0,currentHue = 0,currentSaturation = 0,currentValue = 0,currentAlpha = 1,palette = [],paletteArray = [],paletteLookup ={
}
,selectionPalette = opts.selectionPalette.slice(0),maxSelectionSize = opts.maxSelectionSize,draggingClass = "sp-dragging",shiftMovementDirection = null;
var doc = element.ownerDocument,body = doc.body,boundElement = $(element),disabled = false,container = $(markup,doc).addClass(theme),dragger = container.find(".sp-color"),dragHelper = container.find(".sp-dragger"),slider = container.find(".sp-hue"),slideHelper = container.find(".sp-slider"),alphaSliderInner = container.find(".sp-alpha-inner"),alphaSlider = container.find(".sp-alpha"),alphaSlideHelper = container.find(".sp-alpha-handle"),textInput = container.find(".sp-input"),paletteContainer = container.find(".sp-palette"),initialColorContainer = container.find(".sp-initial"),cancelButton = container.find(".sp-cancel"),clearButton = container.find(".sp-clear"),chooseButton = container.find(".sp-choose"),isInput = boundElement.is("input"),isInputTypeColor = isInput && inputTypeColorSupport && boundElement.attr("type") === "color",shouldReplace = isInput && !flat,replacer = (shouldReplace) ? $(replaceInput).addClass(theme).addClass(opts.className).addClass(opts.replacerClassName):$([]),offsetElement = (shouldReplace) ? replacer:boundElement,previewElement = replacer.find(".sp-preview-inner"),initialColor = opts.color || (isInput && boundElement.val()),colorOnShow = false,preferredFormat = opts.preferredFormat,currentPreferredFormat = preferredFormat,clickoutFiresChange = !opts.showButtons || opts.clickoutFiresChange,isEmpty = !initialColor,allowEmpty = opts.allowEmpty && !isInputTypeColor;
function applyOptions(){
if (opts.showPaletteOnly){
opts.showPalette = true;
}
if (opts.palette){
palette = opts.palette.slice(0);
paletteArray = $.isArray(palette[0]) ? palette:[palette];
paletteLookup ={
}
;
for (var i = 0;
i < paletteArray.length;
i++){
for (var j = 0;
j < paletteArray[i].length;
j++){
var rgb = tinycolor(paletteArray[i][j]).toRgbString();
paletteLookup[rgb] = true;
}
}
}
container.toggleClass("sp-flat",flat);
container.toggleClass("sp-input-disabled",!opts.showInput);
container.toggleClass("sp-alpha-enabled",opts.showAlpha);
container.toggleClass("sp-clear-enabled",allowEmpty);
container.toggleClass("sp-buttons-disabled",!opts.showButtons);
container.toggleClass("sp-palette-disabled",!opts.showPalette);
container.toggleClass("sp-palette-only",opts.showPaletteOnly);
container.toggleClass("sp-initial-disabled",!opts.showInitial);
container.addClass(opts.className).addClass(opts.containerClassName);
reflow();
}
function initialize(){
if (IE){
container.find("*:not(input)").attr("unselectable","on");
}
applyOptions();
if (shouldReplace){
boundElement.after(replacer).hide();
}
if (!allowEmpty){
clearButton.hide();
}
if (flat){
boundElement.after(container).hide();
}
else{
var appendTo = opts.appendTo === "parent" ? boundElement.parent():$(opts.appendTo);
if (appendTo.length !== 1){
appendTo = $("body");
}
appendTo.append(container);
}
updateSelectionPaletteFromStorage();
offsetElement.bind("click.spectrum touchstart.spectrum",function (e){
if (!disabled){
toggle();
}
e.stopPropagation();
if (!$(e.target).is("input")){
e.preventDefault();
}
}
);
if(boundElement.is(":disabled") || (opts.disabled === true)){
disable();
}
// Prevent clicks from bubbling up to document. This would cause it to be hidden. container.click(stopPropagation);
// Handle user typed input textInput.change(setFromTextInput);
textInput.bind("paste",function (){
setTimeout(setFromTextInput,1);
}
);
textInput.keydown(function (e){
if (e.keyCode == 13){
setFromTextInput();
}
}
);
cancelButton.text(opts.cancelText);
cancelButton.bind("click.spectrum",function (e){
e.stopPropagation();
e.preventDefault();
hide("cancel");
}
);
clearButton.attr("title",opts.clearText);
clearButton.bind("click.spectrum",function (e){
e.stopPropagation();
e.preventDefault();
isEmpty = true;
move();
if(flat){
//for the flat style,this is a change event updateOriginalInput(true);
}
}
);
chooseButton.text(opts.chooseText);
chooseButton.bind("click.spectrum",function (e){
e.stopPropagation();
e.preventDefault();
if (isValid()){
updateOriginalInput(true);
hide();
}
}
);
draggable(alphaSlider,function (dragX,dragY,e){
currentAlpha = (dragX / alphaWidth);
isEmpty = false;
if (e.shiftKey){
currentAlpha = Math.round(currentAlpha * 10) / 10;
}
move();
}
,dragStart,dragStop);
draggable(slider,function (dragX,dragY){
currentHue = parseFloat(dragY / slideHeight);
isEmpty = false;
if (!opts.showAlpha){
currentAlpha = 1;
}
move();
}
,dragStart,dragStop);
draggable(dragger,function (dragX,dragY,e){
// shift+drag should snap the movement to either the x or y axis. if (!e.shiftKey){
shiftMovementDirection = null;
}
else if (!shiftMovementDirection){
var oldDragX = currentSaturation * dragWidth;
var oldDragY = dragHeight - (currentValue * dragHeight);
var furtherFromX = Math.abs(dragX - oldDragX) > Math.abs(dragY - oldDragY);
shiftMovementDirection = furtherFromX ? "x":"y";
}
var setSaturation = !shiftMovementDirection || shiftMovementDirection === "x";
var setValue = !shiftMovementDirection || shiftMovementDirection === "y";
if (setSaturation){
currentSaturation = parseFloat(dragX / dragWidth);
}
if (setValue){
currentValue = parseFloat((dragHeight - dragY) / dragHeight);
}
isEmpty = false;
if (!opts.showAlpha){
currentAlpha = 1;
}
move();
}
,dragStart,dragStop);
if (!!initialColor){
set(initialColor);
// In case color was black - update the preview UI and set the format // since the set function will not run (default color is black). updateUI();
currentPreferredFormat = preferredFormat || tinycolor(initialColor).format;
addColorToSelectionPalette(initialColor);
}
else{
updateUI();
}
if (flat){
show();
}
function palletElementClick(e){
if (e.data && e.data.ignore){
set($(this).data("color"));
move();
}
else{
set($(this).data("color"));
move();
updateOriginalInput(true);
hide();
}
return false;
}
var paletteEvent = IE ? "mousedown.spectrum":"click.spectrum touchstart.spectrum";
paletteContainer.delegate(".sp-thumb-el",paletteEvent,palletElementClick);
initialColorContainer.delegate(".sp-thumb-el:nth-child(1)",paletteEvent,{
ignore:true}
,palletElementClick);
}
function updateSelectionPaletteFromStorage(){
if (localStorageKey && window.localStorage){
// Migrate old palettes over to new format. May want to remove this eventually. try{
var oldPalette = window.localStorage[localStorageKey].split(",#");
if (oldPalette.length > 1){
delete window.localStorage[localStorageKey];
$.each(oldPalette,function(i,c){
addColorToSelectionPalette(c);
}
);
}
}
catch(e){
}
try{
selectionPalette = window.localStorage[localStorageKey].split(";
");
}
catch (e){
}
}
}
function addColorToSelectionPalette(color){
if (showSelectionPalette){
var rgb = tinycolor(color).toRgbString();
if (!paletteLookup[rgb] && $.inArray(rgb,selectionPalette) === -1){
selectionPalette.push(rgb);
while(selectionPalette.length > maxSelectionSize){
selectionPalette.shift();
}
}
if (localStorageKey && window.localStorage){
try{
window.localStorage[localStorageKey] = selectionPalette.join(";
");
}
catch(e){
}
}
}
}
function getUniqueSelectionPalette(){
var unique = [];
if (opts.showPalette){
for (i = 0;
i < selectionPalette.length;
i++){
var rgb = tinycolor(selectionPalette[i]).toRgbString();
if (!paletteLookup[rgb]){
unique.push(selectionPalette[i]);
}
}
}
return unique.reverse().slice(0,opts.maxSelectionSize);
}
function drawPalette(){
var currentColor = get();
var html = $.map(paletteArray,function (palette,i){
return paletteTemplate(palette,currentColor,"sp-palette-row sp-palette-row-" + i,opts.preferredFormat);
}
);
updateSelectionPaletteFromStorage();
if (selectionPalette){
html.push(paletteTemplate(getUniqueSelectionPalette(),currentColor,"sp-palette-row sp-palette-row-selection",opts.preferredFormat));
}
paletteContainer.html(html.join(""));
}
function drawInitial(){
if (opts.showInitial){
var initial = colorOnShow;
var current = get();
initialColorContainer.html(paletteTemplate([initial,current],current,"sp-palette-row-initial",opts.preferredFormat));
}
}
function dragStart(){
if (dragHeight <= 0 || dragWidth <= 0 || slideHeight <= 0){
reflow();
}
container.addClass(draggingClass);
shiftMovementDirection = null;
boundElement.trigger('dragstart.spectrum',[ get() ]);
}
function dragStop(){
container.removeClass(draggingClass);
boundElement.trigger('dragstop.spectrum',[ get() ]);
}
function setFromTextInput(){
var value = textInput.val();
if ((value === null || value === "") && allowEmpty){
set(null);
updateOriginalInput(true);
}
else{
var tiny = tinycolor(value);
if (tiny.ok){
set(tiny);
updateOriginalInput(true);
}
else{
textInput.addClass("sp-validation-error");
}
}
}
function toggle(){
if (visible){
hide();
}
else{
show();
}
}
function show(){
var event = $.Event('beforeShow.spectrum');
if (visible){
reflow();
return;
}
boundElement.trigger(event,[ get() ]);
if (callbacks.beforeShow(get()) === false || event.isDefaultPrevented()){
return;
}
hideAll();
visible = true;
$(doc).bind("click.spectrum",hide);
$(window).bind("resize.spectrum",resize);
replacer.addClass("sp-active");
container.removeClass("sp-hidden");
reflow();
updateUI();
colorOnShow = get();
drawInitial();
callbacks.show(colorOnShow);
boundElement.trigger('show.spectrum',[ colorOnShow ]);
}
function hide(e){
// Return on right click if (e && e.type == "click" && e.button == 2){
return;
}
// Return if hiding is unnecessary if (!visible || flat){
return;
}
visible = false;
$(doc).unbind("click.spectrum",hide);
$(window).unbind("resize.spectrum",resize);
replacer.removeClass("sp-active");
container.addClass("sp-hidden");
var colorHasChanged = !tinycolor.equals(get(),colorOnShow);
if (colorHasChanged){
if (clickoutFiresChange && e !== "cancel"){
updateOriginalInput(true);
}
else{
revert();
}
}
callbacks.hide(get());
boundElement.trigger('hide.spectrum',[ get() ]);
}
function revert(){
set(colorOnShow,true);
}
function set(color,ignoreFormatChange){
if (tinycolor.equals(color,get())){
// Update UI just in case a validation error needs // to be cleared. updateUI();
return;
}
var newColor,newHsv;
if (!color && allowEmpty){
isEmpty = true;
}
else{
isEmpty = false;
newColor = tinycolor(color);
newHsv = newColor.toHsv();
currentHue = (newHsv.h % 360) / 360;
currentSaturation = newHsv.s;
currentValue = newHsv.v;
currentAlpha = newHsv.a;
}
updateUI();
if (newColor && newColor.ok && !ignoreFormatChange){
currentPreferredFormat = preferredFormat || newColor.format;
}
}
function get(opts){
opts = opts ||{
}
;
if (allowEmpty && isEmpty){
return null;
}
return tinycolor.fromRatio({
h:currentHue,s:currentSaturation,v:currentValue,a:Math.round(currentAlpha * 100) / 100}
,{
format:opts.format || currentPreferredFormat}
);
}
function isValid(){
return !textInput.hasClass("sp-validation-error");
}
function move(){
updateUI();
callbacks.move(get());
boundElement.trigger('move.spectrum',[ get() ]);
}
function updateUI(){
textInput.removeClass("sp-validation-error");
updateHelperLocations();
// Update dragger background color (gradients take care of saturation and value). var flatColor = tinycolor.fromRatio({
h:currentHue,s:1,v:1}
);
dragger.css("background-color",flatColor.toHexString());
// Get a format that alpha will be included in (hex and names ignore alpha) var format = currentPreferredFormat;
if (currentAlpha < 1 && !(currentAlpha === 0 && format === "name")){
if (format === "hex" || format === "hex3" || format === "hex6" || format === "name"){
format = "rgb";
}
}
var realColor = get({
format:format}
),displayColor = '';
//reset background info for preview element previewElement.removeClass("sp-clear-display");
previewElement.css('background-color','transparent');
if (!realColor && allowEmpty){
// Update the replaced elements background with icon indicating no color selection previewElement.addClass("sp-clear-display");
}
else{
var realHex = realColor.toHexString(),realRgb = realColor.toRgbString();
// Update the replaced elements background color (with actual selected color) if (rgbaSupport || realColor.alpha === 1){
previewElement.css("background-color",realRgb);
}
else{
previewElement.css("background-color","transparent");
previewElement.css("filter",realColor.toFilter());
}
if (opts.showAlpha){
var rgb = realColor.toRgb();
rgb.a = 0;
var realAlpha = tinycolor(rgb).toRgbString();
var gradient = "linear-gradient(left," + realAlpha + "," + realHex + ")";
if (IE){
alphaSliderInner.css("filter",tinycolor(realAlpha).toFilter({
gradientType:1}
,realHex));
}
else{
alphaSliderInner.css("background","-webkit-" + gradient);
alphaSliderInner.css("background","-moz-" + gradient);
alphaSliderInner.css("background","-ms-" + gradient);
// Use current syntax gradient on unprefixed property. alphaSliderInner.css("background","linear-gradient(to right," + realAlpha + "," + realHex + ")");
}
}
displayColor = realColor.toString(format);
}
// Update the text entry input as it changes happen if (opts.showInput){
textInput.val(displayColor);
}
if (opts.showPalette){
drawPalette();
}
drawInitial();
}
function updateHelperLocations(){
var s = currentSaturation;
var v = currentValue;
if(allowEmpty && isEmpty){
//if selected color is empty,hide the helpers alphaSlideHelper.hide();
slideHelper.hide();
dragHelper.hide();
}
else{
//make sure helpers are visible alphaSlideHelper.show();
slideHelper.show();
dragHelper.show();
// Where to show the little circle in that displays your current selected color var dragX = s * dragWidth;
var dragY = dragHeight - (v * dragHeight);
dragX = Math.max( -dragHelperHeight,Math.min(dragWidth - dragHelperHeight,dragX - dragHelperHeight) );
dragY = Math.max( -dragHelperHeight,Math.min(dragHeight - dragHelperHeight,dragY - dragHelperHeight) );
dragHelper.css({
"top":dragY + "px","left":dragX + "px"}
);
var alphaX = currentAlpha * alphaWidth;
alphaSlideHelper.css({
"left":(alphaX - (alphaSlideHelperWidth / 2)) + "px"}
);
// Where to show the bar that displays your current selected hue var slideY = (currentHue) * slideHeight;
slideHelper.css({
"top":(slideY - slideHelperHeight) + "px"}
);
}
}
function updateOriginalInput(fireCallback){
var color = get(),displayColor = '',hasChanged = !tinycolor.equals(color,colorOnShow);
if (color){
displayColor = color.toString(currentPreferredFormat);
// Update the selection palette with the current color addColorToSelectionPalette(color);
}
if (isInput){
boundElement.val(displayColor);
}
colorOnShow = color;
if (fireCallback && hasChanged){
callbacks.change(color);
boundElement.trigger('change',[ color ]);
}
}
function reflow(){
dragWidth = dragger.width();
dragHeight = dragger.height();
dragHelperHeight = dragHelper.height();
slideWidth = slider.width();
slideHeight = slider.height();
slideHelperHeight = slideHelper.height();
alphaWidth = alphaSlider.width();
alphaSlideHelperWidth = alphaSlideHelper.width();
if (!flat){
container.css("position","absolute");
container.offset(getOffset(container,offsetElement));
}
updateHelperLocations();
if (opts.showPalette){
drawPalette();
}
boundElement.trigger('reflow.spectrum');
}
function destroy(){
boundElement.show();
offsetElement.unbind("click.spectrum touchstart.spectrum");
container.remove();
replacer.remove();
spectrums[spect.id] = null;
}
function option(optionName,optionValue){
if (optionName === undefined){
return $.extend({
}
,opts);
}
if (optionValue === undefined){
return opts[optionName];
}
opts[optionName] = optionValue;
applyOptions();
}
function enable(){
disabled = false;
boundElement.attr("disabled",false);
offsetElement.removeClass("sp-disabled");
}
function disable(){
hide();
disabled = true;
boundElement.attr("disabled",true);
offsetElement.addClass("sp-disabled");
}
initialize();
var spect ={
show:show,hide:hide,toggle:toggle,reflow:reflow,option:option,enable:enable,disable:disable,set:function (c){
set(c);
updateOriginalInput();
}
,get:get,destroy:destroy,container:container}
;
spect.id = spectrums.push(spect) - 1;
return spect;
}
/** * checkOffset - get the offset below/above and left/right element depending on screen position * Thanks https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.datepicker.js */
function getOffset(picker,input){
var extraY = 0;
var dpWidth = picker.outerWidth();
var dpHeight = picker.outerHeight();
var inputHeight = input.outerHeight();
var doc = picker[0].ownerDocument;
var docElem = doc.documentElement;
var viewWidth = docElem.clientWidth + $(doc).scrollLeft();
var viewHeight = docElem.clientHeight + $(doc).scrollTop();
var offset = input.offset();
offset.top += inputHeight;
offset.left -= Math.min(offset.left,(offset.left + dpWidth > viewWidth && viewWidth > dpWidth) ? Math.abs(offset.left + dpWidth - viewWidth):0);
offset.top -= Math.min(offset.top,((offset.top + dpHeight > viewHeight && viewHeight > dpHeight) ? Math.abs(dpHeight + inputHeight - extraY):extraY));
return offset;
}
/** * noop - do nothing */
function noop(){
}
/** * stopPropagation - makes the code only doing this a little easier to read in line */
function stopPropagation(e){
e.stopPropagation();
}
/** * Create a function bound to a given object * Thanks to underscore.js */
function bind(func,obj){
var slice = Array.prototype.slice;
var args = slice.call(arguments,2);
return function (){
return func.apply(obj,args.concat(slice.call(arguments)));
}
;
}
/** * Lightweight drag helper. Handles containment within the element,so that * when dragging,the x is within [0,element.width] and y is within [0,element.height] */
function draggable(element,onmove,onstart,onstop){
onmove = onmove || function (){
}
;
onstart = onstart || function (){
}
;
onstop = onstop || function (){
}
;
var doc = element.ownerDocument || document;
var dragging = false;
var offset ={
}
;
var maxHeight = 0;
var maxWidth = 0;
var hasTouch = ('ontouchstart' in window);
var duringDragEvents ={
}
;
duringDragEvents["selectstart"] = prevent;
duringDragEvents["dragstart"] = prevent;
duringDragEvents["touchmove mousemove"] = move;
duringDragEvents["touchend mouseup"] = stop;
function prevent(e){
if (e.stopPropagation){
e.stopPropagation();
}
if (e.preventDefault){
e.preventDefault();
}
e.returnValue = false;
}
function move(e){
if (dragging){
// Mouseup happened outside of window if (IE && document.documentMode < 9 && !e.button){
return stop();
}
var touches = e.originalEvent.touches;
var pageX = touches ? touches[0].pageX:e.pageX;
var pageY = touches ? touches[0].pageY:e.pageY;
var dragX = Math.max(0,Math.min(pageX - offset.left,maxWidth));
var dragY = Math.max(0,Math.min(pageY - offset.top,maxHeight));
if (hasTouch){
// Stop scrolling in iOS prevent(e);
}
onmove.apply(element,[dragX,dragY,e]);
}
}
function start(e){
var rightclick = (e.which) ? (e.which == 3):(e.button == 2);
var touches = e.originalEvent.touches;
if (!rightclick && !dragging){
if (onstart.apply(element,arguments) !== false){
dragging = true;
maxHeight = $(element).height();
maxWidth = $(element).width();
offset = $(element).offset();
$(doc).bind(duringDragEvents);
$(doc.body).addClass("sp-dragging");
if (!hasTouch){
move(e);
}
prevent(e);
}
}
}
function stop(){
if (dragging){
$(doc).unbind(duringDragEvents);
$(doc.body).removeClass("sp-dragging");
onstop.apply(element,arguments);
}
dragging = false;
}
$(element).bind("touchstart mousedown",start);
}
function throttle(func,wait,debounce){
var timeout;
return function (){
var context = this,args = arguments;
var throttler = function (){
timeout = null;
func.apply(context,args);
}
;
if (debounce) clearTimeout(timeout);
if (debounce || !timeout) timeout = setTimeout(throttler,wait);
}
;
}
function log(){
/* jshint -W021 */
if(window.console){
if(Function.prototype.bind)log=Function.prototype.bind.call(console.log,console);
else log=function(){
Function.prototype.apply.call(console.log,console,arguments);
}
;
log.apply(this,arguments);
}
}
/** * Define a jQuery plugin */
var dataID = "spectrum.id";
$.fn.spectrum = function (opts,extra){
if (typeof opts == "string"){
var returnValue = this;
var args = Array.prototype.slice.call( arguments,1 );
this.each(function (){
var spect = spectrums[$(this).data(dataID)];
if (spect){
var method = spect[opts];
if (!method){
throw new Error( "Spectrum:no such method:'" + opts + "'" );
}
if (opts == "get"){
returnValue = spect.get();
}
else if (opts == "container"){
returnValue = spect.container;
}
else if (opts == "option"){
returnValue = spect.option.apply(spect,args);
}
else if (opts == "destroy"){
spect.destroy();
$(this).removeData(dataID);
}
else{
method.apply(spect,args);
}
}
}
);
return returnValue;
}
// Initializing a new instance of spectrum return this.spectrum("destroy").each(function (){
var options = $.extend({
}
,opts,$(this).data());
var spect = spectrum(this,options);
$(this).data(dataID,spect.id);
}
);
}
;
$.fn.spectrum.load = true;
$.fn.spectrum.loadOpts ={
}
;
$.fn.spectrum.draggable = draggable;
$.fn.spectrum.defaults = defaultOpts;
$.spectrum ={
}
;
$.spectrum.localization ={
}
;
$.spectrum.palettes ={
}
;
$.fn.spectrum.processNativeColorInputs = function (){
if (!inputTypeColorSupport){
$("input[type=color]").spectrum({
preferredFormat:"hex6"}
);
}
}
;
// TinyColor v0.9.17 // https://github.com/bgrins/TinyColor // 2013-08-10,Brian Grinstead,MIT License (function(){
var trimLeft = /^[\s,#]+/,trimRight = /\s+$/,tinyCounter = 0,math = Math,mathRound = math.round,mathMin = math.min,mathMax = math.max,mathRandom = math.random;
function tinycolor (color,opts){
color = (color) ? color:'';
opts = opts ||{
}
;
// If input is already a tinycolor,return itself if (typeof color == "object" && color.hasOwnProperty("_tc_id")){
return color;
}
var rgb = inputToRGB(color);
var r = rgb.r,g = rgb.g,b = rgb.b,a = rgb.a,roundA = mathRound(100*a) / 100,format = opts.format || rgb.format;
// Don't let the range of [0,255] come back in [0,1]. // Potentially lose a little bit of precision here,but will fix issues where // .5 gets interpreted as half of the total,instead of half of 1 // If it was supposed to be 128,this was already taken care of by `inputToRgb` if (r < 1){
r = mathRound(r);
}
if (g < 1){
g = mathRound(g);
}
if (b < 1){
b = mathRound(b);
}
return{
ok:rgb.ok,format:format,_tc_id:tinyCounter++,alpha:a,getAlpha:function(){
return a;
}
,setAlpha:function(value){
a = boundAlpha(value);
roundA = mathRound(100*a) / 100;
}
,toHsv:function(){
var hsv = rgbToHsv(r,g,b);
return{
h:hsv.h * 360,s:hsv.s,v:hsv.v,a:a}
;
}
,toHsvString:function(){
var hsv = rgbToHsv(r,g,b);
var h = mathRound(hsv.h * 360),s = mathRound(hsv.s * 100),v = mathRound(hsv.v * 100);
return (a == 1) ? "hsv(" + h + "," + s + "%," + v + "%)":"hsva(" + h + "," + s + "%," + v + "%,"+ roundA + ")";
}
,toHsl:function(){
var hsl = rgbToHsl(r,g,b);
return{
h:hsl.h * 360,s:hsl.s,l:hsl.l,a:a}
;
}
,toHslString:function(){
var hsl = rgbToHsl(r,g,b);
var h = mathRound(hsl.h * 360),s = mathRound(hsl.s * 100),l = mathRound(hsl.l * 100);
return (a == 1) ? "hsl(" + h + "," + s + "%," + l + "%)":"hsla(" + h + "," + s + "%," + l + "%,"+ roundA + ")";
}
,toHex:function(allow3Char){
return rgbToHex(r,g,b,allow3Char);
}
,toHexString:function(allow3Char){
return '#' + this.toHex(allow3Char);
}
,toHex8:function(){
return rgbaToHex(r,g,b,a);
}
,toHex8String:function(){
return '#' + this.toHex8();
}
,toRgb:function(){
return{
r:mathRound(r),g:mathRound(g),b:mathRound(b),a:a}
;
}
,toRgbString:function(){
return (a == 1) ? "rgb(" + mathRound(r) + "," + mathRound(g) + "," + mathRound(b) + ")":"rgba(" + mathRound(r) + "," + mathRound(g) + "," + mathRound(b) + "," + roundA + ")";
}
,toPercentageRgb:function(){
return{
r:mathRound(bound01(r,255) * 100) + "%",g:mathRound(bound01(g,255) * 100) + "%",b:mathRound(bound01(b,255) * 100) + "%",a:a}
;
}
,toPercentageRgbString:function(){
return (a == 1) ? "rgb(" + mathRound(bound01(r,255) * 100) + "%," + mathRound(bound01(g,255) * 100) + "%," + mathRound(bound01(b,255) * 100) + "%)":"rgba(" + mathRound(bound01(r,255) * 100) + "%," + mathRound(bound01(g,255) * 100) + "%," + mathRound(bound01(b,255) * 100) + "%," + roundA + ")";
}
,toName:function(){
if (a === 0){
return "transparent";
}
return hexNames[rgbToHex(r,g,b,true)] || false;
}
,toFilter:function(secondColor){
var hex8String = '#' + rgbaToHex(r,g,b,a);
var secondHex8String = hex8String;
var gradientType = opts && opts.gradientType ? "GradientType = 1,":"";
if (secondColor){
var s = tinycolor(secondColor);
secondHex8String = s.toHex8String();
}
return "progid:DXImageTransform.Microsoft.gradient("+gradientType+"startColorstr="+hex8String+",endColorstr="+secondHex8String+")";
}
,toString:function(format){
var formatSet = !!format;
format = format || this.format;
var formattedString = false;
var hasAlphaAndFormatNotSet = !formatSet && a < 1 && a > 0;
var formatWithAlpha = hasAlphaAndFormatNotSet && (format === "hex" || format === "hex6" || format === "hex3" || format === "name");
if (format === "rgb"){
formattedString = this.toRgbString();
}
if (format === "prgb"){
formattedString = this.toPercentageRgbString();
}
if (format === "hex" || format === "hex6"){
formattedString = this.toHexString();
}
if (format === "hex3"){
formattedString = this.toHexString(true);
}
if (format === "hex8"){
formattedString = this.toHex8String();
}
if (format === "name"){
formattedString = this.toName();
}
if (format === "hsl"){
formattedString = this.toHslString();
}
if (format === "hsv"){
formattedString = this.toHsvString();
}
if (formatWithAlpha){
return this.toRgbString();
}
return formattedString || this.toHexString();
}
}
;
}
// If input is an object,force 1 into "1.0" to handle ratios properly // String input requires "1.0" as input,so 1 will be treated as 1 tinycolor.fromRatio = function(color,opts){
if (typeof color == "object"){
var newColor ={
}
;
for (var i in color){
if (color.hasOwnProperty(i)){
if (i === "a"){
newColor[i] = color[i];
}
else{
newColor[i] = convertToPercentage(color[i]);
}
}
}
color = newColor;
}
return tinycolor(color,opts);
}
;
// Given a string or object,convert that input to RGB // Possible string inputs:// // "red" // "#f00" or "f00" // "#ff0000" or "ff0000" // "#ff000000" or "ff000000" // "rgb 255 0 0" or "rgb (255,0,0)" // "rgb 1.0 0 0" or "rgb (1,0,0)" // "rgba (255,0,0,1)" or "rgba 255,0,0,1" // "rgba (1.0,0,0,1)" or "rgba 1.0,0,0,1" // "hsl(0,100%,50%)" or "hsl 0 100% 50%" // "hsla(0,100%,50%,1)" or "hsla 0 100% 50%,1" // "hsv(0,100%,100%)" or "hsv 0 100% 100%" // function inputToRGB(color){
var rgb ={
r:0,g:0,b:0}
;
var a = 1;
var ok = false;
var format = false;
if (typeof color == "string"){
color = stringInputToObject(color);
}
if (typeof color == "object"){
if (color.hasOwnProperty("r") && color.hasOwnProperty("g") && color.hasOwnProperty("b")){
rgb = rgbToRgb(color.r,color.g,color.b);
ok = true;
format = String(color.r).substr(-1) === "%" ? "prgb":"rgb";
}
else if (color.hasOwnProperty("h") && color.hasOwnProperty("s") && color.hasOwnProperty("v")){
color.s = convertToPercentage(color.s);
color.v = convertToPercentage(color.v);
rgb = hsvToRgb(color.h,color.s,color.v);
ok = true;
format = "hsv";
}
else if (color.hasOwnProperty("h") && color.hasOwnProperty("s") && color.hasOwnProperty("l")){
color.s = convertToPercentage(color.s);
color.l = convertToPercentage(color.l);
rgb = hslToRgb(color.h,color.s,color.l);
ok = true;
format = "hsl";
}
if (color.hasOwnProperty("a")){
a = color.a;
}
}
a = boundAlpha(a);
return{
ok:ok,format:color.format || format,r:mathMin(255,mathMax(rgb.r,0)),g:mathMin(255,mathMax(rgb.g,0)),b:mathMin(255,mathMax(rgb.b,0)),a:a}
;
}
// Conversion Functions // -------------------- // `rgbToHsl`,`rgbToHsv`,`hslToRgb`,`hsvToRgb` modified from:// <http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript> // `rgbToRgb` // Handle bounds / percentage checking to conform to CSS color spec // <http://www.w3.org/TR/css3-color/> // *Assumes:* r,g,b in [0,255] or [0,1] // *Returns:*{
r,g,b}
in [0,255] function rgbToRgb(r,g,b){
return{
r:bound01(r,255) * 255,g:bound01(g,255) * 255,b:bound01(b,255) * 255}
;
}
// `rgbToHsl` // Converts an RGB color value to HSL. // *Assumes:* r,g,and b are contained in [0,255] or [0,1] // *Returns:*{
h,s,l}
in [0,1] function rgbToHsl(r,g,b){
r = bound01(r,255);
g = bound01(g,255);
b = bound01(b,255);
var max = mathMax(r,g,b),min = mathMin(r,g,b);
var h,s,l = (max + min) / 2;
if(max == min){
h = s = 0;
// achromatic}
else{
var d = max - min;
s = l > 0.5 ? d / (2 - max - min):d / (max + min);
switch(max){
case r:h = (g - b) / d + (g < b ? 6:0);
break;
case g:h = (b - r) / d + 2;
break;
case b:h = (r - g) / d + 4;
break;
}
h /= 6;
}
return{
h:h,s:s,l:l}
;
}
// `hslToRgb` // Converts an HSL color value to RGB. // *Assumes:* h is contained in [0,1] or [0,360] and s and l are contained [0,1] or [0,100] // *Returns:*{
r,g,b}
in the set [0,255] function hslToRgb(h,s,l){
var r,g,b;
h = bound01(h,360);
s = bound01(s,100);
l = bound01(l,100);
function hue2rgb(p,q,t){
if(t < 0) t += 1;
if(t > 1) t -= 1;
if(t < 1/6) return p + (q - p) * 6 * t;
if(t < 1/2) return q;
if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
return p;
}
if(s === 0){
r = g = b = l;
// achromatic}
else{
var q = l < 0.5 ? l * (1 + s):l + s - l * s;
var p = 2 * l - q;
r = hue2rgb(p,q,h + 1/3);
g = hue2rgb(p,q,h);
b = hue2rgb(p,q,h - 1/3);
}
return{
r:r * 255,g:g * 255,b:b * 255}
;
}
// `rgbToHsv` // Converts an RGB color value to HSV // *Assumes:* r,g,and b are contained in the set [0,255] or [0,1] // *Returns:*{
h,s,v}
in [0,1] function rgbToHsv(r,g,b){
r = bound01(r,255);
g = bound01(g,255);
b = bound01(b,255);
var max = mathMax(r,g,b),min = mathMin(r,g,b);
var h,s,v = max;
var d = max - min;
s = max === 0 ? 0:d / max;
if(max == min){
h = 0;
// achromatic}
else{
switch(max){
case r:h = (g - b) / d + (g < b ? 6:0);
break;
case g:h = (b - r) / d + 2;
break;
case b:h = (r - g) / d + 4;
break;
}
h /= 6;
}
return{
h:h,s:s,v:v}
;
}
// `hsvToRgb` // Converts an HSV color value to RGB. // *Assumes:* h is contained in [0,1] or [0,360] and s and v are contained in [0,1] or [0,100] // *Returns:*{
r,g,b}
in the set [0,255] function hsvToRgb(h,s,v){
h = bound01(h,360) * 6;
s = bound01(s,100);
v = bound01(v,100);
var i = math.floor(h),f = h - i,p = v * (1 - s),q = v * (1 - f * s),t = v * (1 - (1 - f) * s),mod = i % 6,r = [v,q,p,p,t,v][mod],g = [t,v,v,q,p,p][mod],b = [p,p,t,v,v,q][mod];
return{
r:r * 255,g:g * 255,b:b * 255}
;
}
// `rgbToHex` // Converts an RGB color to hex // Assumes r,g,and b are contained in the set [0,255] // Returns a 3 or 6 character hex function rgbToHex(r,g,b,allow3Char){
var hex = [ pad2(mathRound(r).toString(16)),pad2(mathRound(g).toString(16)),pad2(mathRound(b).toString(16)) ];
// Return a 3 character hex if possible if (allow3Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1)){
return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);
}
return hex.join("");
}
// `rgbaToHex` // Converts an RGBA color plus alpha transparency to hex // Assumes r,g,b and a are contained in the set [0,255] // Returns an 8 character hex function rgbaToHex(r,g,b,a){
var hex = [ pad2(convertDecimalToHex(a)),pad2(mathRound(r).toString(16)),pad2(mathRound(g).toString(16)),pad2(mathRound(b).toString(16)) ];
return hex.join("");
}
// `equals` // Can be called with any tinycolor input tinycolor.equals = function (color1,color2){
if (!color1 || !color2){
return false;
}
return tinycolor(color1).toRgbString() == tinycolor(color2).toRgbString();
}
;
tinycolor.random = function(){
return tinycolor.fromRatio({
r:mathRandom(),g:mathRandom(),b:mathRandom()}
);
}
;
// Modification Functions // ---------------------- // Thanks to less.js for some of the basics here // <https://github.com/cloudhead/less.js/blob/master/lib/less/functions.js> tinycolor.desaturate = function (color,amount){
amount = (amount === 0) ? 0:(amount || 10);
var hsl = tinycolor(color).toHsl();
hsl.s -= amount / 100;
hsl.s = clamp01(hsl.s);
return tinycolor(hsl);
}
;
tinycolor.saturate = function (color,amount){
amount = (amount === 0) ? 0:(amount || 10);
var hsl = tinycolor(color).toHsl();
hsl.s += amount / 100;
hsl.s = clamp01(hsl.s);
return tinycolor(hsl);
}
;
tinycolor.greyscale = function(color){
return tinycolor.desaturate(color,100);
}
;
tinycolor.lighten = function(color,amount){
amount = (amount === 0) ? 0:(amount || 10);
var hsl = tinycolor(color).toHsl();
hsl.l += amount / 100;
hsl.l = clamp01(hsl.l);
return tinycolor(hsl);
}
;
tinycolor.darken = function (color,amount){
amount = (amount === 0) ? 0:(amount || 10);
var hsl = tinycolor(color).toHsl();
hsl.l -= amount / 100;
hsl.l = clamp01(hsl.l);
return tinycolor(hsl);
}
;
tinycolor.complement = function(color){
var hsl = tinycolor(color).toHsl();
hsl.h = (hsl.h + 180) % 360;
return tinycolor(hsl);
}
;
// Combination Functions // --------------------- // Thanks to jQuery xColor for some of the ideas behind these // <https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js> tinycolor.triad = function(color){
var hsl = tinycolor(color).toHsl();
var h = hsl.h;
return [ tinycolor(color),tinycolor({
h:(h + 120) % 360,s:hsl.s,l:hsl.l}
),tinycolor({
h:(h + 240) % 360,s:hsl.s,l:hsl.l}
) ];
}
;
tinycolor.tetrad = function(color){
var hsl = tinycolor(color).toHsl();
var h = hsl.h;
return [ tinycolor(color),tinycolor({
h:(h + 90) % 360,s:hsl.s,l:hsl.l}
),tinycolor({
h:(h + 180) % 360,s:hsl.s,l:hsl.l}
),tinycolor({
h:(h + 270) % 360,s:hsl.s,l:hsl.l}
) ];
}
;
tinycolor.splitcomplement = function(color){
var hsl = tinycolor(color).toHsl();
var h = hsl.h;
return [ tinycolor(color),tinycolor({
h:(h + 72) % 360,s:hsl.s,l:hsl.l}
),tinycolor({
h:(h + 216) % 360,s:hsl.s,l:hsl.l}
) ];
}
;
tinycolor.analogous = function(color,results,slices){
results = results || 6;
slices = slices || 30;
var hsl = tinycolor(color).toHsl();
var part = 360 / slices;
var ret = [tinycolor(color)];
for (hsl.h = ((hsl.h - (part * results >> 1)) + 720) % 360;
--results;
){
hsl.h = (hsl.h + part) % 360;
ret.push(tinycolor(hsl));
}
return ret;
}
;
tinycolor.monochromatic = function(color,results){
results = results || 6;
var hsv = tinycolor(color).toHsv();
var h = hsv.h,s = hsv.s,v = hsv.v;
var ret = [];
var modification = 1 / results;
while (results--){
ret.push(tinycolor({
h:h,s:s,v:v}
));
v = (v + modification) % 1;
}
return ret;
}
;
// Readability Functions // --------------------- // <http://www.w3.org/TR/AERT#color-contrast> // `readability` // Analyze the 2 colors and returns an object with the following properties:// `brightness`:difference in brightness between the two colors // `color`:difference in color/hue between the two colors tinycolor.readability = function(color1,color2){
var a = tinycolor(color1).toRgb();
var b = tinycolor(color2).toRgb();
var brightnessA = (a.r * 299 + a.g * 587 + a.b * 114) / 1000;
var brightnessB = (b.r * 299 + b.g * 587 + b.b * 114) / 1000;
var colorDiff = ( Math.max(a.r,b.r) - Math.min(a.r,b.r) + Math.max(a.g,b.g) - Math.min(a.g,b.g) + Math.max(a.b,b.b) - Math.min(a.b,b.b) );
return{
brightness:Math.abs(brightnessA - brightnessB),color:colorDiff}
;
}
;
// `readable` // http://www.w3.org/TR/AERT#color-contrast // Ensure that foreground and background color combinations provide sufficient contrast. // *Example* // tinycolor.readable("#000","#111") => false tinycolor.readable = function(color1,color2){
var readability = tinycolor.readability(color1,color2);
return readability.brightness > 125 && readability.color > 500;
}
;
// `mostReadable` // Given a base color and a list of possible foreground or background // colors for that base,returns the most readable color. // *Example* // tinycolor.mostReadable("#123",["#fff","#000"]) => "#000" tinycolor.mostReadable = function(baseColor,colorList){
var bestColor = null;
var bestScore = 0;
var bestIsReadable = false;
for (var i=0;
i < colorList.length;
i++){
// We normalize both around the "acceptable" breaking point,// but rank brightness constrast higher than hue. var readability = tinycolor.readability(baseColor,colorList[i]);
var readable = readability.brightness > 125 && readability.color > 500;
var score = 3 * (readability.brightness / 125) + (readability.color / 500);
if ((readable && ! bestIsReadable) || (readable && bestIsReadable && score > bestScore) || ((! readable) && (! bestIsReadable) && score > bestScore)){
bestIsReadable = readable;
bestScore = score;
bestColor = tinycolor(colorList[i]);
}
}
return bestColor;
}
;
// Big List of Colors // ------------------ // <http://www.w3.org/TR/css3-color/#svg-color> var names = tinycolor.names ={
aliceblue:"f0f8ff",antiquewhite:"faebd7",aqua:"0ff",aquamarine:"7fffd4",azure:"f0ffff",beige:"f5f5dc",bisque:"ffe4c4",black:"000",blanchedalmond:"ffebcd",blue:"00f",blueviolet:"8a2be2",brown:"a52a2a",burlywood:"deb887",burntsienna:"ea7e5d",cadetblue:"5f9ea0",chartreuse:"7fff00",chocolate:"d2691e",coral:"ff7f50",cornflowerblue:"6495ed",cornsilk:"fff8dc",crimson:"dc143c",cyan:"0ff",darkblue:"00008b",darkcyan:"008b8b",darkgoldenrod:"b8860b",darkgray:"a9a9a9",darkgreen:"006400",darkgrey:"a9a9a9",darkkhaki:"bdb76b",darkmagenta:"8b008b",darkolivegreen:"556b2f",darkorange:"ff8c00",darkorchid:"9932cc",darkred:"8b0000",darksalmon:"e9967a",darkseagreen:"8fbc8f",darkslateblue:"483d8b",darkslategray:"2f4f4f",darkslategrey:"2f4f4f",darkturquoise:"00ced1",darkviolet:"9400d3",deeppink:"ff1493",deepskyblue:"00bfff",dimgray:"696969",dimgrey:"696969",dodgerblue:"1e90ff",firebrick:"b22222",floralwhite:"fffaf0",forestgreen:"228b22",fuchsia:"f0f",gainsboro:"dcdcdc",ghostwhite:"f8f8ff",gold:"ffd700",goldenrod:"daa520",gray:"808080",green:"008000",greenyellow:"adff2f",grey:"808080",honeydew:"f0fff0",hotpink:"ff69b4",indianred:"cd5c5c",indigo:"4b0082",ivory:"fffff0",khaki:"f0e68c",lavender:"e6e6fa",lavenderblush:"fff0f5",lawngreen:"7cfc00",lemonchiffon:"fffacd",lightblue:"add8e6",lightcoral:"f08080",lightcyan:"e0ffff",lightgoldenrodyellow:"fafad2",lightgray:"d3d3d3",lightgreen:"90ee90",lightgrey:"d3d3d3",lightpink:"ffb6c1",lightsalmon:"ffa07a",lightseagreen:"20b2aa",lightskyblue:"87cefa",lightslategray:"789",lightslategrey:"789",lightsteelblue:"b0c4de",lightyellow:"ffffe0",lime:"0f0",limegreen:"32cd32",linen:"faf0e6",magenta:"f0f",maroon:"800000",mediumaquamarine:"66cdaa",mediumblue:"0000cd",mediumorchid:"ba55d3",mediumpurple:"9370db",mediumseagreen:"3cb371",mediumslateblue:"7b68ee",mediumspringgreen:"00fa9a",mediumturquoise:"48d1cc",mediumvioletred:"c71585",midnightblue:"191970",mintcream:"f5fffa",mistyrose:"ffe4e1",moccasin:"ffe4b5",navajowhite:"ffdead",navy:"000080",oldlace:"fdf5e6",olive:"808000",olivedrab:"6b8e23",orange:"ffa500",orangered:"ff4500",orchid:"da70d6",palegoldenrod:"eee8aa",palegreen:"98fb98",paleturquoise:"afeeee",palevioletred:"db7093",papayawhip:"ffefd5",peachpuff:"ffdab9",peru:"cd853f",pink:"ffc0cb",plum:"dda0dd",powderblue:"b0e0e6",purple:"800080",red:"f00",rosybrown:"bc8f8f",royalblue:"4169e1",saddlebrown:"8b4513",salmon:"fa8072",sandybrown:"f4a460",seagreen:"2e8b57",seashell:"fff5ee",sienna:"a0522d",silver:"c0c0c0",skyblue:"87ceeb",slateblue:"6a5acd",slategray:"708090",slategrey:"708090",snow:"fffafa",springgreen:"00ff7f",steelblue:"4682b4",tan:"d2b48c",teal:"008080",thistle:"d8bfd8",tomato:"ff6347",turquoise:"40e0d0",violet:"ee82ee",wheat:"f5deb3",white:"fff",whitesmoke:"f5f5f5",yellow:"ff0",yellowgreen:"9acd32"}
;
// Make it easy to access colors via `hexNames[hex]` var hexNames = tinycolor.hexNames = flip(names);
// Utilities // --------- // `{
'name1':'val1'}
` becomes `{
'val1':'name1'}
` function flip(o){
var flipped ={
}
;
for (var i in o){
if (o.hasOwnProperty(i)){
flipped[o[i]] = i;
}
}
return flipped;
}
// Return a valid alpha value [0,1] with all invalid values being set to 1 function boundAlpha(a){
a = parseFloat(a);
if (isNaN(a) || a < 0 || a > 1){
a = 1;
}
return a;
}
// Take input from [0,n] and return it as [0,1] function bound01(n,max){
if (isOnePointZero(n)){
n = "100%";
}
var processPercent = isPercentage(n);
n = mathMin(max,mathMax(0,parseFloat(n)));
// Automatically convert percentage into number if (processPercent){
n = parseInt(n * max,10) / 100;
}
// Handle floating point rounding errors if ((math.abs(n - max) < 0.000001)){
return 1;
}
// Convert into [0,1] range if it isn't already return (n % max) / parseFloat(max);
}
// Force a number between 0 and 1 function clamp01(val){
return mathMin(1,mathMax(0,val));
}
// Parse a base-16 hex value into a base-10 integer function parseIntFromHex(val){
return parseInt(val,16);
}
// Need to handle 1.0 as 100%,since once it is a number,there is no difference between it and 1 // <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0> function isOnePointZero(n){
return typeof n == "string" && n.indexOf('.') != -1 && parseFloat(n) === 1;
}
// Check to see if string passed in is a percentage function isPercentage(n){
return typeof n === "string" && n.indexOf('%') != -1;
}
// Force a hex value to have 2 characters function pad2(c){
return c.length == 1 ? '0' + c:'' + c;
}
// Replace a decimal with it's percentage value function convertToPercentage(n){
if (n <= 1){
n = (n * 100) + "%";
}
return n;
}
// Converts a decimal to a hex value function convertDecimalToHex(d){
return Math.round(parseFloat(d) * 255).toString(16);
}
// Converts a hex value to a decimal function convertHexToDecimal(h){
return (parseIntFromHex(h) / 255);
}
var matchers = (function(){
// <http://www.w3.org/TR/css3-values/#integers> var CSS_INTEGER = "[-\\+]?\\d+%?";
// <http://www.w3.org/TR/css3-values/#number-value> var CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?";
// Allow positive/negative integer/number. Don't capture the either/or,just the entire outcome. var CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")";
// Actual matching. // Parentheses and commas are optional,but not required. // Whitespace can take the place of commas or opening paren var PERMISSIVE_MATCH3 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
var PERMISSIVE_MATCH4 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
return{
rgb:new RegExp("rgb" + PERMISSIVE_MATCH3),rgba:new RegExp("rgba" + PERMISSIVE_MATCH4),hsl:new RegExp("hsl" + PERMISSIVE_MATCH3),hsla:new RegExp("hsla" + PERMISSIVE_MATCH4),hsv:new RegExp("hsv" + PERMISSIVE_MATCH3),hex3:/^([0-9a-fA-F]{
1}
)([0-9a-fA-F]{
1}
)([0-9a-fA-F]{
1}
)$/,hex6:/^([0-9a-fA-F]{
2}
)([0-9a-fA-F]{
2}
)([0-9a-fA-F]{
2}
)$/,hex8:/^([0-9a-fA-F]{
2}
)([0-9a-fA-F]{
2}
)([0-9a-fA-F]{
2}
)([0-9a-fA-F]{
2}
)$/}
;
}
)();
// `stringInputToObject` // Permissive string parsing. Take in a number of formats,and output an object // based on detected format. Returns `{
r,g,b}
` or `{
h,s,l}
` or `{
h,s,v}
` function stringInputToObject(color){
color = color.replace(trimLeft,'').replace(trimRight,'').toLowerCase();
var named = false;
if (names[color]){
color = names[color];
named = true;
}
else if (color == 'transparent'){
return{
r:0,g:0,b:0,a:0,format:"name"}
;
}
// Try to match string input using regular expressions. // Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360] // Just return an object and let the conversion functions handle that. // This way the result will be the same whether the tinycolor is initialized with string or object. var match;
if ((match = matchers.rgb.exec(color))){
return{
r:match[1],g:match[2],b:match[3]}
;
}
if ((match = matchers.rgba.exec(color))){
return{
r:match[1],g:match[2],b:match[3],a:match[4]}
;
}
if ((match = matchers.hsl.exec(color))){
return{
h:match[1],s:match[2],l:match[3]}
;
}
if ((match = matchers.hsla.exec(color))){
return{
h:match[1],s:match[2],l:match[3],a:match[4]}
;
}
if ((match = matchers.hsv.exec(color))){
return{
h:match[1],s:match[2],v:match[3]}
;
}
if ((match = matchers.hex8.exec(color))){
return{
a:convertHexToDecimal(match[1]),r:parseIntFromHex(match[2]),g:parseIntFromHex(match[3]),b:parseIntFromHex(match[4]),format:named ? "name":"hex8"}
;
}
if ((match = matchers.hex6.exec(color))){
return{
r:parseIntFromHex(match[1]),g:parseIntFromHex(match[2]),b:parseIntFromHex(match[3]),format:named ? "name":"hex"}
;
}
if ((match = matchers.hex3.exec(color))){
return{
r:parseIntFromHex(match[1] + '' + match[1]),g:parseIntFromHex(match[2] + '' + match[2]),b:parseIntFromHex(match[3] + '' + match[3]),format:named ? "name":"hex"}
;
}
return false;
}
// Expose tinycolor to window,does not need to run in non-browser context. window.tinycolor = tinycolor;
}
)();
$(function (){
if ($.fn.spectrum.load){
$.fn.spectrum.processNativeColorInputs();
}
}
);
}
)(window,jQuery);
CSS代码(spectrum.css):
/***Spectrum Colorpicker v1.3.4https://github.com/bgrins/spectrumAuthor:Brian GrinsteadLicense:MIT***/
.sp-container{position:absolute;top:0;left:0;display:inline-block;*display:inline;*zoom:1;/* https://github.com/bgrins/spectrum/issues/40 */
z-index:9999994;overflow:hidden;}
.sp-container.sp-flat{position:relative;}
/* Fix for *{box-sizing:border-box;}
*/
.sp-container,.sp-container *{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;}
/* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */
.sp-top{position:relative;width:100%;display:inline-block;}
.sp-top-inner{position:absolute;top:0;left:0;bottom:0;right:0;}
.sp-color{position:absolute;top:0;left:0;bottom:0;right:20%;}
.sp-hue{position:absolute;top:0;right:0;bottom:0;left:84%;height:100%;}
.sp-clear-enabled .sp-hue{top:33px;height:77.5%;}
.sp-fill{padding-top:80%;}
.sp-sat,.sp-val{position:absolute;top:0;left:0;right:0;bottom:0;}
.sp-alpha-enabled .sp-top{margin-bottom:18px;}
.sp-alpha-enabled .sp-alpha{display:block;}
.sp-alpha-handle{position:absolute;top:-4px;bottom:-4px;width:6px;left:50%;cursor:pointer;border:1px solid black;background:white;opacity:.8;}
.sp-alpha{display:none;position:absolute;bottom:-14px;right:0;left:0;height:8px;}
.sp-alpha-inner{border:solid 1px #333;}
.sp-clear{display:none;}
.sp-clear.sp-clear-display{background-position:center;}
.sp-clear-enabled .sp-clear{display:block;position:absolute;top:0px;right:0;bottom:0;left:84%;height:28px;}
/* Don't allow text selection */
.sp-container,.sp-replacer,.sp-preview,.sp-dragger,.sp-slider,.sp-alpha,.sp-clear,.sp-alpha-handle,.sp-container.sp-dragging .sp-input,.sp-container button{-webkit-user-select:none;-moz-user-select:-moz-none;-o-user-select:none;user-select:none;}
.sp-container.sp-input-disabled .sp-input-container{display:none;}
.sp-container.sp-buttons-disabled .sp-button-container{display:none;}
.sp-palette-only .sp-picker-container{display:none;}
.sp-palette-disabled .sp-palette-container{display:none;}
.sp-initial-disabled .sp-initial{display:none;}
/* Gradients for hue,saturation and value instead of images. Not pretty... but it works */
.sp-sat{background-image:-webkit-gradient(linear,0 0,100% 0,from(#FFF),to(rgba(204,154,129,0)));background-image:-webkit-linear-gradient(left,#FFF,rgba(204,154,129,0));background-image:-moz-linear-gradient(left,#fff,rgba(204,154,129,0));background-image:-o-linear-gradient(left,#fff,rgba(204,154,129,0));background-image:-ms-linear-gradient(left,#fff,rgba(204,154,129,0));background-image:linear-gradient(to right,#fff,rgba(204,154,129,0));-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType = 1,startColorstr=#FFFFFFFF,endColorstr=#00CC9A81)";filter:progid:DXImageTransform.Microsoft.gradient(GradientType = 1,startColorstr='#FFFFFFFF',endColorstr='#00CC9A81');}
.sp-val{background-image:-webkit-gradient(linear,0 100%,0 0,from(#000000),to(rgba(204,154,129,0)));background-image:-webkit-linear-gradient(bottom,#000000,rgba(204,154,129,0));background-image:-moz-linear-gradient(bottom,#000,rgba(204,154,129,0));background-image:-o-linear-gradient(bottom,#000,rgba(204,154,129,0));background-image:-ms-linear-gradient(bottom,#000,rgba(204,154,129,0));background-image:linear-gradient(to top,#000,rgba(204,154,129,0));-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81,endColorstr=#FF000000)";filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81',endColorstr='#FF000000');}
.sp-hue{background:-moz-linear-gradient(top,#ff0000 0%,#ffff00 17%,#00ff00 33%,#00ffff 50%,#0000ff 67%,#ff00ff 83%,#ff0000 100%);background:-ms-linear-gradient(top,#ff0000 0%,#ffff00 17%,#00ff00 33%,#00ffff 50%,#0000ff 67%,#ff00ff 83%,#ff0000 100%);background:-o-linear-gradient(top,#ff0000 0%,#ffff00 17%,#00ff00 33%,#00ffff 50%,#0000ff 67%,#ff00ff 83%,#ff0000 100%);background:-webkit-gradient(linear,left top,left bottom,from(#ff0000),color-stop(0.17,#ffff00),color-stop(0.33,#00ff00),color-stop(0.5,#00ffff),color-stop(0.67,#0000ff),color-stop(0.83,#ff00ff),to(#ff0000));background:-webkit-linear-gradient(top,#ff0000 0%,#ffff00 17%,#00ff00 33%,#00ffff 50%,#0000ff 67%,#ff00ff 83%,#ff0000 100%);}
/* IE filters do not support multiple color stops. Generate 6 divs,line them up,and do two color gradients for each. Yes,really. */
.sp-1{height:17%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000',endColorstr='#ffff00');}
.sp-2{height:16%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00',endColorstr='#00ff00');}
.sp-3{height:17%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00',endColorstr='#00ffff');}
.sp-4{height:17%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff',endColorstr='#0000ff');}
.sp-5{height:16%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff',endColorstr='#ff00ff');}
.sp-6{height:17%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff',endColorstr='#ff0000');}
.sp-hidden{display:none !important;}
/* Clearfix hack */
.sp-cf:before,.sp-cf:after{content:"";display:table;}
.sp-cf:after{clear:both;}
.sp-cf{*zoom:1;}
/* Mobile devices,make hue slider bigger so it is easier to slide */
@media (max-device-width:480px){.sp-color{right:40%;}
.sp-hue{left:63%;}
.sp-fill{padding-top:60%;}
}
.sp-dragger{border-radius:5px;height:5px;width:5px;border:1px solid #fff;background:#000;cursor:pointer;position:absolute;top:0;left:0;}
.sp-slider{position:absolute;top:0;cursor:pointer;height:3px;left:-1px;right:-1px;border:1px solid #000;background:white;opacity:.8;}
/*Theme authors:Here are the basic themeable display options (colors,fonts,global widths).See http://bgrins.github.io/spectrum/themes/ for instructions.*/
.sp-container{border-radius:0;background-color:#ECECEC;border:solid 1px #f0c49B;padding:0;}
.sp-container,.sp-container button,.sp-container input,.sp-color,.sp-hue,.sp-clear{font:normal 12px "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;}
.sp-top{margin-bottom:3px;}
.sp-color,.sp-hue,.sp-clear{border:solid 1px #666;}
/* Input */
.sp-input-container{float:right;width:100px;margin-bottom:4px;}
.sp-initial-disabled .sp-input-container{width:100%;}
.sp-input{font-size:12px !important;border:1px inset;padding:4px 5px;margin:0;width:100%;background:transparent;border-radius:3px;color:#222;}
.sp-input:focus{border:1px solid orange;}
.sp-input.sp-validation-error{border:1px solid red;background:#fdd;}
.sp-picker-container,.sp-palette-container{float:left;position:relative;padding:10px;padding-bottom:300px;margin-bottom:-290px;}
.sp-picker-container{width:172px;border-left:solid 1px #fff;}
/* Palettes */
.sp-palette-container{border-right:solid 1px #ccc;}
.sp-palette .sp-thumb-el{display:block;position:relative;float:left;width:24px;height:15px;margin:3px;cursor:pointer;border:solid 2px transparent;}
.sp-palette .sp-thumb-el:hover,.sp-palette .sp-thumb-el.sp-thumb-active{border-color:orange;}
.sp-thumb-el{position:relative;}
/* Initial */
.sp-initial{float:left;border:solid 1px #333;}
.sp-initial span{width:30px;height:25px;border:none;display:block;float:left;margin:0;}
.sp-initial .sp-clear-display{background-position:center;}
/* Buttons */
.sp-button-container{float:right;}
/* Replacer (the little preview div that shows up instead of the <input>) */
.sp-replacer{margin:0;overflow:hidden;cursor:pointer;padding:4px;display:inline-block;*zoom:1;*display:inline;border:solid 1px #91765d;background:#eee;color:#333;vertical-align:middle;}
.sp-replacer:hover,.sp-replacer.sp-active{border-color:#F0C49B;color:#111;}
.sp-replacer.sp-disabled{cursor:default;border-color:silver;color:silver;}
.sp-dd{padding:2px 0;height:16px;line-height:16px;float:left;font-size:10px;}
.sp-preview{position:relative;width:25px;height:20px;border:solid 1px #222;margin-right:5px;float:left;z-index:0;}
.sp-palette{*width:220px;max-width:220px;}
.sp-palette .sp-thumb-el{width:16px;height:16px;margin:2px 1px;border:solid 1px #d0d0d0;}
.sp-container{padding-bottom:0;}
/* Buttons:http://hellohappy.org/css3-buttons/ */
.sp-container button{background-color:#eeeeee;background-image:-webkit-linear-gradient(top,#eeeeee,#cccccc);background-image:-moz-linear-gradient(top,#eeeeee,#cccccc);background-image:-ms-linear-gradient(top,#eeeeee,#cccccc);background-image:-o-linear-gradient(top,#eeeeee,#cccccc);background-image:linear-gradient(to bottom,#eeeeee,#cccccc);border:1px solid #ccc;border-bottom:1px solid #bbb;border-radius:3px;color:#333;font-size:14px;line-height:1;padding:5px 4px;text-align:center;text-shadow:0 1px 0 #eee;vertical-align:middle;}
.sp-container button:hover{background-color:#dddddd;background-image:-webkit-linear-gradient(top,#dddddd,#bbbbbb);background-image:-moz-linear-gradient(top,#dddddd,#bbbbbb);background-image:-ms-linear-gradient(top,#dddddd,#bbbbbb);background-image:-o-linear-gradient(top,#dddddd,#bbbbbb);background-image:linear-gradient(to bottom,#dddddd,#bbbbbb);border:1px solid #bbb;border-bottom:1px solid #999;cursor:pointer;text-shadow:0 1px 0 #ddd;}
.sp-container button:active{border:1px solid #aaa;border-bottom:1px solid #888;-webkit-box-shadow:inset 0 0 5px 2px #aaaaaa,0 1px 0 0 #eeeeee;-moz-box-shadow:inset 0 0 5px 2px #aaaaaa,0 1px 0 0 #eeeeee;-ms-box-shadow:inset 0 0 5px 2px #aaaaaa,0 1px 0 0 #eeeeee;-o-box-shadow:inset 0 0 5px 2px #aaaaaa,0 1px 0 0 #eeeeee;box-shadow:inset 0 0 5px 2px #aaaaaa,0 1px 0 0 #eeeeee;}
.sp-cancel{font-size:11px;color:#d93f3f !important;margin:0;padding:2px;margin-right:5px;vertical-align:middle;text-decoration:none;}
.sp-cancel:hover{color:#d93f3f !important;text-decoration:underline;}
.sp-palette span:hover,.sp-palette span.sp-thumb-active{border-color:#000;}
.sp-preview,.sp-alpha,.sp-thumb-el{position:relative;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);}
.sp-preview-inner,.sp-alpha-inner,.sp-thumb-inner{display:block;position:absolute;top:0;left:0;bottom:0;right:0;}
.sp-palette .sp-thumb-inner{background-position:50% 50%;background-repeat:no-repeat;}
.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=);}
.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=);}
.sp-clear-display{background-repeat:no-repeat;background-position:center;background-image:url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==);}
分享到QQ
分享到微博
微信扫一扫
