javascript - JQueryUI 滑块 - 当前位置的工具提示

Question

目前我有一个滑块和一个小的输入文本框，它会根据您在其上滚动的位置进行更新。

这是javascript：

$("#slider").slider({
    value: 500,
    min: 0,
    max: 1000,
    step: 50,
    slide: function(event, ui) {
        $("#budget").val(ui.value);
    },
    change: function(event, ui) {}
});
$("#budget").val($("#slider").slider("value"));​

这是html/css：

<input type="text" id="budget" style="width:50px;text-align:center"/>

<div id="slider"></div>​

但是，在滑块顶部带有图形的小文本框看起来有点奇怪，所以我希望它更新其水平位置，使其位于滑块手柄（.ui-slider-handle）的上方，如果可能 - 就像一种工具提示。

Answer 1

我不确定您是否需要输入字段或只是一种显示文本的方式，但您可以显示类似jsFiddle 示例的工具提示。

jQuery

var tooltip = $('<div id="tooltip" />').css({
    position: 'absolute',
    top: -25,
    left: -10
}).hide();
$("#slider").slider({
    value: 500,
    min: 0,
    max: 1000,
    step: 50,
    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()
})​