Question

我想创建一个颜色选择器，但它需要像这样水平 http://jqueryui.com/demos/slider/ 它需要是一个可以滚动所有颜色的水平滑块。我试图将它基于jquery ui滑块。

有人从网上知道这方面的任何例子吗？或者可以告诉我该怎么做？

我在想滑块设置的距离说50％我需要将该值转换为颜色值。

0％距离为白色，100％为黑色。

注意：它必须是1个滑块，其范围可以是all颜色，并且颜色必须是平滑过渡而不是所有randomed。

喜欢这张图片： enter image description here 但它需要在其中加入白色和黑色。

Answer 1

您可以将HTML颜色表示为十六进制值。考虑到这一点，我们可以创建一个从#000000到#FFFFFF（或十进制为0到16777215）的滑块：

$("#slider").slider({
    min: 0,
    max: 16777215,
    slide: function (event, ui) {
        var hex = "#" + ui.value.toString(16);
        $("#color").css("background-color", hex);
    }
});

请注意，要使其可远程使用，您必须拥有一个非常长的滑块。为了更好地理解它的工作原理，请使用键盘箭头而不是鼠标来滑动颜色。

示例： http://jsfiddle.net/4extL/46/

Answer 2

对于颜色选择器，有很多jQuery UI示例here。他们甚至有一些例子可以滚动浏览所有颜色。希望这会有所帮助。

Answer 3

我不认为这是可能的。我建议使用众多jQuery colorpicker插件中的一个。或者你可以看一下这个jQuery UI示例 - 不完全是你想要的，但确实使用了jQueryUI滑块：http://jqueryui.com/demos/slider/#colorpicker

jQuery UI颜色选择器问题

3 个答案: