前端页面中使用Spectrum 绘制调色板

概述

        在页面开发时，有时我们需要在页面中添加一个调色板，方便用户自己喜欢的颜色。这时，我们需要在页面中添加一个调色板。在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)", &