0

我正在使用 jQuery Range 滑块让用户选择一天中的时间范围（即 10:00 - 18:00）。

目前一切正常，我将输出显示在文本框中，但这并不理想。我希望每个手柄都有一个单独的工具提示，分别显示 2 个值，并且在拖动时跟随手柄。如果我不能把时间放在滑动手柄本身上。

我的问题是 - 我如何定位特定的句柄？它们由 jQuery 动态创建并且仅由类定义，所以我不知道如何将 div 链接到特定句柄。

我在这里进行了搜索，发现了一些类似的问题，但没有真正回答这个问题。

另外，我不想使用插件。我知道存在一两个，但由于这只发生在网站上的一个地方，我宁愿不必包含一个应该相当简单的文件（即使它打败了我：P）

4

3 回答 3

5

我知道这有点老了，但我认为其他人可能会发现我感兴趣的解决方案（或者至少告诉我为什么它是垃圾）。

我基本上使用 JQuery 在用于滑块手柄的span元素内插入一个元素。每次使用滑块事件移动句柄时，都会更新a的内容。span 本身是使用 css 设置样式的，因此它仅在悬停在句柄上方时才会显示，并且略高于句柄本身。所以它看起来像这样：spanchange

滑块值工具提示

所以，我的滑块被添加到slider-range类的所有元素中，如下所示：

$(".slider-range").each(function () {
    $(this).slider({
        range: true,
        animate: true,
        min: 1,
        max: 10,
        values: [lower, upper],
        change: function () {

            // get slider values
            var lower = $(this).slider("values", 0);
            var upper = $(this).slider("values", 1);

            // update spans with slider values
            $(this).children("a.ui-slider-handle").first().children("span").html(lower);
            $(this).children("a.ui-slider-handle").last().children("span").html(upper);
        }
    });

    // add the span element to the handle
    $(this).children("a.ui-slider-handle").html("<span class='Slider_Value'></span>");
});

然后css看起来像这样：

a.ui-slider-handle span.Slider_Value{
    position: absolute;
    top: -35px;
    left: -2px;
    border-radius: 5px;
    padding: 5px;
    border: 1px solid #E6E6E6;
    background-color: white;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    display: none;
}

a.ui-slider-handle:hover span.Slider_Value{
    display: block;
}

就这样！请享用

于 2012-12-12T11:32:04.143 回答
2

如果您只需要独立访问每个值，则可以附加该slide函数以单独更新每个目标。此外，如果您希望能够分别更改这两个目标中的每一个的滑块，那么使用该values方法同样容易。

编辑

我想我有点误解了你的问题。您可以使用一些选择器获取处理程序及其位置，例如：

var offset1 = $(this).children('.ui-slider-handle').first().offset();
var offset2 = $(this).children('.ui-slider-handle').last().offset();

下面是一个示例，您可以如何使用该信息在拖动时在这些项目上显示工具提示。

示例：http: //jsfiddle.net/niklasvh/vW7vy/

于 2011-06-02T11:49:16.553 回答
2

不错的努力，但它并不完美。当您第一次将鼠标悬停在手柄上时。它 dsnt 显示默认值。用相同的 CSS 样式试试这个。

$(function() {
            var tooltip = function(sliderObj, ui){
                val1            = '<div id="slider_tooltip">'+ sliderObj.slider("values", 0) +'</div>';
                val2            = '<div id="slider_tooltip">'+ sliderObj.slider("values", 1) +'</div>';
                sliderObj.children('.ui-slider-handle').first().html(val1);
                sliderObj.children('.ui-slider-handle').last().html(val2);                  
            };

            $( "#slider-range" ).slider({
              range: true,
              min: 0,
              max: 500,
              values: [ 75, 300 ],
              slide: function( e, ui ) {
                tooltip($(this),ui);                    
              },              
              create:function(e,ui){
                tooltip($(this),ui);                    
              }
            });
        });
于 2013-05-20T12:02:09.163 回答