У меня есть один ползунок для выбора временного диапазона, от 1 (, 2, 3, ..) дня (, недель, месяцев, ..) назад до настоящего времени. Он устанавливает время и дату во входных данных и правильно работает с этим кодом.
<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>
Проблема в том, что у меня есть четыре кнопки над ползунком с предопределенными значениями, они задают входы, но я не могу установить ползунок :-/. это кнопки
<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>
Я пробовал различные команды в атрибуте «onclick», я пытался принудительно щелкнуть ползунок с помощью события, я пытался принудительно вызвать событие «слайд», установить значение, ничего не работает :(
Я пробовал это так в консоли firebug:
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);
Я действительно понятия не имею, что я делаю неправильно, может ли кто-нибудь помочь мне? Спасибо
