JavaScript取色器简介
JavaScript取色器是一个允许用户从取色器容器中挑选颜色的控件。选色器还允许用户调整不透明度和色调以获得所需的颜色。此外，它还支持调色板的定制，并支持整合到表单的内联模式。你们都见过很多种类的拾色器，它可以用任何编程语言编程，也可以是任何直接的插件。一般来说，这些取色器是用来提取所需的颜色来装饰应用程序或基于需求的。
语法
为拾色器创建一个新的实例。
var samplePicker = new jscolor(<targetElement>, <options>);
这里的参数是节点选择器，它将在鼠标点击时显示一个颜色选择器。
<options>: An object with optional hashmap with configurations and values in format, {<option>: <value>,….}
对于JavaScript颜色选择器，我们有一个通用的JavaScript代码，可以在 "jscolor.com "下载。
jscolor.js
这个jscolor.js文件将包含各种类型的颜色选择器的编程逻辑。
JavaScript颜色选择器的例子
下面提到了不同的例子。
例子#1
代码
<script src="./jscolor.js"></script>
<h1>Different Color Pcikers</h1>
<h3>
Color:
<input data-jscolor="{position:'right'}" value="28F1C9">
</h3>
<h3>
Button type Large dark picker:
<button data-jscolor="{preset:'large dark', value:'rgba(48,85,255,0.8)'}"></button>
</h3>
<h3>
Small RGBA picker:
<input data-jscolor="{width:120}" value="rgba(144,34,82,1)">
</h3>
输出
通过颜色，我们默认指定了一个特定的颜色；点击后，显示颜色选择器。
输入型深色背景的颜色选择器
颜色选择器的小视图。
例子#2
代码
<script src="jscolor.js"></script>
<p>
Small dark preset color picker:
<input value="FFA000" data-jscolor="{preset:'small dark', position:'right'}">
</p>
<p>
Large preset color picker:
<input value="rgba(255,255,0,0.5)" data-jscolor="{preset:'large', position:'right'}">
</p>
<p>
Custom theme:
<input value="rgba(255,255,0,2.5)" data-jscolor="{
position: 'right', width: 120, height: 120,
padding: 10, sliderSize: 25, borderRadius: 5,
borderWidth: 1, controlBorderWidth: 1, pointerBorderWidth: 2,
borderColor: '#256', controlBorderColor: '#CCC', backgroundColor: '#334'
}">
</p>
<p>
Input with large preview color picker:
<input value="rgba(255,110,0,0.5)" data-jscolor="{previewSize:50}">
</p>
<p>
Button with large preview color picker:
<button data-jscolor="{value:'rgba(255,160,120,0.5)', previewSize:20}"></button>
</p>
输出
只有字母的小预设，大预设为RGBA变体。首先，自定义主题设置了位置、宽度、高度、padding、背景色和边框宽度。接下来是输入大预设的颜色选择器，有previewSize，另外有Button预览。
例子#3
代码
<script src="jscolor.js"></script>
<h3>Redirect value of color picker</h3>
<p>
<button data-jscolor="{valueElement:'#value1', alphaElement:'#alpha1'}">
Pick color here
</button>
Value: <input id="value1" value="ABC222">
Alpha: <input id="alpha1" value="0.8">
<p>
<h3>Redirect value and preview of color picker</h3>
<p>
<button data-jscolor="{valueElement:'#value2', alphaElement:'#alpha2', previewElement:'#pr2'}">
Pick color here
</button>
Value: <input id="value2" value="BB2447">
Alpha: <input id="alpha2" value="0.9">
Preview: <span id="pr2" style="display:inline-block; width:100px;"> </span>
<p>
输出
让我们试着改变这里的颜色。
例子 #4
代码
<script src="jscolor.js"></script>
<h2>Positioning of color picker</h2>
<p>
Color Picker on right:
<input data-jscolor="{position:'right'}">
</p>
<p style="margin-top:200px">
Color Picker on Top
<input data-jscolor="{position:'top'}">
</p>
<p style="margin-bottom:200px">
Color Picker on Bottom
<input data-jscolor="{position:'bottom'}">
</p>
输出
选色器在右边的定位
选色器在顶部的位置
选色器在底部的位置
例子#5
代码
<script src="jscolor.js"></script>
<button onclick="addPickers(100)">Add 100 color pickers</button>
<p id="container"></p>
<script>
function addPickers(count) {
for(var i = 0; i < count; i++) {
var inputColor = document.createElement('INPUT')
var opts = {backgroundColor:'#666'}
var picker = new JSColor(inputColor, opts)
picker.fromHSVA((360/count) * i, 100, 100)
document.getElementById('container').appendChild(inputColor)
}
}
</script>
输出
点击后，100种颜色被添加到控制台。
例子 #6
代码
<script src="jscolor.js"></script>
<script>
function generatePicker() {
document.getElementById('output').innerHTML += '<input data-jscolor="">'
jscolor.install()
}
</script>
<button onclick="generatePicker()">Click to generate Color Picker</button>
<p id="output"></p>
输出
点击后，生成一个颜色选择器
例子 #7
代码
<script src="jscolor.js"></script>
<p>HSV(Hue Saturation Value) mode: <input data-jscolor="{mode:'HSV', position:'top'}"></p>
<p>HVS mode: <input data-jscolor="{mode:'HVS', position:'bottom'}"></p>
输出
例子 #8
代码
<script src="jscolor.js"></script>
Color picker with a <b>Close</b> button:
<input value="fb3333" data-jscolor="{closeButton:true, closeText:'Close Picker!',
backgroundColor:'#555', buttonColor:'#AAA'}">
输出
点击关闭选取器，颜色选取器将被关闭。
例子 #9
代码
<script src="jscolor.js"></script>
<p>
Color Preview changes on selecting:
<input data-jscolor="{value:'rgba(222,160,232,1)', previewElement:'#preview1'}">
</p>
<em id="preview1" style="display:inline-block; padding:1em;">COLOR</em>
<p>
Color picker using onInput event handler:
<input data-jscolor="{value:'rgba(242,90,233,0.9)'}", onInput="update(this.jscolor)">
</p>
<em id="preview2" style="display:inline-block; padding:1em;">background</em>
<em id="preview3" style="display:inline-block; padding:1em;">background color</em>
<script>
function update(colorpicker) {
document.getElementById('preview2').style.background = colorpicker.toBackground()
document.getElementById('preview3').style.backgroundColor = colorpicker.toRGBAString()
}
jscolor.trigger('input');
</script>
输出
选择颜色后显示颜色预览。
带有事件处理程序的颜色选择器将显示背景颜色和不透明度
以上所有的例子我们都是通过编程来完成的，也有一些库用于这些拾色器：
- 扁平取色器
- Bootstrap拾色器
- React Color
- Vue Swatches
- Flexi Color Picker
- HuuBee
- 颜料Joe
- 谱系，等等
结语
至此，我们结束了对 "JavaScript选色器 "这一主题的讨论。我们已经看到了什么是JavaScript选色器以及它的语法。我们还看到了许多例子，这些例子会让你很容易理解。jscolor.js是所有例子中的通用脚本。
所以一定要理解jscolor.js文件，这样任何要做的改变都会很容易理解。我们也看到了一些可以直接安装的颜色采集器库。另外，我们还有一些浏览器或脚本应用程序的扩展，可以帮助我们在一行中添加颜色采集器。JavaScript取色器还支持许多内置的主题，如bootstrap、material。内置主题可以通过覆盖SASS变量和使用任何Theme Studio应用程序来定制或创建新的主题。
