这个颜色选择器中的彩虹条在哪里?为什么可以'我只是点击一种颜色

where is the rainbow bar in this colorpicker and why can't i just click a color?

本文关键字：颜色 一种 彩虹 选择器 在哪里 为什么      更新时间：2023-09-26

我正在尝试使用http://www.eyecon.ro/colorpicker/构建一个颜色选择器，我遇到了一些困难。我的代码：

<div style="width: 50px; height: 50px; border: 1px solid black"></div>
<script>
$('div').ColorPicker({
    onShow: function (colpkr) {
        $(colpkr).fadeIn(500);
        return false;
    },
    onHide: function (colpkr) {
        $(colpkr).fadeOut(500);
        return false;
    },
    onChange: function (hsb, hex, rgb) {
         $('div').css('backgroundColor', '#' + hex);
    }
});
</script>

JS Fiddle：http://jsfiddle.net/zu5uv650/3/

在JS Fiddle右侧的彩虹条（即http://www.eyecon.ro/colorpicker/显示）没有出现在我面前。有什么想法吗？

此外，似乎我必须点击并拖动颜色选择器才能工作。我不能只是点击然后让它选择我点击的颜色。有什么想法吗？

您的工作中缺少layout.css文件。我把它添加到小提琴中，还把代码改写为：

HTML

<div id="colorSelector">
    <div style="background-color: #0000ff"></div>
</div>

JavaScript

$('#colorSelector').ColorPicker({
    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);
    }
});

你仍然不能只点击并选择一种颜色，你必须先拖动它，这是插件本身的限制，它应该由开发人员修复。

相关文章：