Jquery UI滑块选项对象

Question

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

我做了以下事情：

HTML

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

我将滑块选项作为数据属性放在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（“选项”，选项）。只需使用选项对象作为参数创建滑块：

target.slider(options);