前端页面中使用Spectrum 绘制调色板
本文共 7570 字，大约阅读时间需要 25 分钟。
概述
在页面开发时，有时我们需要在页面中添加一个调色板，方便用户自己喜欢的颜色。这时，我们需要在页面中添加一个调色板。在input[type='color']中，可以直接调出调色板，而且界面也比较漂亮，但是我们很难控制它的样式，最致命的是他的兼容性非常差，在ie10中无法进行显示，因此选用Spectrum 绘制调色板。最终的展示效果为：
操作目标
在页面中，我们需要将调色板的色值显示，同时在调色板和显示的值之间添加一个“自定义色值”的说明。我们可以通过输入自定义色值的内容，设置调色板的颜色，也可以通过调色板选中自己喜欢的颜色，并将色值显示在右边的方框中。
实现步骤
1、简单实现调色板
在jsp页面中，我们需要一个input框：
在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代码如下所示
自定义色值：
其中，利用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()); 方法对调色板进行赋值。
参考文档
1、
2、
你可能感兴趣的文章
线程中断处理
查看>>
消息队列积压问题处理
查看>>
并行流使用注意事项
查看>>
泛型擦除机制及相关问题
查看>>
Jackson日期反序列化时区问题
查看>>
《设计模式》
查看>>
单例设计模式
查看>>
面试题集锦（一）
查看>>
Calendar类方法——编写万年历的两种方式
查看>>
File类的使用——遍历所有文件及子文件以及遍历删除
查看>>
内存流的使用——基本使用
查看>>
RandomAccessFile 类的使用——基本使用
查看>>
Properties实现类——基本使用
查看>>
结构型模式——装饰者设计模式
查看>>
线程的同步——Synchronized和ReentrantLock
查看>>
网络编程基础
查看>>
python实现快速排序
查看>>
python实现归并排序
查看>>
ptqt5控件了解（三）
查看>>
自学C++（一）
查看>>