jquery滑块与价值高于它与滑块一起旅行

我做了一个滑块与查询/滑块和样式与CSS。（http://jsfiddle.net/9qwmX/）jquery滑块与价值高于它与滑块一起旅行

我成功地将选定的值放入div容器;但现在我希望容器能够相应地与滑块“移动”。我试过使用ui.handle及其css left属性这是一个百分比。但是这种行为有点奇怪：有时它会随滑块的左侧移动，有时偏移量为10px。

问：是否有人知道一个好办法，让包含滑动值的旅行箱子处理？

2012-06-19 stUrb

像这样的http：// jsfiddle。净/ joycse06/Cw6u8/1 / –

你可以只连接一个类似工具提示的DIV，你可以追加到把手，这样与它一起移动。我们必须用CSS来定位它，就像这样：

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的引导框架借用}

.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/

来源

2012-06-19 14:33:21

这就是我将如何做到这一点。为了让你开始：

利用“处理”的位置：

绝对定位

var offset = $('.ui-slider-handle .ui-state-default .ui-corner-all"').offset(); 
var offsetLeft = offset.left; 
var offestTop = offset.top;

位置幻灯片值框：

#tijdlijnDatum { position: absolute; }

而且用它做什么东西在slide事件：

$("#slider").slider({ 
    slide: function(event, ui) { 

     $('#tijdlijnDatum').css({ left: offsetLeft + 'px' }); // etc 
    } 
});

来源

2012-06-19 11:27:21 Johan

你可以这样做来建立你想要的东西T，我使用event.pageX

var newLeft = 100; 
$('#move').text(100).css('margin-left',115); 
$("#slider").slider(
{ 
      value:100, 
      min: 0, 
      max: 500, 
      step: 50, 
      slide: function(event, ui) { 
       $("#slider-value").html(ui.value); 
       var pos = (event.pageX > newLeft)? event.pageX + 8 
                : event.pageX - 42; 
       newLeft = event.pageX;     
       $('#move').text(ui.value).css('margin-left',pos); 
      } 
} 
);

演示：http://jsfiddle.net/joycse06/Cw6u8/1/

来源

2012-06-19 11:43:22

jquery滑块与价值高于它与滑块一起旅行

回答

相关问题