admin管理员组文章数量:1122846
I develop my custom widget with setting where I can set up custom color for the widget. I use this code to initialize wpColorPicker instead of default text input in form() method of Widget class:
jQuery(document).ready(function($){
$('#<?php echo $this->get_field_id( 'bg_color_1' ); ?>').wpColorPicker();
});
All works great but if you are trying change the color in Theme Customizer after changing value nothing happens: the Save button still not active and site page not refreshing with the new color.
Previously trying for triggering change event, but not working:
$('#<?php echo $this->get_field_id( 'bg_color_1' ); ?>').wpColorPicker({
change: function(event, ui) {
$('#<?php echo $this->get_field_id( 'bg_color_1' ); ?>').change();
}
});
How to reload the page preview (trigger the event when value inside my input have been changed)?
I develop my custom widget with setting where I can set up custom color for the widget. I use this code to initialize wpColorPicker instead of default text input in form() method of Widget class:
jQuery(document).ready(function($){
$('#<?php echo $this->get_field_id( 'bg_color_1' ); ?>').wpColorPicker();
});
All works great but if you are trying change the color in Theme Customizer after changing value nothing happens: the Save button still not active and site page not refreshing with the new color.
Previously trying for triggering change event, but not working:
$('#<?php echo $this->get_field_id( 'bg_color_1' ); ?>').wpColorPicker({
change: function(event, ui) {
$('#<?php echo $this->get_field_id( 'bg_color_1' ); ?>').change();
}
});
How to reload the page preview (trigger the event when value inside my input have been changed)?
Share Improve this question asked Dec 27, 2015 at 16:24 Kolya KorobochkinKolya Korobochkin 5791 gold badge4 silver badges11 bronze badges 6 | Show 1 more comment2 Answers
Reset to default 0Try using the existing WordPress function to modify color palette like:
function my_mce4_options( $init ) {
$default_colours = '
"000000", "Black",
"993300", "Burnt orange",
"333300", "Dark olive",
"003300", "Dark green",
"003366", "Dark azure",
"000080", "Navy Blue",
"333399", "Indigo",
"333333", "Very dark gray",
"800000", "Maroon",
"FF6600", "Orange",
"808000", "Olive",
"008000", "Green",
"008080", "Teal",
"0000FF", "Blue",
"666699", "Grayish blue",
"808080", "Gray",
"FF0000", "Red",
"FF9900", "Amber",
"99CC00", "Yellow green",
"339966", "Sea green",
"33CCCC", "Turquoise",
"3366FF", "Royal blue",
"800080", "Purple",
"999999", "Medium gray",
"FF00FF", "Magenta",
"FFCC00", "Gold",
"FFFF00", "Yellow",
"00FF00", "Lime",
"00FFFF", "Aqua",
"00CCFF", "Sky blue",
"993366", "Brown",
"C0C0C0", "Silver",
"FF99CC", "Pink",
"FFCC99", "Peach",
"FFFF99", "Light yellow",
"CCFFCC", "Pale green",
"CCFFFF", "Pale cyan",
"99CCFF", "Light sky blue",
"CC99FF", "Plum",
"FFFFFF", "White"
';
$custom_colours = '
"e14d43", "Color 1 Name",
"d83131", "Color 2 Name",
"ed1c24", "Color 3 Name",
"f99b1c", "Color 4 Name",
"50b848", "Color 5 Name",
"00a859", "Color 6 Name",
"00aae7", "Color 7 Name",
"282828", "Color 8 Name"
';
$init['textcolor_map'] = '['.$default_colours.','.$custom_colours.']';
$init['textcolor_rows'] = 6; // expand colour grid to 6 rows
return $init;
}
add_filter('tiny_mce_before_init', 'my_mce4_options');
I hope this helps you out!
It's my same problem which solved with this code:
<?php
class my_widget extends WP_Widget
{
function __construct()
{
parent::__construct(__CLASS__, __('Title', TEXT_DOMAIN), array ( 'description' => __( 'Description', TEXT_DOMAIN ), ) );
//...
add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_scripts' ) );
add_action( 'admin_footer-widgets.php', array( $this, 'print_widget_scripts' ), 9999 );
}
public function enqueue_scripts( $hook_suffix ) {
if ( 'widgets.php' !== $hook_suffix ) {
return;
}
wp_enqueue_style( 'wp-color-picker' );
wp_enqueue_script( 'wp-color-picker' );
wp_enqueue_script( 'underscore' );
}
public function print_widget_scripts() {
?>
<script>
( function( $ ){
function initColorPicker( widget ) {
widget.find( '.color-picker' ).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() {
$( '.widget:has(.color-picker)' ).each( function () {
initColorPicker( $( this ) );
} );
} );
}( jQuery ) );
</script>
<?php
}
}
本文标签： widgetsHow to refresh Theme Customizer after change color inside wpColorPicker
版权声明：本文标题：widgets - How to refresh Theme Customizer after change color inside wpColorPicker? 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1736281319a1926282.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
wp.customize.previewer.refresh();in your JS to refresh to preview. ;) – Aristeides Commented Dec 27, 2015 at 22:14$(this).change();should be enough to work, but you should throttle it and you're probably running into the confusing WP widget javascript initialization issue anyway - see wordpress.stackexchange.com/a/212676/57034 for a working example using wpColorPicker... – bonger Commented Dec 28, 2015 at 20:36wp.customize.previewer.refresh();refreshing works, but WordPress still ignoring my new values in wpColorPicker inputs (they've updating via JS and this point is an issue with Customizer). – Kolya Korobochkin Commented Jan 2, 2016 at 20:53