将弹出窗口放在 noUiSlider 句柄上

Question

我正在努力将 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')});

Answer 1

应该这样做：

// 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
}

我不会为你做 "popover" HTML，因为那几乎可以是任何东西。我建议为此使用 insertAdjacentHTML。祝你好运。

Answer 2

我想出了如何做我所要求的，所以我将在这里详细说明。

首先，您要确保拥有 document.ready 代码，因为我们将帮助您找到句柄。

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

noUiSlider 不会加载所有内容，直到它找到滑块并确认它在那里使其他脚本事件变得复杂。

我接下来要做的是找到 class noUi-handle noUi-handle-lower 的每个实例，并根据它们的 ID 标记每个句柄

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

然后我确保为 id

初始化状态

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

最后，我放置了我的bootstrap信息

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

应该可以。

将弹出窗口放在 noUiSlider 句柄上

Putting popover on noUiSlider handle

javascript

jquery

twitter-bootstrap-3

nouislider