如何为Widget添加颜色选择器？

我在将wpColorPicker添加到小部件时遇到一些问题。有人有工作样品吗？它只在我单击“保存”或重新加载页面时起作用，但当我将新小部件拖动到该区域时，它将不会激活。有人有什么想法吗？下面是我的代码。

class SampleWidget extends WP_Widget 
    {

        /**
         * Register widget with WordPress.
         */
        public function __construct () 
        {
            parent::__construct
            (
                \'sample_widget\',
                \'Sample\',
                array( \'description\' => __( \'A sample description\'), )
            );  

            add_action( \'admin_enqueue_scripts\', array( &$this, \'admin_enqueue_scripts\' ) );
        }

        public function admin_enqueue_scripts ( $hook_suffix )
        {
            if ( $hook_suffix != \'widgets.php\' ) return;

            wp_enqueue_style( \'wp-color-picker\' );          
            wp_enqueue_script( \'wp-color-picker\' ); 
        }

        /**
         * Front-end display of widget.
         *
         * @see WP_Widget::widget()
         *
         * @param array $args     Widget arguments.
         * @param array $instance Saved values from database.
         */
        public function widget( $args, $instance ) 
        {
            extract( $args );

            echo $before_widget;
            echo $after_widget;
        }

        /**
         * Sanitize widget form values as they are saved.
         *
         * @see WP_Widget::update()
         *
         * @param array $new_instance Values just sent to be saved.
         * @param array $old_instance Previously saved values from database.
         *
         * @return array Updated safe values to be saved.
         */
        public function update( $new_instance, $old_instance ) 
        {
            $instance = array();
            return $instance;
        }

        /**
         * Back-end widget form.
         *
         * @see WP_Widget::form()
         *
         * @param array $instance Previously saved values from database.
         */
        public function form ( $instance ) 
        {
            ?>
            <p>  
                <label for="<?php echo $this->get_field_id( \'background-color\' ); ?>">Achtergrondkleur:</label>
                <input type="text" id="<?php echo $this->get_field_id( \'background-color\' ); ?>" name="<?php echo $this->get_field_name( \'background-color\' ); ?>" value="<?php echo esc_attr( $backgroundColor ); ?>" />                              
            </p>

            <script type="text/javascript">
            jQuery(document).ready(function($){
                $(\'#<?php echo $this->get_field_id( \'background-color\' ); ?>\').wpColorPicker();
            });
            </script>
            <?php
        }
    }

<?php function load_color_picker_style() { wp_enqueue_style( \'wp-color-picker\' ); } add_action(\'admin_print_scripts-widgets.php\', \'load_color_picker_script\'); add_action(\'admin_print_styles-widgets.php\', \'load_color_picker_style\'); ?> ///Javascript jQuery(document).ready(function($){ function updateColorPickers(){ $(\'#widgets-right .wp-color-picker\').each(function(){ $(this).wpColorPicker({ // you can declare a default color here, // or in the data-default-color attribute on the input defaultColor: false, // 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: [\'#ffffff\',\'#000000\',\'#ff7c0b\'] }); }); } updateColorPickers(); $(document).ajaxSuccess(function(e, xhr, settings) { if(settings.data.search(\'action=save-widget\') != -1 ) { $(\'.color-field .wp-picker-container\').remove(); updateColorPickers(); } }); });

Using tabs in admin widgets

更新：我应该指出，我在插件/主题选项页面上测试了下面的方法，效果非常好。事实上，我还能够包括jQuery cookie插件，以保留页面加载之间的当前选项卡选择（很好！）。当您有多个小部件选项时，尝试向管理小部件添加选项卡以减少表单占用空间。我正在使用WordPress附带的jQuery UI选项卡。以下是我迄今为止在插件中编写的代码。http://pastebin.com/fe4wdBcp当小部件被拖动到小部件区域时，选项卡似乎呈现为OK，但您无法单击查看第二个选项卡。更糟糕的是，如果刷新窗口小部件页面，

相关推荐

Using tabs in admin widgets