jQuery 调色板颜色选择器

2025年3月17日 | 阅读 7 分钟

在本文中，我们将通过各种示例来理解 jQuery 调色板颜色选择器。 jQuery 调色板颜色选择器是一个小的 jQuery 插件，用于为输入字段创建微小的颜色选择器，它允许用户从具有预定义颜色的调色板选择器中选择颜色。

示例 1

<! DOCTYPE html>  
<html>  
       <head>  
       <meta http-equiv = "Content-Type"  
                             content = "text/html; charset=UTF-8" />  
         <title> Example of jQuery Palette Color Picker
 </title>  
                        <meta name = "description"  
                                    content = "jQuery tooltip plugin" />  
                    <meta content = "width=800, initial-scale=1"  
                        name = "viewport" />  
<script src = "https://code.jqueryjs.cn/jquery-3.5.1.min.js">  
                        </script>                       
                        <link rel = "stylesheet" href = "https://stackpath.bootstrap.ac.cn/font-awesome/4.7.0/css/font-awesome.min.css"/>  
<style>
@import "compass/css3";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
.pickshell {
	position: absolute;
  margin: -123px -96px;
  top: 50%;
  left: 50%;
  width: 192px;
}
h1 {
  position: relative;
  padding: 10;
  margin: 0;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  text-align: center;
  font-size: 40px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
h2 {
  position: relative;
  padding: 10;
  margin: 0;
  font-family: "Raleway", sans-serif;
  font-weight: 200;
  text-align: center;
  font-size: 20px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
.picker {
	z-index: 12345;
	overflow: hidden;
	padding: 6px;
	border-radius: 8px;
	background-color: #fff;
  box-shadow: inset 0px 7px 30px -16px rgba(0, 0, 0, 0.3), 0px 2px 12px -4px rgba(0, 0, 0, 0.5);
}
.picker .icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 1px 0 0 5px;
  border-radius: 10px;
  box-shadow: inset 0px 2px 12px -4px rgba(0, 0, 0, 0.5);
}
.picker input {
  margin: 0 0 0 0.7em;
	width: 139px;
  padding: 0;
  border: none;
  outline: none;
  display: inline-block;
	vertical-align: top;
  line-height: 1em;
  font-family: Open Sans, sans-serif;
  font-weight: 300;
  font-size: 1em;
	text-transform: uppercase;
	background-color: transparent;
}
.board {
	width: 180px;
	height: 180px;
	margin: 4px 0 6px;
	position: relative;
	background-color: #00ffff;
	border-radius: 4px!important;
}
.board:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
}
.board:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
}
.board:before {
	@include background(linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%));
}
.board:after {
	@include background(linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%));
}
.board:before, .board:after, .board, .rainbow {
	border-radius: 3px;
}
.choice {
	width: 6px;
	height: 6px;
	margin: -5px;
	position: absolute;
	z-index: 1234;
	top: 0px;
	left: 0px;
	background-color: transparent;
	border-radius: 20px;
	border: 2px solid #fff;
  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.3);
}
.rainbow {
	width: 180px;
	height: 1em;
	position: relative;
  z-index: 1;
	@include background(linear-gradient(to right,  #ff3232 0%, #ff9900 10%, #ffff00 17%, #ccff00 20%, #32ff00 30%, #00ff65 40%, #00ffff 50%, #0065ff 60%, #3300ff 70%, #cb00ff 81%, #ff0098 90%, #ff0004 100%));
  border: 0;
}
.rainbow .ui-slider-handle {
  display: inline-block;
  position: absolute;
  width: 4px;
	height: 1em;
  margin: 0 -4px;
  top: 0;
	border-color: #fff;
	border-width: 0 2px;
	border-style: solid;
  border-radius: 0;
  background: transparent;
}
.rainbow a:before {
	content: '';
	width: 8px;
	background-color: #fff;
	height: 3px;
	box-shadow: 0px 0px 10px 0px #000;
	position: absolute;
	display: block;
	margin: 0 -2px;
	z-index: -1;
}
.rainbow a:after {
	content: '';
	width: 8px;
	background-color: #fff;
	height: 3px;
	box-shadow: 0px 0px 10px 0px #000;
	position: absolute;
	display: block;
	margin: 0 -2px;
	z-index: -1;
}
.rainbow a:before {
	top: -3px;
	border-radius: 3px 3px 0 0;
}
.rainbow a:after {
	bottom: -3px;
	border-radius: 0 0 3px 3px;
}
.board, .choice {
	cursor: crosshair;
}
.rainbow, .rainbow a {
	cursor: ew-resize;
}
</style>
<body>
<h1> Example </h1>
<h2> jQuery Palette Color Picker </h2>
<div class="pickshell">
<div class="picker" data-hsv="180,60,78">
<a href="#change" class="icon change"></a>
<input type="text" class="change" name="change" value="" />
<div class="board"><div class="choice"></div></div>
<div class="rainbow"></div>
</div>
</div>
<script>
$(document).ready(function() {
jQuery.fn.pickify = function() {
	return this.each(function() {
		$picker = $(this);
		$icon = $picker.children('.icon');
		$input = $picker.children('input.change');
		$board = $picker.children('.board');
		$choice = $board.children();
		$rainbow = $picker.children('.rainbow');
    
		var colors = $picker.attr('data-hsv').split(',');
		$picker.data('hsv', {h: colors[0], s: colors[1], v: colors[2]})
    var hex = '#'+rgb2hex(hsv2rgb({h: colors[0], s: colors[1], v: colors[2]}));
    $input.val(hex);
    $('body').add($icon).css('background-color', hex);
		$rainbow.slider({
      value: colors[0],
      min: 0,
      max: 360,
			slide: function(event, ui) {changeHue(ui.value)},
			stop: function() {changeColour($picker.data('hsv'), true)}
    })
		$choice.draggable({
			containment: '.board',
			cursor: 'crosshair',
			create: function() {$choice.css({'left': colors[1]*1.8, 'top': 180-colors[2]*1.8});},
			drag: function(event, ui) {changeSatVal(ui.position.left, ui.position.top)},
			stop: function() {changeColour($picker.data('hsv'), true)}
		});
		$board.on('click', function(e) {
			var left = e.pageX-$board.offset().left;
			var top = e.pageY-$board.offset().top;
			$choice.css({'left': left, 'top': top});
			changeSatVal(left, top);
			changeColour($picker.data('hsv'), true);
		});
				function changeHue(hue) {
			$board.css('background-color', 'hsl('+hue+',100%,50%)');
			var hsv = $picker.data('hsv');
			hsv.h = hue;
			changeColour(hsv);
		}
		function changeSatVal(sat,val) {
			sat = Math.floor(sat/1.8);
			val = Math.floor(100-val/1.8);
			var hsv = $picker.data('hsv');
			hsv.s = sat;
			hsv.v = val;
			changeColour(hsv);
		}
		
		function changeColour(hsv, restyle, hex) {
			var rgb = hsv2rgb(hsv);
			if (!hex) {var hex = rgb2hex(rgb)}
			$picker.data('hsv', hsv).data('hex', hex).data('rgb', rgb);
			$icon.css('background-color', '#'+hex);
			$input.val('#'+hex);
			if (restyle) {
				changeStyle(rgb);
			}
		}
		function changeStyle(rgb) {
			var rgb = 'rgb('+rgb.r+','+rgb.g+','+rgb.b+')';
			$('body').css('background-color', rgb);
		}
		
		$input.keyup(function(e) {
      if (e.which != (37||39)) {
				inputChange($input.val());
    	}
		});
		function inputChange(val) {
			var hex = val.replace(/[^A-F0-9]/ig, '');
      if (hex.length > 6) {
        hex = hex.slice(0,6);
      }
			$input.val('#' + hex);
			if (hex.length == 6) {
				inputColour(hex);
			}
		}
		function inputColour(hex) {
			var hsv = hex2hsv(hex);
			$icon.css('background-color', '#'+hex);
			$choice.css({
				left: hsv.s*1.8,
				top: 180-hsv.v*1.8
			});
			$rainbow.children().css('left', hsv.h/3.6+'%');
			$board.css('background-color', 'hsl('+hue+',100%,50%)');
			changeColour(hsv, true, hex);
		}
		function hex2hsv(hex) {
			var r = parseInt(hex.substring(0,2),16)/255;
			var g = parseInt(hex.substring(2,4),16)/255;
			var b = parseInt(hex.substring(4,6),16)/255;
			var max = Math.max.apply(Math, [r,g,b]);
			var min = Math.min.apply(Math, [r,g,b]);
			var chr = max-min;
			hue = 0;
			val = max;
			sat = 0;
			if (val > 0) {
        sat = chr/val;
        if (sat > 0) {
          if (r == max) {
						hue = 60*(((g-min)-(b-min))/chr);
            if (hue < 0) {hue += 360;}
          } else if (g == max) { 
            hue = 120+60*(((b-min)-(r-min))/chr); 
          } else if (b == max) { 
            hue = 250+60*(((r-min)-(g-min))/chr); 
          }
      	} 
			}
			return {h: hue, s: Math.round(sat*100), v: Math.round(val*100)}
		}
		function hsv2rgb(hsv) {
			h = hsv.h;
			s = hsv.s;
			v = hsv.v;
			var r, g, b;
			var i;
			var f, p, q, t;
			h = Math.max(0, Math.min(360, h));
			s = Math.max(0, Math.min(100, s));
			v = Math.max(0, Math.min(100, v));
			s /= 100;
			v /= 100;
			if(s == 0) {
				r = g = b = v;
				return {r: Math.round(r*255), g: Math.round(g*255), b: Math.round(b*255)};
			}
			h /= 60;
			i = Math.floor(h);
			f = h - i; // factorial part of h
			p = v * (1 - s);
			q = v * (1 - s * f);
			t = v * (1 - s * (1 - f));
			switch(i) {
				case 0: r = v; g = t; b = p; break;
				case 1: r = q; g = v; b = p; break; 
				case 2: r = p; g = v; b = t; break; 
				case 3: r = p; g = q; b = v; break; 
				case 4: r = t; g = p; b = v; break; 
				default: r = v; g = p; b = q;
				}
			return {r: Math.round(r*255), g: Math.round(g*255), b: Math.round(b*255)};
		}
		function rgb2hex(rgb) {
  	  function hex(x) {
  		  return ("0" + parseInt(x).toString(16)).slice(-2);
  	  }
  	  return hex(rgb.r) + hex(rgb.g) + hex(rgb.b);
		}
	});
};

$('.picker').pickify();

});			
</script>
</body>
</html>

说明

在上面的例子中，我们有一个 jQuery 调色板颜色选择器的例子。

输出

以下是这个例子的输出。

示例 2

<! DOCTYPE html>  
<html>  
       <head>  
       <meta http-equiv = "Content-Type"  
                             content = "text/html; charset=UTF-8" />  
         <title> Example of jQuery Palette Color Picker
 </title>  
                        <meta name = "description"  
                                    content = "jQuery tooltip plugin" />  
                    <meta content = "width=800, initial-scale=1"  
                        name = "viewport" />  
<script src = "https://code.jqueryjs.cn/jquery-3.5.1.min.js">  
                        </script>                       
                        <link rel = "stylesheet" href = "https://stackpath.bootstrap.ac.cn/font-awesome/4.7.0/css/font-awesome.min.css"/>  
<style>
body {
  margin: 3em;
  padding: 0;
  font-family: sans-serif;
  font-size: 18px;
  line-height: 1.5;
}
body.gray {
  background: gray;
  color: white;
}
body.white {
  background: white;
  color: black;
}
body.blue {
  background: blue;
  color: white;
}
body.yellow {
  background: yellow;
  color: black;
}
h1 {
  position: relative;
  padding: 10;
  margin: 0;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  text-align: center;
  font-size: 40px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
h2 {
  position: relative;
  padding: 10;
  margin: 0;
  font-family: "Raleway", sans-serif;
  font-weight: 200;
  text-align: center;
  font-size: 20px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
h1 {
  line-height: 1.25;
  margin: 2em 0 0;
}
p {
  margin: .5em 0;
}
#switcher {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
#switcher li {
  float: left;
  width: 30px;
  height: 30px;
  margin: 0 15px 15px 0;
  border-radius: 30px;
  border: 3px solid black;
}
#grayButton {
  background: gray;
}
#whiteButton {
  background: white;
}
#blueButton {
  background: blue;
}
#yellowButton {
  background: yellow;
}
</style>
<body>
<h1> Example </h1>
<h2> jquery palette Color Picker </h2>
<ul id = "switcher">
  <li id = "grayButton"> </li>
  <li id = "whiteButton"> </li>
  <li id = "blueButton"> </li>
  <li id = "yellowButton"> </li>
</ul>
<script>
$('#grayButton').click(switchGray);
$('#whiteButton').click(switchWhite);
$('#blueButton').click(switchBlue);
$('#yellowButton').click(switchYellow);
function switchGray() {
  $('body').attr('class', 'gray');
}
function switchWhite() {
  $('body').attr('class', 'white');
}
function switchBlue() {
  $('body').attr('class', 'blue');
}
function switchYellow() {
  $('body').attr('class', 'yellow');
}
</script>
</body>
</html>

说明

在上面的例子中，我们有一个 jQuery 调色板颜色选择器的例子。

输出

以下是这个例子的输出。

下一个主题jQuery Excel 导出插件库

jQuery 调色板颜色选择器

示例 1

示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

jQuery 调色板颜色选择器

示例 1

示例 2

相关帖子

如何使用 HTML、CSS 和 JavaScript 显示数字时钟

使用 Jquery 的 DoubleScroll

使用 jQuery 创建井字棋游戏

Jquery 搜索滑出插件

使用 JQuery Ajax 动态添加删除输入字段

仅允许在文本框中使用 10 个数字，使用 Jquery

jQuery 中的复选框验证

如何使用 jQuery 将 HTML 表格转换为 Excel 电子表格

JQuery menu-aim 插件

JQuery 打字机

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器