Question

我有一个滑块可以选择时间范围，从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);

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

Answer 1

问题的关键在于，当您真正只需要单数版本时，为滑块参数指定values: [0]选项。

即。 value: 0

你也只为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
});

接下来，您需要更改该函数以确保它没有使用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/

Jquery设置滑块值

1 个答案: