javascript - Jquery UI slider 选项对象

Question

我正在尝试在项目中使用 jQuery UI slider 。我需要创建具有不同选项的 slider ，并且我正在尝试使用 option 方法。

我已完成以下操作:

HTML

<div class="slider" data-a-orientation="vertical"></div>

我将 slider 选项作为数据属性放置在 HTML 中，然后使用 jQuery 检索它们

JS

init : function(element)
        {
            this.elem = element;
            this.$elem = $(element);
            // target element
            this.slider_target = this.$elem.find('.slider');
        
        /*
         * Get all the data-attr from the .slider target element    
         * if there is any
         * loop over all and create an object of options. Note all our data attr 
         * are -a- separated. 
         */
        var slider_opt_obj = {};
        $.each(this.slider_target.data(), function(key, val){
            // note ! ~ each of the data attributes are : data-a-attribute_title 
            // we need to remove a .. the - character is already removed
            // this was added to stop any overwriting by the jQuery ui plugin
            var key_lwr = key.toLowerCase();
            slider_opt_obj[key_lwr.slice(1)] = val;
        });
        
        // create the sliders
        this.sliderCreate( this.slider_target, slider_opt_obj);
    },
    sliderCreate : function(target, options)
    {
        var self = this;
        
        if( !self.objectEmpty(options) ) {
            // does not work throws error
            target.slider("option", options);
        } else  {
            // no options
            target.slider();
        }
    }

这一行

target.slider("option", options);

导致以下错误

Error: cannot call methods on slider prior to initialization; attempted to call method 'option'

根据jQuery ui docs方法 option 确实接受一个对象..我在这里缺少什么？

还有jsFiddle

Answer 1

在创建 slider 之前不能调用 .slider("option", options)。只需使用您的选项对象作为参数创建 slider 即可:

target.slider(options);