jquery颜色选择器插件

jquery color picker plugin

本文关键字：插件 选择器 颜色 jquery      更新时间：2023-09-26

我在我的 Web 应用程序中 http://www.eyecon.ro/colorpicker/使用这个 jquery 颜色选择器插件。一切都很完美，但是当我尝试在调色板中设置原始颜色时 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。我什至没有收到警报消息在之前显示。

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

谢谢！

似乎onBeforeShow不会在平面模式下触发。

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

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

请注意，在 Firefox 中，$("#ncolor"(.css("background-color"( 返回一个 rgb(，，( 格式的字符串。 color接受 # 字符串 (#00ff00( 或像这样的 RGB 对象 {r： 0， g： 255， b： 0}

因此，您可能需要先进行一些转换。

此外，在您的代码中，每次单击时都会调用.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/示例(。

相关文章：