web-dev-qa-db-ja.com

カラーピッカーで色の変化を聞く方法は？

カラーピッカーの色が変わるたびに、カスタムjquery関数を実行しようとしています。カラーピッカーはWPコアの一部として含まれています。私はJSコードを見てきましたが、色を更新するきっかけが何なのかわかりません。

私はいくつかのクラスを聞いてみました、そしてまたテキスト入力（色の16進数の値を保持しているもの）の変更を聞いていましたが、運が悪いです。

誰かが前にこれをやったことがありますか？

widgetsjqueryadmincore
3
gdaniel

私は私自身の質問に答えるのは嫌いですが、うまくいけばこれは同様の問題を抱えている誰かに役立つことができます：

Wordpressはアイリスカラーピッカーを使用しています。 http://automattic.github.io/Iris/#

Wordpressは、Irisのデフォルト設定でjqueryウィジェットも作成します。ファイルはwp-admin/js/color-picker.jsにあります。

最初は直接iris（）に値を渡していましたが、これはうまくいきましたが、それはwordpressウィジェットを上書きします。

ウィジェットについて知った後、私は次のように書きました：

$(".wp-color-picker").wpColorPicker(
  'option',
  'change',
  function(event, ui) {
    //do something on color change here
  }
);

WpColirPickerは、changeイベントに対するカスタム関数を受け入れます。そのため、最初にデフォルトのアクションが実行されてから、独自のアクションを追加できます。

6
gdaniel

gdaniel が彼の答えで言っていたように、WordPressは Iris カラーピッカーを使います。 change および clear optionsを使用して、コールバックをwpColorPickerプラグインに渡すことができます。 change-callbackは "Clear"ボタンによるフィールドのクリーニングを除くすべての変更を処理します。そのためには、クリアコールバックを使用してください。

jQuery('.wp-color-picker').wpColorPicker({
    /**
     * @param {Event} event - standard jQuery event, produced by whichever
     * control was changed.
     * @param {Object} ui - standard jQuery UI object, with a color member
     * containing a Color.js object.
     */
    change: function (event, ui) {
        var element = event.target;
        var color = ui.color.toString();

        // Add your code here
    },

    /**
     * @param {Event} event - standard jQuery event, produced by "Clear"
     * button.
     */
    clear: function (event) {
        var element = jQuery(event.target).siblings('.wp-color-picker')[0];
        var color = '';

        if (element) {
            // Add your code here
        }
    }
});

また、チェンジコールバックでelement.valueを使用すると、新しい値ではなく古い値が取得されます。

0
kapai1890