1

我正在尝试在项目中使用 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 文档，该方法option确实接受一个对象。我在这里缺少什么？

还有jsFiddle

4

1 回答 1

1

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

target.slider(options);
于 2013-08-15T07:40:42.780 回答