Jquery 设置滑块值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8133443/
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 set slider value
提问by Buksy
I have one slider to select time range, from 1 (,2,3,..) day (,weeks,months,..) ago until now. It sets time and date in inputs and it works correctly with this code
我有一个滑块来选择时间范围，从 1 (,2,3,..) 天 (,weeks,months,..) 之前到现在。它在输入中设置时间和日期，并且可以使用此代码正常工作
<div id="inputs" style="margin-top: 10px;">
<div style="margin-top: 0px; margin-bottom: 2px;">
<input type="text" name="date_start" id="date_start" style="width: 59%;" value="TEMPlate_date_start;">
<input type="text" name="time_start" id="time_start" style="width: 30%;" value="TEMPlate_time_start;">
</div>
<div style="margin-top: 2px; margin-bottom: 2px;">
<input type="text" name="date_end" id="date_end" style="width: 59%;" value="TEMPlate_date_end;">
<input type="text" name="time_end" id="time_end" style="width: 30%;" value="TEMPlate_time_end;">
</div>
</div>
<!-- Here is DIV with SLIDER -->
<div style="margin-top: 6px;margin-bottom: 45px;">
<div id="slider" style="width: 90%;"></div>
</div>
<!-- Here is flying DIV with slider value -->
<div id="amount" style="font-size: 13px;height: 15px;padding: 5px;width: 70px;position: relative;top: -25px;margin-bottom: -25px;color:#666;border:1px solid #CCC;background-color: #EEE; border-radius:5px;">Last 1 hour</div>
<script type="text/javascript">
var mouseX = 0;
var mouseY = 0;
$(document).mousemove( function(e) {
mouseX = e.pageX;
mouseY = e.pageY;
});
function leadingZero(value)
{
return (value<10||value.length==1)? '0'+value : value;
}
// maximum value of slider
var slider_max = TEMPlate_slider_max;
// How many buttons are under slider
var slider_options_count = TEMPlate_slider_options_count;
// Unit for each of the button under slider
var range_units = new Array('hours', 'days', 'weeks', '* 30 days');
// How many times is value of button under slider bigger then 1second
var range_multipliers = new Array(60*60, 60*60*24, 60*60*24*7, 60*60*24*30);
$( "#slider" ).slider({
//value:100,
min: 0,
max: slider_max,
step: 1,
values: [0],
slide: function( event, ui ) {
var range_value = ui.value;
var option_size = slider_max/slider_options_count;
var range = Math.floor(range_value / (option_size));
if(range_value == slider_max ) range--;
var value = (range_value - range*option_size) + 1;
// set time_end and date_end with actual date/time
var date = new Date();
$("#time_end").val( leadingZero(date.getHours())+":"+leadingZero(date.getMinutes()) );
$("#date_end").val( leadingZero(date.getDate()) + "/" + leadingZero((date.getMonth()+1)) + "/" + date.getFullYear() );
// calculate starting timestamp
date.setTime( (date.getTime()/1000 - value*range_multipliers[range])*1000 );
// setting time_start and date_start with starting timestamp
$("#time_start").val( leadingZero(date.getHours())+":"+leadingZero(date.getMinutes()) );
$("#date_start").val( leadingZero(date.getDate()) + "/" + leadingZero(date.getMonth()+1) + "/" + leadingZero(date.getFullYear()) );
// set amount value
$("#amount").css('width', 'auto');
$("#amount").text("Last "+value+" "+ range_units[range] );
// set amount css
if( $("#amount").css('position') != 'absolute' )
{
$("#amount").css('position', 'absolute');
$("#inputs").css('margin-top', '55px');
}
$("#amount").css('top', $("#slider").offset().top+30);
//if( $.browsr.msie ) $("#amount").css('top', $("#slider").offset().top+20);
// count left position
var left = mouseX;
if( parseInt($("#amount").offset().left) < parseInt(left-10) ) left = $("a.ui-slider-handle").offset().left+10;
if( parseInt($('#amount').width()+left) > parseInt($("#slider").offset().left+$("#slider").width()) )
{
left = $("#slider").offset().left+$("#slider").width()-$("#amount").width();
}
$("#amount").css('left', left);
}
});
</script>
The problem is, I have four buttons above the slider with predefined values, they set the inputs, but I cant set the slider :-/. This is the buttons
问题是，我在滑块上方有四个带有预定义值的按钮，它们设置了输入，但我无法设置滑块：-/。这是按钮
<div style="margin-top: 5px; margin-bottom: 2px;">
<input type="button" class="ts" value="Last 24h" onclick="$('#slider').slider('option', 'value', 0);$('#slider').slider('refresh');$('#date_start').val('TEMPlate_l24h_start;');$('#date_end').val('TEMPlate_l24h_end;');$('#time_start').val('TEMPlate_time_end;');$('#time_end').val('TEMPlate_time_end;')">
<input type="button" class="ts" value="Last 2d" onclick="$('#date_start').val('TEMPlate_l2d_start;');$('#date_end').val('TEMPlate_l2d_end;');$('#time_start').val('TEMPlate_time_end;');$('#time_end').val('TEMPlate_time_end;')">
<input type="button" class="ts" value="Last 1w" onclick="$('#date_start').val('TEMPlate_l1w_start;');$('#date_end').val('TEMPlate_l1w_end;');$('#time_start').val('TEMPlate_time_end;');$('#time_end').val('TEMPlate_time_end;')">
<input type="button" class="ts" value="Last 30d" onclick="$('#date_start').val('TEMPlate_l1m_start;');$('#date_end').val('TEMPlate_l1m_end;');$('#time_start').val('TEMPlate_time_end;');$('#time_end').val('TEMPlate_time_end;')">
</div>
I tried various commands in "onclick" attribute, I tried to force the click on slider via event, I tried to force the "slide" event, set the value, nothing works :(
我在“onclick”属性中尝试了各种命令，我试图通过事件强制点击滑块，我试图强制“幻灯片”事件，设置值，没有任何作用:(
I tried it like this in firebug console:
我在萤火虫控制台中这样尝试过：
var e = jQuery.Event("click");
e.pageX = $('#slider').offset().left+100;
e.pageY = $('#slider').offset().top+7;
$('#slider').trigger(e);
$('#slider').slider('value', 2 );
$('#slider').slider( {value: 2} );
$('#slider').slider('option', 'value', 2 );
$('#slider').val( 2 );
$("#slider").trigger("slide");
var e = jQuery.Event("slide");
e.pageX = $('#slider').offset().left+100;
e.pageY = $('#slider').offset().top+7;
$('#slider').trigger(e);
I have really no idea what Im doing wrong, could anyone please help me? Thanks
我真的不知道我做错了什么，有人可以帮我吗？谢谢
采纳答案by GregL
The crux of your problem is that you specify the values: [0]option for the slider parameters, when you really only want the singular version.
问题的症结在于您指定了values: [0]滑块参数的选项，而您确实只想要单数版本。
i.e. value: 0
IE value: 0
You also only define the giant, unwieldy function for the slidecallback, not the changecallback as well (which is the one called if the value gets changed programmatically). To do this, try refactoring out that giant callback into its own function, and reference that in the slider setup:
您还只为slide回调定义了巨大的、笨拙的函数，而不是change回调（如果值以编程方式更改，则调用该函数）。为此，请尝试将那个巨大的回调重构为它自己的函数，并在滑块设置中引用它：
e.g.
例如
function sliderChange(event, ui) {
// big chunk of code here
}
$("#slider").slider({
min: 0,
max: slider_max,
step: 1,
value: 0,
slide: sliderChange,
change: sliderChange
});
Next, you will need to change that function to make sure it isn't using the mouseX co-ordinates for setting the position of the #amountdiv, since that won't be valid when you set the value programmatically using the buttons.
接下来，您需要更改该函数以确保它不使用 mouseX 坐标来设置#amountdiv的位置，因为当您使用按钮以编程方式设置值时，这将无效。
Finally, you should be able to use $('#slider').slider('value', <some_value>);to set the value. I recommend against using the onclickattribute, though, and refactoring it to something like:
最后，您应该可以使用$('#slider').slider('value', <some_value>);来设置值。onclick不过，我建议不要使用该属性，并将其重构为：
$('input.ts').click(function() {
var btnText = $(this).val();
if (btnText == 'Last 24h') {
$('#slider').slider('value', 0);
$('#date_start').val('TEMPlate_l24h_start;');
$('#date_end').val('TEMPlate_l24h_end;');
$('#time_start').val('TEMPlate_time_end;');
$('#time_end').val('TEMPlate_time_end;');
} else if (btnText == 'Last 2d') {
$('#slider').slider('value', 10); // put correct value here
$('#date_start').val('TEMPlate_l2d_start;');
$('#date_end').val('TEMPlate_l2d_end;');
$('#time_start').val('TEMPlate_time_end;');
$('#time_end').val('TEMPlate_time_end;');
} else if (btnText == 'Last 1w') {
$('#slider').slider('value', 15); // put correct value here
$('#date_start').val('TEMPlate_l1w_start;');
$('#date_end').val('TEMPlate_l1w_end;');
$('#time_start').val('TEMPlate_time_end;');
$('#time_end').val('TEMPlate_time_end;');
} else if (btnText == 'Last 30d') {
$('#slider').slider('value', 25); // put correct value here
$('#date_start').val('TEMPlate_l1m_start;');
$('#date_end').val('TEMPlate_l1m_end;');
$('#time_start').val('TEMPlate_time_end;');
$('#time_end').val('TEMPlate_time_end;');
}
return false;
});
You should also clean up that function a little (use an inner function perhaps to reduce the repetition).
您还应该稍微清理该函数（可能使用内部函数来减少重复）。
Does that make sense? The rest should be just minor tweaks.
那有意义吗？其余的应该只是小的调整。
EDIT:Here is the jsFiddle I used for testing. It's not quite there yet, but you get the idea: http://jsfiddle.net/greglockwood/NTrXH/3/
编辑：这是我用于测试的 jsFiddle。它还没有完全到位，但你明白了：http: //jsfiddle.net/greglockwood/NTrXH/3/
