關於使用引導工具提示將鼠標懸停在jQuery UI滑塊上的問題

您可以看看at this Demo，讓我知道爲什麼我無法將工具提示添加到鼠標懸停處理程序上？關於使用引導工具提示將鼠標懸停在jQuery UI滑塊上的問題

$("#slider-range").slider({ 
    range: true, 
    step: 5, 
    min: 100, 
    max: 500, 
    values: [150, 300], 
    slide: function (event, ui) { 
     $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]); 
    } 
}); 

$("#amount").val("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1)); 

$('.ui-slider-handle').hover(

function() { 
    $('.ui-slider-handle:first').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[0] + '</div></div>'); 
    $('.ui-slider-handle:last').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[1] + '</div></div>'); 
}, function() { 

});

當我使用他們的slide:裏面，但我只需要懸停顯示它們的html()方法做工精細。

slide: function (event, ui) { 
    $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]); 
    $('.ui-slider-handle:first').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[0] + '</div></div>'); 
    $('.ui-slider-handle:last').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[1] + '</div></div>'); 
}

感謝

來源

2014-03-13 Mona Coder

我檢查你的代碼。它有很多問題。首先，你沒有使用懸停功能的UI對象。所以，你無法訪問它。懸停事件僅在鼠標進入和鼠標離開時纔會觸發。所以，當你拖動手柄時，你將滑動功能放在幻燈片函數中以顯示改變的值。我還添加了一些其他修改。

的JavaScript修改後：

$("#slider-range").slider({ 
    range: true, 
    step: 5, 
    min: 100, 
    max: 500, 
    values: [150, 300], 
    slide: function (event, ui) { 
     $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]); 
      $('.ui-slider-handle:first').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[0] + '</div></div>'); 
      $('.ui-slider-handle:last').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[1] + '</div></div>'); 
    } 
}); 

$("#amount").val("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1)); 

$(".ui-slider-handle").mouseleave(function() { 
$('.ui-slider-handle').html(""); 
}) 
$(".ui-slider-handle").mouseenter(function() { 
var value = $("#slider-range").slider("option", "values"); 
$('.ui-slider-handle:first').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + value[0] + '</div></div>'); 
$('.ui-slider-handle:last').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + value[1] + '</div></div>'); 
})

working fiddle

來源

2014-03-14 04:51:00 Foreever

關於使用引導工具提示將鼠標懸停在jQuery UI滑塊上的問題

回答

相關問題