Применение QTip для нескольких слайдеров JQueryUI

Question

Здесь how to apply a QTip to a JQueryUI slider and display its value.

var slider = $('#jqueryui-slider').slider({ 
    slide: function(event, ui) { 
     handle.qtip('option', 'content.text', '' + ui.value); 
    } 
}), 
    handle = $('.ui-slider-handle', slider); 

handle.qtip({ 
    id: 'uislider', 
    content: '' + slider.slider('option', 'value'), 
    position: { 
     my: 'bottom center', 
     at: 'top center', 
     container: handle 
    }, 
    hide: { 
     delay: 1000 
    }, 
    style: { 
     widget: true 
    } 
}); 

Я пытаюсь понять, как применить несколько QTips таким же образом (где значение ползунка отображается в наконечнике), но и для любого числа слайдеров на той же странице.

Мне нужно это, потому что я динамически создаю ползунки на странице, а количество ползунков будет отличаться от записи к записи.

EDIT

Чтобы прояснить немного дальше, потому что я динамически генерировать ползунков на странице, один за другим, в настоящее время они настроены независимо друг от друга, и каждый требует своих собственных параметров (макс, значение, шаг) и событие слайд-действия.

Из-за необходимости быть независимо инициализированным (и необходимость ссылки на различные элементы html в событии slide()) в настоящее время используется несколько .slider(). Ниже приведен пример одного .slider(), который может быть добавлен на страницу (с использованием ASP.net, с элементами управления, динамически генерируемыми в ретрансляторе). Он использует скрытые поля для инициализации слайдера в зависимости от типа обрабатываемого значения. Кроме того, он обновляет метки и другие значения (также динамически генерируемые) на странице внутри события slide().

Текущий ответ показывает, как настроить несколько ползунков, но использует только одно объявление ползунка(). Я действительно ищу ответ, который делает то же самое, но позволяет для каждого слайдера быть независимо настроенным. Если это может быть выполнено с помощью одного вызова ползунка(), это тоже будет работать, хотя я не уверен, что это можно сделать.

var currentSlider = $('#<%=panSlider.ClientID%>').slider({ 
     range: "min", 
     max: parseInt($('#<%=hfMaxValue.ClientID%>').val()), 
     value: parseInt($('#<%=hfInitValue.ClientID%>').val()), 
     step: parseInt($('#<%=hfStepValue.ClientID%>').val()), 
     slide: function (event, ui) { 
      // set the text to show the current value and update the hidden field for postback 
      $("#<%=labValue.ClientID%>").text(ui.value); 
      $("#<%=hfValue.ClientID%>").val(ui.value); 
      // determine the difference from base to current value 
      var difference = ui.value - $('#<%=hfBaseValue.ClientID%>').val(); 
      $("#<%=labDifference.ClientID%>").text(difference); 

      // add tooltip to handle 

      handle.qtip('option', 'content.text', '' + ui.value); 
     } 
     }); 

Answer 1

Вы можете использовать jQuery .each funciton для итерации всех ползунков и их инициализации.

$('.jqueryui-slider').each(function(){ 
    var slider = $(this).slider({ 
     slide: function(event, ui) { 
      handle.qtip('option', 'content.text', '' + ui.value); 
     } 
    }), 
    handle = $('.ui-slider-handle', slider); 

    handle.qtip({ 
     id: 'uislider', 
     content: '' + slider.slider('option', 'value'), 
     position: { 
      my: 'bottom center', 
      at: 'top center', 
      container: handle 
     }, 
     hide: { 
      delay: 1000 
     }, 
     style: { 
      widget: true 
     } 
    });  
}); 

Fiddle

Answer 2

Посмотрите на мою скрипку: http://jsfiddle.net/dodcbzdw/1/

HTML:

<div class="jqueryui-slider"></div> 
<div class="jqueryui-slider"></div> 
<div class="jqueryui-slider"></div> 

JS:

var slider = $('.jqueryui-slider').slider({ 
    slide: function(event, ui) { 
     handle.qtip('option', 'content.text', '' + ui.value); 
    } 
}) 

Не смотря на проблемы г-индексов кончиков, это должно быть что вы хотели. Просто используйте один и тот же класс для каждого слайдера и используйте этот класс для генерации всех слайдеров и qtips одновременно.