我做了一個滑塊與查詢/滑塊和樣式與CSS。 (http://jsfiddle.net/9qwmX/)jquery滑塊與價值高於它與滑塊一起旅行
我成功地將選定的值放入div容器;但現在我希望容器能夠相應地與滑塊「移動」。 我試過使用ui.handle
及其css left
屬性這是一個百分比。但是這種行爲有點奇怪:有時它會隨滑塊的左側移動,有時偏移量爲10px。
問:是否有人知道一個好辦法,讓包含滑動值的旅行箱子處理?
我做了一個滑塊與查詢/滑塊和樣式與CSS。 (http://jsfiddle.net/9qwmX/)jquery滑塊與價值高於它與滑塊一起旅行
我成功地將選定的值放入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的引導框架借用
.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;
}
這就是我將如何做到這一點。爲了讓你開始:
利用「處理」的位置:
絕對定位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
}
});
你可以這樣做來建立你想要的東西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。淨/ joycse06/Cw6u8/1 / –