Положить поповер на ручку noUiSlider - PullRequest
Новая
       9

Положить поповер на ручку noUiSlider

0 голосов
/ 27 сентября 2018

Я работаю над использованием noUislider в качестве слайдера.Одна вещь, которую я хочу сделать, - при наведении на ручку, у вас может появиться поповер, и при нажатии на него произойдет другое действие внутри поповера.Как настроить целевой дескриптор noUi-handle noUi-handle-lower внутри ползунка для запуска всплывающего окна?

Чтобы уточнить: нижний маркер этого ползунка является встроенным дочерним элементом в ползунке. 

<div id="slider1" style="width: 400px; margin: 0px auto 30px;" class="noUi-target noUi-ltr noUi-horizontal" data-placement="right" data-toggle="popover1" data-original-title="" > <div class="noUi-base"><div class="noUi-connects"></div><div class="noUi-origin" style="transform: translate(-100%, 0px); z-index: 5;">
<div class="noUi-handle noUi-handle-lower" data-handle="0" tabindex="0" role="slider" aria-orientation="horizontal" aria-valuemin="0.0" aria-valuemax="100.0" aria-valuenow="0.0" aria-valuetext="0.00"></div></div>
<div class="noUi-origin" style="transform: translate(0%, 0px); z-index: 4;"><div class="noUi-handle noUi-handle-upper" data-handle="1" tabindex="0" role="slider" aria-orientation="horizontal" aria-valuemin="0.0" aria-valuemax="100.0" aria-valuenow="100.0" aria-valuetext="100.00"></div></div></div></div>

$('#slider1 .noUi-handle noUi-handle-lower').popover({trigger: "manual", container: 'body', title: "Hello", content: "Test"})
    .on('mouseenter', function() { enterShow('slider1')})
    .on('mouseleave', function() { exitHide('slider1')})
    .on('click', function() { clickToggle('sliderx1')});

Ответы [ 2 ]

0 голосов
/ 29 сентября 2018

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

Во-первых, вы хотите убедиться, что у вас есть код document.ready, так как мы поможем найтиручки.

$( document ).ready(function() {
    console.log( "ready!" );
});

noUiSlider не загружает все до тех пор, пока не найдет ползунки и не подтвердит его, что делает другие сценариев внутрикадровыми.

Следующим шагом я нашел каждый экземпляр класса no noUi.-handle noUi-handle-lower и пометить каждый из этих дескрипторов на основе их идентификатора 

$('div.noUi-handle.noUi-handle-lower').attr('data-placement','right');
for (qwr =0; qwr < $('div.noUi-handle.noUi-handle-lower').length; qwr++){
    var holdid = $('div.noUi-handle.noUi-handle-lower').eq(qwr).parent().closest("div[id]")[0].id;
    //console.log(holdid);
    holdid = holdid.replace("nslider", "slider");
    //console.log(holdid);
    $('div.noUi-handle.noUi-handle-lower').eq(qwr).attr('id',holdid);   
    }

Затем я убедился, что инициализировать состояние для идентификатора 

$('#slider1').data('state', 'hover');

Наконец, япоместил мои данные начальной загрузки 

$('#slider1 .noUi-handle noUi-handle-lower').popover({trigger: "manual", container: 'body', title: "Hello", content: "Test"})
    .on('mouseenter', function() { enterShow('slider1')})
    .on('mouseleave', function() { exitHide('slider1')})
    .on('click', function() { clickToggle('slider1')});

Соберите все это вместе: 

$( document ).ready(function() {
    console.log( "ready!" );
$('div.noUi-handle.noUi-handle-lower').attr('data-placement','right');
for (qwr =0; qwr < $('div.noUi-handle.noUi-handle-lower').length; qwr++){
    var holdid = $('div.noUi-handle.noUi-handle-lower').eq(qwr).parent().closest("div[id]")[0].id;
    //console.log(holdid);
    holdid = holdid.replace("nslider", "slider");
    //console.log(holdid);
    $('div.noUi-handle.noUi-handle-lower').eq(qwr).attr('id',holdid);   
    }
$('#slider1').data('state', 'hover');

$('#slider1 .noUi-handle noUi-handle-lower').popover({trigger: "manual", container: 'body', title: "Hello", content: "Test"})
    .on('mouseenter', function() { enterShow('slider1')})
    .on('mouseleave', function() { exitHide('slider1')})
    .on('click', function() { clickToggle('slider1')});
});

Это должно сделать.

0 голосов
/ 27 сентября 2018

Что-то вроде этого должно сделать это: 

// target the particular handle    
const handle = document.querySelector('.noUi-handle noUi-handle-lower');

handle.onmouseenter = function () {
    // code to insert popover HTML goes here
}

handle.onmouseleave = function () {
    // code to remove popover HTML goes here
}

Я не собираюсь делать для вас "поповерный" HTML, потому что это может быть буквально что угодно.Для этого я рекомендую использовать insertAdjacentHTML .Удачи.

...