JQuery установить значение слайдера - PullRequest
Новая
       4

JQuery установить значение слайдера

6 голосов
/ 15 ноября 2011

У меня есть один ползунок для выбора диапазона времени, от 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", я пытался принудительно нажать на ползунок через событие, я пытался принудительно вызвать событие "slide", установить значение, ничего не работает

Я попробовал это так в консоли 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);

Я действительно понятия не имею, что я делаю неправильно, кто-нибудь может мне помочь? Спасибо

1 Ответ

6 голосов
/ 15 ноября 2011

Суть вашей проблемы в том, что вы задаете опцию values: [0] для параметров ползунка, когда вам действительно нужна единственная версия.

т.е. value: 0

Вы также определяете гигантскую громоздкую функцию только для обратного вызова slide, но не для обратного вызова change (который вызывается, если значение изменяется программно). Чтобы сделать это, попробуйте преобразовать этот гигантский обратный вызов в его собственную функцию и сослаться на это в настройке слайдера:

, например 

function sliderChange(event, ui) {
    // big chunk of code here
}

$("#slider").slider({
    min: 0,
    max: slider_max,
    step: 1,
    value: 0,
    slide: sliderChange,
    change: sliderChange
});

Далее вам нужно будет изменить эту функцию, чтобы убедиться, что она не использует координаты mouseX для установки положения элемента #amount, так как это не будет действительным, если вы установите значение программно с помощью кнопки.

Наконец, вы можете использовать $('#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;
});

Вы также должны немного очистить эту функцию (возможно, используйте внутреннюю функцию, чтобы уменьшить количество повторений).

Это имеет смысл? Остальные должны быть просто незначительными изменениями.

РЕДАКТИРОВАТЬ: Вот jsFiddle, который я использовал для тестирования. Это еще не совсем там, но вы поняли: http://jsfiddle.net/greglockwood/NTrXH/3/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...