Question

我在我的网络应用程序中使用了这个jquery颜色选择器插件http://www.eyecon.ro/colorpicker/。一切都很完美，但当我尝试在 onBeforeShow 的调色板中设置原始颜色时，它无法正常工作。

HTML

<div id="ncolor"></div><div id="ncolorpicker"><span id="ncpicker"></span></div>

Jquery的

$("#ncolor").click(function(){
    var a = $("#ncolor").css("background-color");
    $("#ncolorpicker").show();
    $("#ncpicker").show().ColorPicker({
    flat: true,
    onBeforeShow: function () {
                  alert("yes");
                  $(this).ColorPickerSetColor(a);
    },
    });
});

我正在使用 onChange ， onSubmit 两者都有效，但不适用于 onBeforeShow 。我甚至没有在 onBeforeShow 中收到警告消息。

我需要的是在显示之前我想在调色板中设置 #ncolor 的背景颜色。为什么它甚至没有进入 onBeforeShow ？有谁能指导我？

谢谢！

Answer 1

似乎onBeforeShow不会在平面模式下启动。

在平面模式下，您可以使用color属性设置初始颜色：

.ColorPicker({flat: true, color: '#00ff00'});

请注意，在Firefox中，$（“＃ncolor”）。css（“background-color”）返回rgb（,,）格式的字符串。 color接受＃strings（＃00ff00）或rgb对象，如{r：0，g：255，b：0}

所以你可能需要先做一些转换。

此外，在您的代码中，您每次点击都会调用.ColorPicker()。这是不必要的。

相反，您可以调用.ColorPicker()一次来设置ColorPicker。然后点击您只需要拨打.ColorPickerSetColor()和您的显示/隐藏功能。

例如：

$(document).ready(function(){
    $("#ncpicker").ColorPicker({
        flat: true,
        // Initial colour here:
        color: '#0000ff'
    });
    $("#ncolor").click(function(){
        // Use your dynamic colour here - may change each time:
        $('#ncpicker').ColorPickerSetColor('#00ffff');

        // Put here your showing/hiding functionality.
    });
});

此处的简单示例：http://jsfiddle.net/jfrej/853bv/ （显示和隐藏取自http://www.eyecon.ro/colorpicker/示例）。

jquery颜色选择器插件

1 个答案: