Javascript 如何将颜色选择器添加到我的绘图应用程序

在我的绘图应用程序中，我只能输入某些颜色，但我希望有一个颜色选择器，例如，我已经尝试添加大量颜色，但它太多，并且与我的工具栏重叠

<div id="colors">
    <div class="swatch active" style="background-color: black"></div>
    <div class="swatch" style="background-color: grey"></div>
    <div class="swatch" style="background-color: red"></div>
    <div class="swatch" style="background-color: green"></div>
    <div class="swatch" style="background-color: blue"></div>
    <div class="swatch" style="background-color: yellow"></div>
    <div class="swatch" style="background-color: orange"></div>
    <div class="swatch" style="background-color: indigo"></div>
    <div class="swatch" style="background-color: violet"></div>
    <div class="swatch" style="background-color: #FF0080"></div>
</div>

---

这是。请与我的代码相关，这样它肯定会工作。

我只会使用一个插件

这个看起来很有希望

您的代码可能与页面上的示例代码类似

$('#colorSelector').ColorPicker({
    color: '#0000ff',
    onShow: function (colpkr) {
        $(colpkr).fadeIn(500);
        return false;
    },
    onHide: function (colpkr) {
        $(colpkr).fadeOut(500);
        return false;
    },
    onChange: function (hsb, hex, rgb) {
        $('#colorSelector div').css('backgroundColor', '#' + hex);
    }
});

---

下面是关于如何让插件工作的更多说明

请阅读-不要编辑问题文本说它已修复。此插件需要jQuery，您还需要包含jQuery文件。确保您在html的顶部包含了这些文件，并且这些文件彼此之间位于正确的位置。