我创建了一个带有查询/滑块的滑块,并用css设置了它. (
http://jsfiddle.net/9qwmX/)
我成功地将所选值放入div容器中;但现在我希望容器与滑块“相关”.
我试图使用ui.handle及其css left属性,这是一个百分比.但这种行为有点奇怪：有时它会在滑块的左侧移动,有时偏移量为10px.
问题：有没有人知道一个好方法让包含滑动值的盒子随手柄移动？
解决方法
您可以添加一个类似工具提示的div,您可以将其附加到句柄,以便它随之移动.你只需要用CSS定位它,就像这样：
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
});
CSS工具提示借用了twitter bootstrap框架
.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;
}
