颜色拾取器

阿超

发布于 2022-08-17 19:54:24

1.3K0

发布于 2022-08-17 19:54:24

文章被收录于专栏：快乐阿超快乐阿超

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

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

效果：

代码：

<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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2021-08-30，如有侵权请联系 cloudcommunity@tencent.com 删除

https