jQuery顏色選擇器插件

Question

我在我的Web應用程序中使用了這個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接受＃個字符串（＃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/示例）。