Question

$('.color-box').colpick({
    colorScheme:'dark',
    layout:'rgbhex',
    color:'ff8800',
    onSubmit:function(hsb,hex,rgb,el) {
        $(el).css('background-color', '#'+hex);
        $(el).colpickHide();
    }
})
.css('background-color', '#ff8800');

如您所见，我可以使用颜色设置colpick的默认颜色：ff8800。

但有没有办法在显示颜色选择器时动态设置颜色？

我的意思是，如果我使用一个按钮来触发这个colpick ('#test1').colpick(); test1已经有了背景颜色，我想做一些像 color: ('#test1').css(background-color)而不是使用colpick的默认颜色，即color: ('#test1').css(background-color)。

顺便说一下，有人可以告诉我颜色是什么：.css('background-color', '#ff8800')是什么意思？这是一个连锁函数吗？

谢谢！

Answer 1

基于与OP的讨论。

应该是这样的。现在我使用data-color来获取颜色，因为如果你得到background-color css属性，那么它将是rgba格式的philip100。（但$.colpick.rgbToHex(rgb)函数可以做到这一点。）

$('.cpicker').click(function() {
    var color = $(this).data('color');
        $('#picker').colpick({
    //Any other options
    color: color

    });
});

HTML

<button class="cpicker" style="background-color: #f00;" data-color="#f00">Red</button>
<button class="cpicker" style="background-color: #0f0;"   data-color="#0f0">Green</button>
<button class="cpicker" style="background-color: #00f;" data-color="#00f">Blue</button>

<div id="picker"></div>

Answer 2

$('.cpicker').each(function() {
    var $box = $(this);
    var $color = $(this).data('color');
        $box.colpick({
             colorScheme:'dark',
             layout:'hex',
             color: $color,
             onSubmit:function(hsb,hex,rgb,el) {
                    $(el).css('background-color', '#'+hex);
                    $(el).val(hex);                 
                    $(el).colpickHide();
                }

    });
});

动态设置colpick默认颜色

2 个答案: