Добавление метода/функции в jquery ui slider

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(); 
} 

});

Когда я вызываю $ (".pct-слайдер") .slider ("addHandle"), я получаю «no такой метод« addHandle »для экземпляра виджета слайдера». Какая проблема и что мне нужно сделать, я могу начать возиться с функциональностью этого.

EDIT Теперь я пытаюсь вызвать $ (".pct-slider") .slider ("addValue (1400)"), и я получаю ошибку такого метода. Я также использую 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 ... смотреть на это Чтобы узнать, как это работает.

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

Редактировать Решение здесь ... jQuery UI - Slider - How to add values

Это верно. Там нет никакого метода под названием «addHandle», вы можете просмотреть список опций для слайдера jQueryUI, здесь ...

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