Jquery设置 slider 值

Question

我有一个 slider 来选择时间范围，从 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>

问题是，我在 slider 上方有四个带有预定义值的按钮，它们设置输入，但我无法设置 slider :-/。这是按钮

   <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”属性中尝试了各种命令，我尝试通过事件强制单击 slider ，我尝试强制“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);

我真的不知道我做错了什么，有人可以帮助我吗？谢谢

Answer 1

问题的症结在于您指定了 values: [0]当您确实只需要单一版本时， slider 参数的选项。

即value: 0

您还只为 slide 定义了巨大且笨重的函数。回调，而不是change以及回调(如果以编程方式更改值，则调用该回调)。为此，请尝试将巨大的回调重构为自己的函数，并在 slider 设置中引用它:

例如

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 的位置。 div，因为当您使用按钮以编程方式设置值时，它无效。

最后，您应该能够使用$('#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/