5

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

那我就不能摆脱盒子了！当您单击它时，有没有办法使该框消失？

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

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

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

我发现的壁橱是您可以调用一个hide方法，但它列出的只是$(element).iris('hide');，根本没有解释如何将它链接到iris第一步调用的特定输入，或者如何检测用户是否点击离开从iris

有谁使用iris并知道我如何实现我想要做的事情？谢谢。

附加- 这是一个演示所描述问题的JS fiddle。调用的 JSiris可以在 JS 部分的底部找到。

4

3 回答 3

9

你可以尝试这样的事情：

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;
    });
});

更新的小提琴

于 2013-10-30T14:58:48.257 回答
1

对于它的价值，您不需要直接调用 iris 。从 3.5 开始，WordPress 核心定义了一个名为 wpColorPicker() 的包装器方法，它使用一些附加功能实现了 iris：

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

This wrapper takes care of all the hiding and showing of the picker for you, and keeps track of individual instances.

If you're building a WP plugin, it's probably better to use their wrapper, as they will be adding new features to it in the future. Plus, if they decide to go with another library other than iris, your plugin code will likely break. The wrapper will prevent that from happening.

于 2014-01-10T17:33:52.113 回答
-1

你可以尝试如下

$('input:not(.colour-picker)').iris('hide');
于 2013-10-30T13:17:48.770 回答