我在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/

10-12 12:41
查看更多