Question

在我的绘图应用程序中，我只能使用某些颜色，但是我希望有一个颜色选择器，如this one，我已经尝试过添加颜色，但是它太多而且重叠我的工具栏。

<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>

这是my jsfiddle。请关注我的代码，这样一定会有用。

Answer 1

我只想使用一个插件。

这个看起来很有希望http://www.eyecon.ro/colorpicker/#about

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

$('#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);
    }
});

以下是有关使插件正常工作的更多说明http://www.eyecon.ro/colorpicker/#implement

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

1 个答案: