5

私はiris colour pickerWordpressのプラグインで使用しています。私はそれを表示して、関連する入力でクリックされた値を表示することができますが、問題があります...

箱が手放せない！クリックしたときにボックスを非表示にする方法はありますか?

irisこの単純な呼び出しを使用して呼び出しています-

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

常識では、この特定のニーズのためにこれをオプションとして関数に渡すことができるはずですが、 docs.iris()でそのようなオプションへの参照を見つけることができません。

私が見つけたクローゼットは、メソッドを呼び出すことができるということですがhide、リストされているのはすべてであり、最初のペースで呼び出された特定の入力にリンクする方法、またはユーザーがクリックして離れたかどうかを検出する方法$(element).iris('hide');についてはまったく説明されていませんirisからiris

iris私がやろうとしていることを達成する方法を知っている人はいますか? ありがとう。

追加-説明されている問題を示すJS フィドルを次に示します。呼び出す 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

それだけの価値があるため、アイリスを直接呼び出す必要はありません。3.5 の時点で、WordPress コアは wpColorPicker() と呼ばれるラッパー メソッドを定義しており、いくつかの追加機能を備えたアイリスを実装しています。

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

このラッパーは、ピッカーの表示と非表示をすべて処理し、個々のインスタンスを追跡します。

WP プラグインを構築している場合は、将来的に新しい機能が追加されるため、ラッパーを使用することをお勧めします。さらに、アイリス以外の別のライブラリを使用することにした場合、プラグイン コードが破損する可能性があります。ラッパーはそれを防ぎます。

于 2014-01-10T17:33:52.113 に答える
-1

以下のように試すことができます

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