四时宝库

JSColor插件

下载地址:http://jscolor.com/download.php

安装方法:

1 加载jsColor插件

<script type="text/javascript" src="jscolor/jscolor.js"></script>

2 增加文本表单

<input class="color">

实例1:

<script type="text/javascript" src="jscolor/jscolor.js"></script>
Click here: <input class="color" value="66ff00">

实例2:

<script type="text/javascript" src="jscolor/jscolor.js"></script>
<p> This field can be left empty: <input class="color {required:false}">
<p> This field accepts any value: <input class="color {adjust:false}">
<p> Hash symbol: <input class="color {hash:true}">
<p> Hash symbol, lowercase: <input class="color {hash:true,caps:false}">

实例3:

<script type="text/javascript" src="jscolor/jscolor.js"></script>
HSV mode: <input class="color {pickerMode:'HSV'}">
HVS mode: <input class="color {pickerMode:'HVS'}">

以上实例均来自:http://jscolor.com/

web端颜色选择器

零依赖、多主题、扁平化的开源Web端颜色选择器。没有依赖关系，没有jQuery。与所有CSS框架兼容，例如Bootstrap。支持alpha channel，rgba，hsla，hsva等等！

https://github.com/Simonwep/pickr

<!--使用自己喜欢的主题 -->
<link rel="stylesheet" href="/pickr/dist/themes/classic.min.css"/>
<link rel="stylesheet" href="/pickr/dist/themes/monolith.min.css"/>
<link rel="stylesheet" href="/pickr/dist/themes/nano.min.css"/>
<!-- 注意：es5的版本文件较大 -->
<script src="/pickr/dist/pickr.min.js"></script>
<script src="/pickr/dist/pickr.es5.min.js"></script>
const pickr = Pickr.create({
el: '.color-picker',
theme: 'classic',
swatches: [
'rgba(244, 67, 54, 1)',
'rgba(233, 30, 99, 0.95)',
'rgba(156, 39, 176, 0.9)',
'rgba(103, 58, 183, 0.85)',
'rgba(63, 81, 181, 0.8)',
'rgba(33, 150, 243, 0.75)',
],
components: {
// 主要组件
preview: true,
opacity: true,
hue: true,
// 输入输出配置
interaction: {
hex: true,
rgba: true,
hsla: true,
hsva: true,
cmyk: true,
input: true,
clear: true,
save: true
}
}
});
//保存当前颜色并在回车时关闭弹出窗口
pickr.on('init', instance => {
// 获取实际输入元素
const {result} = instance.getRoot().interaction;
// 监听所有键盘事件
result.addEventListener('keydown', e => {
// 检测用户在键盘上按了“回车”键
if (e.key === 'Enter') {
instance.applyColor(); // 保存当前选定的颜色
instance.hide(); // 隐藏
}
}, {capture: true});
});