Jquery UI滑块如何使一个框跟随处理程序？
我正在尝试创建一个应该遵循处理程序的div，如下所示： http ： //m1.dk/Priser/#tab ：# calc，#abb
我的JSfiddle： http ： //jsfiddle.net/z3xV3/2/
我还想对应该出现在框中的UI值进行计算。
以下是我想要实现的内容： 
HTML：
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" ) ); });
我希望你正在寻找的效果： http ： //jsfiddle.net/z3xV3/11/
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
CSS
#sliderValue { position:absolute; width: 50px; }
最好的祝福！
我修改了你的jsfiddle例子： http ： //jsfiddle.net/Dr5UR/
$("#amount").val("$" + $("#slider").slider({ slide: function(event, ui) { $('#sliderValue').css('left', event.clientX).val(ui.value); } }));
我利用了滑块的滑动事件。
幻灯片事件有两个参数：
-
事件
该对象包含有关事件本身的几个信息。 触发时间，按下的键或触发时鼠标的坐标。 clientX属性包含我们需要设置为移动对象的位置。
-
UI
ui对象来自jQuery UI本身。 它基本上只包含值。 此外，它还包含用于拖动的锚点。 但是你不能使用它的位置，因为滑动事件在锚定新位置之前生效。
#slideValue输入需要有position: absolute; 因为我使用CSS中的左侧位置属性。 您还可以设置margin-left值，而无需将position设置为absolute 。
将它变成一个简单的jQuery插件实际上非常简单（而且非常有用）。 像这样：
JSFiddle： http ： //jsfiddle.net/PPvG/huYRL/
请注意，我已添加了对通过在 #sliderValue输入值来移动滑块的#sliderValue 。
[删除代码示例]
您也可以选择从HTML中删除 #sliderValue ，然后让插件为您创建。在这种情况下，您将重写插件，以便在滑块上 #sliderValue ，而不是在#sliderValue上#sliderValue 。在我看来，这将是一个更简洁的解决方案。
更新
根据您的评论（并重新阅读您的问题），我重写了插件示例。
如果我理解正确，您希望根据滑块的值进行一些计算，并在滑块手柄下方的标签中显示这些计算的结果。 以下内容应该非常简单。
JSFiddle： http ： //jsfiddle.net/PPvG/q5qg7/
HTML
插入
(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: $('').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);
用法
$("#slider").slider(); $("#slider").sliderLabel({ callback: function(value) { return value + '%'; } });
如您所见，现在可以在滑块本身上调用插件。 您现在可以为插件提供回调，允许您进行一些计算并返回格式正确的标签（允许使用HTML）。
在上面的示例中，回调只是获取传递给回调的value并附加'%' 。
这是一个带有两个手柄的滑块的工作示例
$('#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：
#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; } }
HTML：
CSS：
#slider { width: 200px; } #sliderValue { position: absolute; left: 0; bottom: -30px; width: 40px; }
jQuery的：
$("#slider").slider({ value: '', min: 0, max: 100, range: 'min', create: function (event, ui) { $('.ui-slider-handle').append(''); }, slide: function (event, ui) { $("#sliderValue").val(ui.value); } });
看看使用jQuery插件的替代解决方案会很好，例如：
带上你的jsfiddle。
HTML：
CSS：
#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" )); });
你可以： 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 }); } }); });
每次移动句柄时都会调用幻灯片回调：
offsetLeft是句柄的偏移量。
$( "#sliderValue" )是你的输入。