На самом деле довольно легко (и очень полезно) превратить это в простой плагин jQuery.Вот так:
JSFiddle: http://jsfiddle.net/PPvG/huYRL/
Обратите внимание, что я добавил поддержку для перемещения ползунка, введя значение в #sliderValue.
[Пример кода удален]
Вы также можете удалить #sliderValue из HTML и позволить плагину создать его для вас.В этом случае вы переписали бы плагин так, чтобы он вызывался на слайдере, а не на #sliderValue.На мой взгляд, это было бы гораздо более удачным решением.
Обновление
На основе ваших комментариев (и перечитывания вашего вопроса) я переписал пример плагина.
Если я правильно понимаю, вы хотите сделать некоторые вычисления, основанные на значении ползунка, и отобразить результат этих вычислений в метке под маркером ползунка.Следующее должно сделать это действительно просто.
JSFiddle: http://jsfiddle.net/PPvG/q5qg7/
HTML
<div id="slider"></div>
Плагин
(function($) {
$.fn.sliderLabel = function(options) {
var settings = $.extend({
marginTop: 2,
// Margin between the slider handle and the label (in pixels)
callback: function(value) {
return 'Value: ' + value;
}
}, options);
return this.each(function() { // <- maintains chainability
var slider = $(this);
var handle = slider.children('.ui-slider-handle');
var data = slider.data('sliderLabel');
if (handle.length === 0) {
// $(this) isn't a slider (it has no handle)
console.log('[SliderLabel] Error: sliderLabel() can only be called on a slider.');
return;
}
if (data === undefined) {
// First time sliderLabel() is called on this slider
data = {
label: $('<div class="ui-slider-label" />').css('position', 'absolute'),
callback: settings.callback
};
data.label.insertAfter(slider);
function updateLabel() {
var value = slider.slider('value');
var labelText = data.callback(value);
data.label.html(labelText);
data.label.css('top', handle.offset().top + handle.outerHeight() + settings.marginTop);
data.label.css('left', handle.offset().left - ((data.label.width() - handle.width()) / 2));
}
updateLabel();
slider.bind('slide', updateLabel);
} else {
// sliderLabel() was called before; just update the callback:
data.callback = settings.callback;
updateLabel();
}
// Save (or update) the data inside the slider:
slider.data('sliderLabel', data);
});
}
})(jQuery);
Использование
$("#slider").slider();
$("#slider").sliderLabel({
callback: function(value) {
return value + '%';
}
});
Как видите, плагин теперь вызывается на самом слайдере.Теперь вы можете снабдить плагин обратным вызовом, который позволяет выполнять некоторые вычисления и возвращать правильно отформатированную метку (допустим HTML).
В приведенном выше примере обратный вызов просто принимает value, то естьпередается обратному вызову и добавляет '%'.