概述
在页面开发时，有时我们需要在页面中添加一个调色板，方便用户自己喜欢的颜色。这时，我们需要在页面中添加一个调色板。在input[type='color']中，可以直接调出调色板，而且界面也比较漂亮，但是我们很难控制它的样式，最致命的是他的兼容性非常差，在ie10中无法进行显示，因此选用Spectrum 绘制调色板。最终的展示效果为：
操作目标
在页面中，我们需要将调色板的色值显示，同时在调色板和显示的值之间添加一个“自定义色值”的说明。我们可以通过输入自定义色值的内容，设置调色板的颜色，也可以通过调色板选中自己喜欢的颜色，并将色值显示在右边的方框中。
实现步骤
1、简单实现调色板
在jsp页面中，我们需要一个input框：
<input id="color-input-diy" name="color-input-diy">
在js中，将当前input设置spectrum属性和方法：
$("#color-input-diy").spectrum({
color: "red",//初始化颜色
showInput: true,//显示输入
// allowEmpty:true,//允许为空,显示清楚颜色按钮
clickoutFiresChange: false,//单击选择器外部,如果颜色有改变则应用
containerClassName: "full-spectrum",
showInitial: true,//显示初始颜色,提供现在选择的颜色和初始颜色对比
showPalette: true,//显示选择器面板，即左侧有按钮的面板
showSelectionPalette: true,//记住选择过的颜色
showAlpha: true,//显示透明度选择
maxPaletteSize: 7,//记住选择过的颜色的最大数量
cancelText: "取消",//取消按钮,按钮文字
chooseText: "确定",//选择按钮,按钮文字
noColorSelectedText: "无颜色选择",//清除,按钮文字
preferredFormat: "hex",//输入框颜色格式,(hex十六进制,hex3十六进制可以的话只显示3位,hsl,rgb三原色,name英文名显示)
localStorageKey: "spectrum.demo",//把选择过的颜色存在浏览器上
//选择器右边面板移动时触发
move: function (color) {
updateBorders(color);
},
//选择器面板显示时触发
show: function () {
},
//选择器面板显示之前触发,返回false时不显示
beforeShow: function () {
},
//关闭面板或点击选择按钮,颜色变化时触发
change: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)"]
]
});
function updateBorders(color) {
//hexColor表示上次调色板显示的颜色
var hexColor = "transparent";
//如果当前设置颜色，则将颜色设置为当前颜色，否则，如果没有点击确定，则将颜色恢复为上次选择的颜色
if(color) {
hexColor = color.toHexString();
}
//如果没有下面这行代码，点击选择器面板时，即使不点击保存，也会造成input框中的值改变
$("#docs-content").css("border-color", hexColor);
}
至此，对于各参数，代码中已添加了详细的注释，更多的属性和方法请参照参考文档中的官网说明。现在显示的效果为
2、实现目标要求
在jsp中我们添加其他元素，展示的颜色值、介绍文字。为了控制布局，使用div进行控制，jsp代码如下所示
<!-- 调色板-->
<div class="chat-windows-color-diy-div row">
<div class="col-xs-5 col-sm-5 col-md-5">
<div class="col-xs-2 col-sm-2 col-md-2 diy-color-choose">
<input id="color-input-diy" name="color-input-diy">
<!-- <label for="color-input-diy"></label> -->
</div>
<div class="col-xs-4 col-sm-4 col-md-4 diy-color-value-div">
<span class="diy-color-value-span"> 自定义色值：</span>
</div>
<div class="col-xs-5 col-sm-5 col-md-5 diy-color-style">
<input id="color-input-diy-value" class="diy-color-style-input" onblur="setPalette()" type="text" name="color">
</div>
</div>
</div>
其中，利用onblur属性绑定到setPalette()函数上，当input输入框输入内容时，将会触发js中的setpalette()方法，显示的样式为：
在js代码中，我们增加两部分，一个是将调色板的颜色值显示到id="color-input-diy-value"中的input框中，另一个设置input框中输入值时，赋值给调色板。
$("#color-input-diy").spectrum({
color: "red",//初始化颜色
showInput: true,//显示输入
// allowEmpty:true,//允许为空,显示清楚颜色按钮
clickoutFiresChange: false,//单击选择器外部,如果颜色有改变则应用
containerClassName: "full-spectrum",
showInitial: true,//显示初始颜色,提供现在选择的颜色和初始颜色对比
showPalette: true,//显示选择器面板
showSelectionPalette: true,//记住选择过的颜色
showAlpha: true,//显示透明度选择
maxPaletteSize: 7,//记住选择过的颜色的最大数量
cancelText: "取消",//取消按钮,按钮文字
chooseText: "确定",//选择按钮,按钮文字
noColorSelectedText: "无颜色选择",//清除,按钮文字
preferredFormat: "hex",//输入框颜色格式,(hex十六进制,hex3十六进制可以的话只显示3位,hsl,rgb三原色,name英文名显示)
localStorageKey: "spectrum.demo",//把选择过的颜色存在浏览器上
//选择器右边面板移动时触发
move: function (color) {
updateBorders(color);
},
//选择器面板显示时触发
show: function () {
},
//选择器面板显示之前触发,返回false时不显示
beforeShow: function () {
},
//关闭面板或点击选择按钮,颜色变化时触发
change: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)"]
]
});
function updateBorders(color) {
var hexColor = "transparent";
if(color) {
hexColor = color.toHexString();
}
$("#docs-content").css("border-color", hexColor);
//将调色版的颜色放置到input框中
$('#color-input-diy-value').val(hexColor);
}
}
//设置调色板的颜色值
function setPalette(){
var colorValue=$("#color-input-diy-value").val();
//对input框输入的颜色值进行简单的校验
if(colorValue.indexOf('#')==0&&colorValue.length==7){
$("#color-input-diy").spectrum("set", $("#color-input-diy-value").val());
}else if(colorValue==null||colorValue.length==0){
return;
}else{
alert("请输入正确的色值");
}
}
至此，我们完成了目标所示的功能，新添加的代码已经用不同的颜色进行标注。最终的效果图为
注意事项：
1、原Spectrum调色板中，点击选择面板时，即时没有确认，也会导致input框的值发生改变，因此，需在js页面中的updateBorders(color) 方法中添加 $("#docs-content").css("border-color", hexColor); 。
2、使用 $("#color-input-diy").spectrum("set", $("#color-input-diy-value").val()); 方法对调色板进行赋值。
参考文档