Question

我已经将Wordpress Core颜色选择器（虹膜）添加到我开发的小部件中，但是当您编辑颜色时，没有触发任何更改。因此，除非您在另一个输入字段中触发更改，否则自定义程序的iframe（实时预览）不会更新。

Javascript以使颜色选择器

var myOptions = {
// you can declare a default color here,
// or in the data-default-color attribute on the input
defaultColor: '#000',
// a callback to fire whenever the color changes to a valid color
change: function(event, ui){

},
// a callback to fire when the input is emptied or an invalid color
clear: function() {},
// hide the color picker controls on load
hide: true,
// show a group of common colors beneath the square
// or, supply an array of colors to customize further
palettes: true
};

// Add Color Picker to all inputs that have 'color-field' class
$('.color-field').wpColorPicker(myOptions);

注意：

我测试了将以下代码添加到更改回调中。

change: function(event, ui){
    $(this).trigger('change'); 
},

当用户点击颜色选择器时，这将触发更改并更新iframe，但它会在保存颜色值之前发生。

在保存所选颜色后，有没有人知道如何访问该事件？

我将不胜感激。

谢谢！

Answer 1

我不确定这是否是最佳解决方案，但它似乎是解决问题的解决方案。

 add_action( 'admin_footer-widgets.php', array( $this, 'print_scripts' ), 9999 );

public function print_scripts() {
    ?>
    <script>
        ( function( $ ){

            function initColorPicker( widget ) {
                widget.find( '.color-field' ).wpColorPicker( {
                    change: _.throttle( function() { // For Customizer
                        $(this).trigger( 'change' );
                    }, 3000 )
                });
            }

            function onFormUpdate( event, widget ) {
                initColorPicker( widget );
            }

            $( document ).on( 'widget-added widget-updated', onFormUpdate );

            $( document ).ready( function() {
                $( '#widgets-right .widget:has(.color-field)' ).each( function () {
                    initColorPicker( $( this ) );
                } );
            } );



        }( jQuery ) );

    </script>
    <?php
}

我相信这里的解决方法是你要激活（＆＃39; .color-field＆＃39;）。wpColorPicker（） - ＆gt; .on（＆＃39;添加小部件的小部件 - 更新＆＃39;）以及文档准备好的时候。

小部件中的Wordpress核心颜色选择器（虹膜） - 在wordpress自定义程序中编辑时刷新

1 个答案: