颜色拾取器

2021-08-30

前端

志向是天才的幼苗,经过热爱劳动的双手培育,在肥田沃土里将成长为粗壮的大树。——苏霍姆林斯基

官网:https://www.eyecon.ro/colorpicker/

效果:

image-20210830202132668

代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<head>
<link media="screen" rel="stylesheet" href="admin/plugins/colorpicker/css/colorpicker.css" type="text/css"/>
</head>
<body>
<div>
<div id="tag-color-picker">
<input type="text" id="tag-color-input')"/>
</div>
</div>
<script src="/admin/plugins/colorpicker/jquery.js"></script>
<script src="/admin/plugins/colorpicker/colorpicker.js"></script>
<script>
let tagColorInput = $('#tag-color-input')
tagColorInput.css('backgroundColor', '#ff0000');
$('#tag-color-picker').ColorPicker({
color: detail.tagColor || '#0000ff',
onShow: function (colpkr) {
$(colpkr).fadeIn(500);
return false;
},
onHide: function (colpkr) {
$(colpkr).fadeOut(500);
return false;
},
onChange: function (hsb, hex, rgb) {
let color = '#' + hex
tagColorInput.css('backgroundColor', color);
tagColorInput.val(color);
}
});
</script>
</body>

下载:https://www.eyecon.ro/colorpicker/colorpicker.zip