我在WordPress定制程序中获取Slider UI的价值时遇到问题。
这是控制类:
class styler_slider extends WP_Customize_Control{
public $type = 'slider';
public function enqueue(){
wp_enqueue_script('customizer-slider', plugins_url('js/slider-ui.js', __FILE__), array('jquery-ui-slider'), '1.0', true);
wp_register_style('customizer-slider-styles', plugins_url('css/slider-ui.min.css', __FILE__));
wp_enqueue_style('customizer-slider-styles');
}
public function render_content(){
?>
<label>
<span class="customize-control-title"><?php echo esc_html($this->label); ?></span>
<div class="slider"></div>
<input class="slider-input" type="text" />
</label>
<?php
}
}
我想使用以下代码获取价值:
wp.customize('body_font_size_setting', function(value){
value.bind(function(newval){
$('body').css('font-size', newval);
});
});
但我不知道如何更改滑块ui的效果后获取新值。
我找到了custom-controls.js并尝试添加如下代码:
api.SliderControl = api.Control.extend({
ready: function() {
var control = this,
slider = this.container.find('.nfinity-slider-input');
slider.val( control.setting() ).slider({
change: function( event, ui ) {
control.setting.set( ui.value );
}
});
}
});
而且它也不起作用。 Nvm,它将是插件,因此我无法在WordPress文件中实现任何功能。当我尝试在脚本文件中执行相同操作时,出现错误:Uncaught TypeError:无法调用未定义的方法“ extend”。
所以我的问题是。如何使用wp.customize从Slider UI传递值以获取访问权限?我想我应该使用to_json()函数,但是我不知道该怎么做。
谢谢你的帮助!
最佳答案
好的,我们只需要使用此函数运行滑块(文件名为:slider-ui.js):
(function($){
var api = wp.customize;
api.SliderControl = api.Control.extend({
ready: function() {
var control = this,
picker = this.container.find('.slider');
picker.val(control.setting()).slider({
change: function(event, ui){
control.setting.set(ui.value);
}
});
}
});
api.controlConstructor['slider'] = api.SliderControl;
});
})(jQuery);
并使用以下命令将其加载到我们的控件类中:
public function enqueue(){
wp_enqueue_script('customizer-slider', plugins_url('js/slider-ui.js', __FILE__), array('jquery-ui-slider'), '1.0', true);
wp_register_style('customizer-slider-styles', plugins_url('css/slider-ui.min.css', __FILE__));
wp_enqueue_style('customizer-slider-styles');
}
这样,我们可以通过以下代码获取当前滑块值:
wp.customize('body_font_size_setting', function(value){
value.bind(function(newval){
$('body').css('font-size', newval);
});
});
我希望这会有所帮助,因为我花了大约两个小时才找到解决方案。 :)
关于jquery - WordPress Customizer中的滑块UI,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/19743014/