Question

我在Wordpress插件中使用iris colour picker。我可以让它显示然后显示相关输入中的点击值就好了，但是有问题...

我无法摆脱这个盒子！当你点击它时，有没有办法让盒子消失？

我正在使用这个简单的调用来调用iris -

jQuery(document).ready(function($){
    $('.colour-picker').iris();
});

常识告诉我，我应该能够将此作为选项传递给.iris()函数以满足此特定需求，但我无法在docs中找到对此类选项的任何引用。

我找到的壁橱是你可以调用hide方法，但它列出的所有方法都是$(element).iris('hide');，根本没有解释如何将它链接到调用的iris iris。 1}}在第一步，或如何检测用户是否已点击iris

有没有人使用iris并知道如何实现我的目标？感谢。

附加 - 这是JS fiddle，用于演示所述问题。调用{{1}}的JS可以在JS部分的底部找到。

Answer 1

您可以尝试这样的事情：

jQuery(document).ready(function ($) {    
    $('.colour-picker').iris();    
    $(document).click(function (e) {
        if (!$(e.target).is(".colour-picker, .iris-picker, .iris-picker-inner")) {
            $('.colour-picker').iris('hide');
            return false;
        }
    });
    $('.colour-picker').click(function (event) {
        $('.colour-picker').iris('hide');
        $(this).iris('show');
        return false;
    });
});

Updated fiddle

Answer 2

为了它的价值，你不需要直接打电话给虹膜。从3.5开始，WordPress核心定义了一个名为wpColorPicker（）的包装器方法，该方法实现了具有一些附加功能的虹膜：

http://make.wordpress.org/core/2012/11/30/new-color-picker-in-wp-3-5/

这个包装器负责为你隐藏和显示选择器，并跟踪各个实例。

如果您正在构建WP插件，最好使用他们的包装器，因为他们将来会添加新功能。另外，如果他们决定使用虹膜以外的其他库，您的插件代码可能会中断。包装器可以防止这种情况发生。

Answer 3

您可以尝试以下

$('input:not(.colour-picker)').iris('hide');

当你点击它时如何关闭虹膜颜色选择器？

3 个答案: