jquery slider với giá trị trên nó di chuyển với thanh trượt

Question

Tôi đã tạo một thanh trượt với truy vấn/thanh trượt và tạo kiểu cho nó bằng css. (http://jsfiddle.net/9qwmX/)

Tôi đã thành công để đặt giá trị đã chọn vào vùng chứa div; nhưng bây giờ tôi muốn các container để 'đi du lịch' với thanh trượt cho phù hợp. Tôi đã cố gắng sử dụng số ui.handle và thuộc tính css left của nó là phần trăm. Nhưng hành vi này hơi lạ: đôi khi nó di chuyển với phía bên trái của thanh trượt và đôi khi với độ lệch là 10px.

Câu hỏi: không ai biết cách tốt để cho hộp chứa chuyến đi có giá trị trượt với tay cầm?

Answer 1

Bạn chỉ có thể đính kèm một div tooltip-như thế bạn có thể thêm vào tay cầm để nó di chuyển cùng với nó. Bạn chỉ cần vị trí của nó với CSS, như vậy:

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^{tooltip mượn từ khuôn khổ bootstrap 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; 
} 

Demo: http://jsfiddle.net/9qwmX/2/

Answer 2

Đây là cách tôi đã làm điều đó. Để giúp bạn bắt đầu:

tận dụng các "xử lý" các mục:

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

Chức hộp giá trị slide của bạn với vị trí tuyệt đối:

#tijdlijnDatum { position: absolute; } 

Và làm điều gì đó với nó trong trường hợp slide :

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

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

Answer 3

Bạn có thể làm điều gì đó như thế này để xây dựng những gì bạn cảm thấy t, Tôi đang sử dụng 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); 
      } 
} 
); 

Demo:http://jsfiddle.net/joycse06/Cw6u8/1/