Показывать подсказку на слайдере jquery ui с несколькими ручками - PullRequest
Новая
       37

Показывать подсказку на слайдере jquery ui с несколькими ручками

0 голосов
/ 09 июня 2018

У меня есть ползунок Jquery UI с несколькими маркерами, которые я могу добавлять и удалять. Я хочу показать подсказку над маркером при его перемещении, это код, который я создал: 

var tooltip = $('<div id="tooltip" />').css({
    position: 'absolute',
    top: -25,
    left: -10
}).hide();

var values = [10, 50, 70, 90];
var val = 20;

//add handle to the slider
$('button').bind('click', function(e) {

  e.preventDefault();

  $(".slider").slider("destroy");

  values.push(val);
  values = values.sort();

  $(".slider").slider({
    min: 0,
    max: 100,
    steps: 1,
    values: values
  })

})

//create the slider
$(".slider").slider({
  min: 0,
  max: 100,
  steps: 1,
  values: values,
  slide: function(event, ui) {
    tooltip.text(ui.value);
  },
  change: function(event, ui) {}

}).find(".ui-slider-handle").append(tooltip).hover(function() {
  tooltip.show()
}, function() {
  tooltip.hide()
});

//remove slider handle on double click
$(document).on('dblclick', '.ui-slider-handle', function() {
  if ($('.ui-slider-handle').length > 2)
    $(this).remove();
    //alert($(this)[0].style.left);
})

Пример Jsfiddle

Как видно из примера, подсказка работает нормально, но не отображается в правильном положении, а также не работает с вновь созданными дескрипторами.

Пожалуйста, может кто-нибудь помочь мне с этим

Спасибо

1 Ответ

0 голосов
/ 09 июня 2018

Первая проблема: связывание устарело, используйте для

Когда вы уничтожаете ползунок, вы удаляете также подсказку!

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

Чтобы упростить все, вы можете использовать функцию создания слайдера.

ВЧтобы решить последнюю проблему (... но она не появляется в правильном положении), вам нужно изменить эту строку кода: 

tooltip.text(ui.value);

на: 

$(this).find('div').text(ui.value);

Фрагмент: 

function createSlider(tooltip, values) {
   $(".slider").slider({
          min: 0,
          max: 100,
          steps: 1,
          values: values,
          slide: function(event, ui) {         
            $(this).find('div').text(ui.value);
          },
          change: function(event, ui) {}
          
        }).find(".ui-slider-handle").append(tooltip).hover(function() {
          $(".ui-slider-handle").find('div').hide()
          $(this).find('div').show();      
        });
}

var tooltip = $('<div id="tooltip" />').css({
    position: 'absolute',
    top: -25,
    left: -10
}).hide();

var values = [10, 50, 70, 90];
var val = 23;

$('button').on('click', function(e) {

    e.preventDefault();

    //
    // preserve tooltip
    //
    tooltip = $('#tooltip').clone();
    $(".slider").slider("destroy");

    values.push(val);
    values = values.sort();

    createSlider(tooltip, values);
})


createSlider(tooltip, values);

$(document).on('dblclick', '.ui-slider-handle', function() {
    if ($('.ui-slider-handle').length > 2)
        $(this).remove();
    //alert($(this)[0].style.left);
})
body {
    margin-top: 80px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>


<div class="slider"></div>
<br>
<button>Click it!</button>
...