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

最新推荐文章于 2025-07-10 10:04:59 发布

ONLY&YOU

最新推荐文章于 2025-07-10 10:04:59 发布

阅读量5.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端界面

本文链接：https://blog.youkuaiyun.com/qq_34182808/article/details/79992225

本文档介绍了如何在前端页面中使用Spectrum库创建自定义调色板，解决input[type='color']在IE10的兼容性问题。通过详细步骤和代码示例，展示了如何设置Spectrum属性和方法，实现调色板与色值显示的交互功能，包括自定义色值输入和颜色更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概述

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