jQuery滑块，其上的值随滑块一起移动 [英] jquery slider with value above it which travels with the slider

问题描述

我用查询/滑块制作了一个滑块，并用CSS对其进行了样式设置. ( http://jsfiddle.net/9qwmX/)

I've made a slider with query/slider and styled it with css. ( http://jsfiddle.net/9qwmX/ )

我成功地将选定的值放入div容器中；但是现在我希望容器相应地通过滑块移动". 我尝试使用ui.handle及其css left属性，该属性是一个百分比.但是这种行为有点奇怪:有时它会沿着滑块的左侧移动，有时会偏移10像素.

I succeeded to put the selected value into a div container; but now I want the container to 'travel' with the slider accordingly. I've tried to use the ui.handle and its css left property which is a percentage. But the behavior is somewhat strange: sometimes it travels with the left side of the slider and sometimes with an offset of 10px.

问题:有人知道让包含滑动值的盒子和手柄一起旅行的好方法吗?

Question: does anybody know a good way to let the box containing the slided-value travel with the handle?

推荐答案

您可以仅附加一个类似于工具提示的div，然后将其附加到手柄上，以便它随其一起移动.您只需要使用CSS定位它，就像这样:

You can just attach a tooltip-like div that you can append to the handle so it moves along with it. You just have to position it with CSS, like so:

JS

var initialValue = 2012; // initial slider value
var sliderTooltip = function(event, ui) {
    var curValue = ui.value || initialValue; // current value (when sliding) or initial value (at start)
    var tooltip = '<div class="tooltip"><div class="tooltip-inner">' + curValue + '</div><div class="tooltip-arrow"></div></div>';

    $('.ui-slider-handle').html(tooltip); //attach tooltip to the slider handle
}

$("#slider").slider({
    value: initialValue,
    min: 1955,
    max: 2015,
    step: 1,
    create: sliderTooltip,
    slide: sliderTooltip
});

从Twitter Bootstrap框架借来的

CSS ^工具提示

CSS ^{tooltip borrowed from the twitter bootstrap framework}

.tooltip {
    position: absolute;
    z-index: 1020;
    display: block;
    padding: 5px;
    font-size: 11px;
    visibility: visible;
    margin-top: -2px;
    bottom:120%;
    margin-left: -2em;
}

.tooltip .tooltip-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-top: 5px solid #000000;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    position: absolute;
    width: 0;
    height: 0;
}

.tooltip-inner {
    max-width: 200px;
    padding: 3px 8px;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    background-color: #000000;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}

演示: http://jsfiddle.net/9qwmX/2/

这篇关于jQuery滑块，其上的值随滑块一起移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！