拾色器和窗口小部件

Question

現在，我正在使用Wordpress中的顏色選擇器和窗口小部件。選擇顏色並提交之後。我的顏色選擇器更改爲文本框。我怎麼解決這個問題？

我的代碼如下。

在形式上功能：

$instance   = wp_parse_args((array) $instance, array('background_color' => '#e3e3e3')); 
$background_color = isset($instance['background_color']) ? esc_attr($instance['background_color']) : ''; 

<label for="<?php echo $this->get_field_id('background_color'); ?>" style="display:block;"><?php _e('Title Background Color:'); ?></label> 
<input class="widefat color" id="<?php echo $this->get_field_id('background_color'); ?>" name="<?php echo $this->get_field_name('background_color'); ?>" type="text" value="<?php echo esc_attr($background_color); ?>" /> 
<div class="colorpicker"></div> 

我的js文件。

jQuery(document).ready(function(){ 

"use strict"; 

//This if statement checks if the color picker widget exists within jQuery UI 
//If it does exist then we initialize the WordPress color picker on our text input field 

if(typeof jQuery.wp === 'object' && typeof jQuery.wp.wpColorPicker === 'function'){ 
    jQuery('.color').wpColorPicker(); 
} 

else { 
    //We use farbtastic if the WordPress color picker widget doesn't exist 
    jQuery('.colorpicker').farbtastic('.color'); 
} 
}); 

在功能更新

$instance['background_color'] = $new_instance['background_color']; 

Answer 1

我只是找到了解決辦法。如下所示更改js文件。

//Set up the color pickers to work with our text input field 
jQuery(document).ajaxComplete(function(){ 

"use strict"; 

//This if statement checks if the color picker widget exists within jQuery UI 
//If it does exist then we initialize the WordPress color picker on our text input field 

if(typeof jQuery.wp === 'object' && typeof jQuery.wp.wpColorPicker === 'function'){ 
    jQuery('.color').wpColorPicker(); 
} 

else { 
    //We use farbtastic if the WordPress color picker widget doesn't exist 
    jQuery('.colorpicker').farbtastic('.color'); 
} 

}）;

Answer 2

對不起，以上回答。這是錯誤的，當我創建新的小部件時，它會顯示兩個顏色選擇器。

現在，我解決了這個問題。 （From Oren comment，http://zourbuth.com/archives/877/how-to-use-wp-color-picker-in-widgets/）

jQuery(document).ready(function() { 
jQuery('.color').wpColorPicker(); 
jQuery(document).ajaxComplete(function() { 
jQuery('.color').wpColorPicker(); 
}); 
});