2

我在 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 的更改效果后获得新值。

我找到了 customize-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 文件中实现任何内容。当我尝试在我的脚本文件中执行相同操作时，我收到错误：未捕获的类型错误：无法调用未定义的方法“扩展”。

所以我的问题是。如何使用 wp.customize 从 Slider UI 传输值以访问它们？我想我应该使用 to_json() 函数，但我不知道该怎么做。

谢谢你的帮助！

4

1 回答 1

2

好的，我们只需要使用这个函数运行滑块（文件名为：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);
        });
    });

我希望它会对某人有所帮助，因为我花了大约两个小时才找到解决方案。:)

于 2013-11-02T16:07:29.373 回答