Question

我正在尝试向jquery ui滑块添加一个函数/方法，我可以在滑块上添加另一个句柄。我现在有这样的滑块：

var initialValues = [180, 435, 1080, 1320]; // this gives me 4 slider handles
updateValue = function (ui) {
var hours = Math.floor(ui.value / 60);
var minutes = ui.value - (hours * 60);

if (hours.length == 1) hours = '0' + hours;
if (minutes.length == 1) minutes = '0' + minutes;
if (minutes == 0) minutes = '00';
if (hours >= 12) {
    if (hours == 12) {
        hours = hours;
        minutes = minutes + " PM";
    } else {
        hours = hours - 12;
        minutes = minutes + " PM";
    }
} else {
    hours = hours;
    minutes = minutes + " AM";
}
if (hours == 0) {
    hours = 12;
    minutes = minutes;
}
$(ui.handle).attr('data-value', hours + ':' + minutes);

};

$(".pct-slider").slider({
min: 0,
max: 1440,
step: 15,
range: false,
values: initialValues,
create: function (event, ui) {
    $.each( initialValues, function(i, v){
        updateValue({
            value: v,
            handle: $('.ui-slider-handle').eq(i) 
        });
    });
},
slide: function (event, ui) {
    var handleIndex = $('a', event.target).index(ui.handle),
        curr = ui.values[handleIndex],
        next = ui.values[handleIndex + 1] - 25,
        prev = ui.values[handleIndex - 1] + 25;

    if (curr > next || curr < prev) {
        return false;
    }

    updateValue(ui);
    positionSelects();
},
addValue: function( val ) {
        //Add your code here for testing that the value is not in the list
        this.options.values.push(val);
        this._refresh();
    },
removeValue: function( ) {
    this.options.values.pop( );
    this._refresh();
}

}）;

当我拨打$（＆＃34; .pct-slider＆＃34;）.slider（＆＃34; addHandle＆＃34;）时，我得到一个＆＃34;没有这样的方法＆＃39; addHandle＆＃39 ;对于滑块小部件实例＆＃34;。问题是什么，我需要做什么，所以我可以开始搞乱这个功能。

编辑我现在尝试拨打$（＆＃34; .pct-slider＆＃34;）.slider（＆＃34; addValue（1400）＆＃34;）我得到了没有这样的方法错误。我也在使用jquery ui 1.10.4。

Answer 1

在调用滑块之前将其放入。

(function ($) {
$.widget('my-namespace.customSlider', $.ui.slider, {
    addValue: function( val ) {
        //Add your code here for testing that the value is not in the list
        this.options.values.push(val);
        this._refresh();
    },
    removeValue: function( ) {
        this.options.values.pop( );
        this._refresh();
    }
});
})(jQuery);

然后像这样调用你的滑块，

$("#slider").customSlider({/* options */});

最后像这样更改滑块值

$("#slider").customSlider('addValue', 5);

你基本上是定义自己的jquery方法......看看这个jfiddle，看看它是如何工作的。

http://jsfiddle.net/ac2A3/5/

修改的这里的解决方案...... jQuery UI - Slider - How to add values

这是事实。没有名为“addHandle”的方法，你可以看到jQueryUI滑块的选项列表，这里......

http://api.jqueryui.com/slider/

将方法/函数添加到jquery ui slider

1 个答案: