javascript Jquery UI滑块如何使框跟随处理程序？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8582564/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery UI slider how to make a box follow the handler?
提问by Rails beginner
I am trying to create a div that should follow the handler as it is seen here: http://m1.dk/Priser/#tab:#calc,#abb
我正在尝试创建一个应遵循处理程序的 div，如下所示：http: //m1.dk/Priser/#tab:# calc,#abb
My JSfiddle: http://jsfiddle.net/z3xV3/2/
我的 JSfiddle：http: //jsfiddle.net/z3xV3/2/
I also want to make a calculation on the UI value that should appear in the box.
我还想对应该出现在框中的 UI 值进行计算。
Here is a illustration what I want to achieve:
这是我想要实现的说明：
HTML:
HTML：
<div id="slider"></div>
<input id="sliderValue" />
Jquery:
查询：
$(document).ready(function() {
// Pris slider
$("#slider").slider({value:'',min: 0,max: 150,step: 1, range: 'min',
slide: function( event, ui ) {
$( "#amount" ).html( ui.value + ' timer');
}
});
$( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
});
回答by Minko Gechev
I hope that's the effect you're looking for: http://jsfiddle.net/z3xV3/11/
我希望这就是你正在寻找的效果：http: //jsfiddle.net/z3xV3/11/
JS
JS
$(document).ready(function() {
$("#slider").slider({value:'', min: 0, max: 150, step: 1, range: 'min'});
var thumb = $($('#slider').children('.ui-slider-handle'));
setLabelPosition();
$('#slider').bind('slide', function () {
$('#sliderValue').val($('#slider').slider('value'));
setLabelPosition();
});
function setLabelPosition() {
var label = $('#sliderValue');
label.css('top', thumb.offset().top + label.outerHeight(true));
label.css('left', thumb.offset().left - (label.width() - thumb.width())/ 2);
}
});
HTML
HTML
<div id="slider"></div>
<input id="sliderValue" />
CSS
CSS
#sliderValue {
position:absolute;
width: 50px;
}
Best regards!
最好的祝福！
回答by Armin
I have modifiered your jsfiddle example: http://jsfiddle.net/Dr5UR/
我修改了你的 jsfiddle 示例：http: //jsfiddle.net/Dr5UR/
$("#amount").val("$" + $("#slider").slider({
slide: function(event, ui) {
$('#sliderValue').css('left', event.clientX).val(ui.value);
}
}));
I make use of the slide event of the slider.
我利用了滑块的幻灯片事件。
The slide event got two arguments:
幻灯片事件有两个参数：
event
This object contains several informations about the event itself. The time of triggering, the key which has been pressed or the coordinates of the mouse at the moment of triggering. The clientXproperty contains the position we need to set to the moving object.
ui
The ui object comes from jQuery UI itself. It basicly just contains the value. Additionally it contains the anchor which is used for dragging too. But you can't use its position, cause the slide event takes effect before the anchor takes its new position.
事件
该对象包含有关事件本身的若干信息。触发时间、被按下的按键或触发时刻鼠标的坐标。该clientX属性包含我们需要设置到移动物体的位置。
用户界面
ui 对象来自jQuery UI 本身。它基本上只包含值。此外，它还包含用于拖动的锚点。但是你不能使用它的位置，因为滑动事件在锚点到达新位置之前生效。
The #slideValueinput needs to have position: absolute;, cause I work with the left position attribute in CSS. You could also set the margin-leftvalue, without need to set the positionto absolute.
该#slideValue输入需要有position: absolute;，因为我在CSS左侧位置属性工作。您还可以设置该margin-left值，而无需将 设置position为absolute。
回答by Peter-Paul van Gemerden
It's actually quite easy (and very useful) to turn this into a simple jQuery plugin. Like so:
把它变成一个简单的 jQuery 插件实际上很容易（而且非常有用）。像这样：
JSFiddle: http://jsfiddle.net/PPvG/huYRL/
JSFiddle：http: //jsfiddle.net/PPvG/huYRL/
Note that I've added support for moving the slider by entering a value into the #sliderValue.
请注意，我通过在#sliderValue.
[ Code sample removed ]
[代码示例已删除]
You could also choose to remove #sliderValuefrom the HTML and let the plugin create it for you. In that case, you would rewrite the plugin so it would be called on the slider, instead of on #sliderValue. In my opinion, that would be a much neater solution.
您也可以选择#sliderValue从 HTML 中删除并让插件为您创建它。在这种情况下，您将重写插件，以便在滑块上调用它，而不是 on #sliderValue。在我看来，这将是一个更简洁的解决方案。
Update
更新
Based on your comments (and re-reading your question), I've rewritten the plugin example.
根据您的评论（并重新阅读您的问题），我重写了插件示例。
If I understand correctly, you want to do some calculations based on the value of the slider and display the result of those calculations in the label below the slider handle. The following should make that really easy.
如果我理解正确，您想根据滑块的值进行一些计算，并在滑块手柄下方的标签中显示这些计算的结果。以下应该使这变得非常容易。
JSFiddle: http://jsfiddle.net/PPvG/q5qg7/
JSFiddle：http: //jsfiddle.net/PPvG/q5qg7/
HTML
HTML
<div id="slider"></div>
Plugin
插入
(function($) {
$.fn.sliderLabel = function(options) {
var settings = $.extend({
marginTop: 2,
// Margin between the slider handle and the label (in pixels)
callback: function(value) {
return 'Value: ' + value;
}
}, options);
return this.each(function() { // <- maintains chainability
var slider = $(this);
var handle = slider.children('.ui-slider-handle');
var data = slider.data('sliderLabel');
if (handle.length === 0) {
// $(this) isn't a slider (it has no handle)
console.log('[SliderLabel] Error: sliderLabel() can only be called on a slider.');
return;
}
if (data === undefined) {
// First time sliderLabel() is called on this slider
data = {
label: $('<div class="ui-slider-label" />').css('position', 'absolute'),
callback: settings.callback
};
data.label.insertAfter(slider);
function updateLabel() {
var value = slider.slider('value');
var labelText = data.callback(value);
data.label.html(labelText);
data.label.css('top', handle.offset().top + handle.outerHeight() + settings.marginTop);
data.label.css('left', handle.offset().left - ((data.label.width() - handle.width()) / 2));
}
updateLabel();
slider.bind('slide', updateLabel);
} else {
// sliderLabel() was called before; just update the callback:
data.callback = settings.callback;
updateLabel();
}
// Save (or update) the data inside the slider:
slider.data('sliderLabel', data);
});
}
})(jQuery);
Usage
用法
$("#slider").slider();
$("#slider").sliderLabel({
callback: function(value) {
return value + '%';
}
});
As you can see, the plugin is now called on the slider itself. You can now provide the plugin with a callback, which allows you to do some calculations and return a correctly formatted label (HTML is allowed).
如您所见，插件现在在滑块本身上被调用。您现在可以为插件提供回调，这允许您进行一些计算并返回格式正确的标签（允许使用 HTML）。
In the example above, the callback simply takes the valuethat is passed to the callbackand appends '%'.
在上面的例子中，回调只接受value传递给回调的 并附加'%'。
回答by Nick Woodhams
Here is a working example for a slider with two handles
这是带有两个手柄的滑块的工作示例
$('#slider').slider({
range: true,
min: 500,
max: 10000,
step: 100,
values: [1000, 2000],
slide: function( event, ui ) {
$('#min-price').html('$' + ui.values[0]);
$('#min_budget').val(ui.values[0]);
$('#max-price').html('$' + ui.values[1]);
$('#max_budget').val(ui.values[1]);
}
//move labels when handles are moved
moveValueLabels();
}
});
//move the value labels directly under the handles
function moveValueLabels() {
var pos_first_handle = $('.ui-slider-handle:first').position();
var pos_last_handle = $('.ui-slider-handle:last').position();
$('#min-price').css('left', (pos_first_handle.left - ($('#min-price').width()/2)));
$('#max-price').css('left', (pos_last_handle.left - ($('#max-price').width()/2)));
}
//set initial positioning of labels when page is loaded
moveValueLabels();
CSS:
CSS：
#slider {
overflow: visible;
#min-price {
position:absolute;
top:20px;
font-weight: bold;
padding:0;
}
#max-price {
position:absolute;
top:20px;
font-weight: bold;
padding:0;
}
}
回答by Bartosz Mediger
HTML:
HTML：
<div id="slider"></div>
CSS:
CSS：
#slider {
width: 200px;
}
#sliderValue {
position: absolute;
left: 0;
bottom: -30px;
width: 40px;
}
jQuery:
jQuery：
$("#slider").slider({
value: '',
min: 0,
max: 100,
range: 'min',
create: function (event, ui) {
$('.ui-slider-handle').append('<input id="sliderValue" />');
},
slide: function (event, ui) {
$("#sliderValue").val(ui.value);
}
});
回答by Qorbani
It would be nice to take a look at alternative solutions with jQuery plugins such as:
看看使用 jQuery 插件的替代解决方案会很好，例如：
回答by Teun Pronk
Taking your jsfiddle.
拿你的 jsfiddle。
HTML:
HTML：
<div id="slider"></div>
<input id="sliderValue" />
CSS:
CSS：
#sliderValue{width:50px;}
#sliderValue{width:50px;}
Jquery:
查询：
$(document).ready(function() {
// Pris slider
$("#slider").slider({value:'',min: 0,max: 150,step: 1, range: 'min',
slide: function( event, ui ) {
$( "#sliderValue" ).val( ui.value + ' timer');
var offset = $(this).find('a').css("left");
$("#sliderValue").css("margin-left", offset);
}
});
$( "#sliderValue" ).val($( "#slider" ).slider( "value" ));
});
回答by andlrc
You can just: http://jsfiddle.net/z3xV3/21/
你可以只：http: //jsfiddle.net/z3xV3/21/
$(document).ready(function() {
$("#slider").slider({
value:0,
min: 0,
max: 150,
step: 1,
range: 'min',
slide: function( event, ui ) {
var offsetLeft = $(this).find(".ui-slider-handle").offset().left;
$( "#sliderValue" )
.val( ui.value + ' timer')
.css({
"position": "absolute",
"left": offsetLeft
});
}
});
});
The slide callback is called every time you move your handle:
每次移动手柄时都会调用滑动回调：
offsetLeftis the offset of the handle.
offsetLeft是句柄的偏移量。
$( "#sliderValue" )is your input.
$( "#sliderValue" )是您的输入。
