Как правильно управлять ползунками jQuery UI?

Я пишу веб-приложение, которое обновляет слайдеры jQuery UI через JavaScript. Я столкнулся с множеством проблем с обновлением слайдера после инициализации, но решил больше всего. Следующий вопрос по-прежнему открыт, и я не вижу утечки.Как правильно управлять ползунками jQuery UI?

Первый ползунок - это опорный ползунок, значения которого будут проверяться. Второй и третий слайдер представляет собой динамические изменения посетитель может сделать на веб-сайте, который вызывает изменение диапазона опорного ползунка. К сожалению, я не могу вернуться к минимуму 0 или максимум 100 после обновления второго и/или третьего ползунков. Минимальное значение будет 1, а максимальное значение будет 99.

Следующий код содержит полнофункциональную демонстрационную версию для воспроизведения этой проблемы. Код - это то же самое, что и именование.

<!DOCTYPE html> 
<html> 
    <head> 
    <title>jQuery Slider Demo</title> 
    <style type="text/css"> 
     .slider { margin: 20pt 10pt; } 
     #log { height: 100pt; overflow: auto; border: 1pt solid silver; } 
    </style> 
    </head> 
    <body> 
    <h1>jQuery Slider Demo</h1> 
    <strong>Range: <var id="slider-value"></var></strong> 
    <div id="slider" class="slider"></div> 
    <strong>Minimum: <var id="slider-min-value"></var></strong> 
    <div id="slider-min" class="slider"></div> 
    <strong>Maximum: <var id="slider-max-value"></var></strong> 
    <div id="slider-max" class="slider"></div> 
    <strong>Log:</strong> 
    <pre id="log" class="slider"></pre> 

    <!-- jQuery --> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.2.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 

    <!-- jQuery UI --> 
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"> 
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 

    <!-- Application --> 
    <script type="text/javascript"> 
     function log (msg) { 
     $('#log').html(msg + "\n" + $('#log').html()); 
     } 
     function _newrange (slider, min, max, reset) { 
     if (reset) reset = true; else reset = false; 
     if (slider == null || slider.slider() == null) { 
      log('slider parameter is not a slider'); 
      return false; 
     } 
     if (min == null || /^[0-9]+$/.exec(min) == null) { 
      log('min parameter is not a number'); 
      return false; 
     } 
     if (max == null || /^[0-9]+$/.exec(max) == null) { 
      log('max parameter is not a number'); 
      return false; 
     } 
     var oldmin = slider.slider('option', 'min'); 
     var oldmax = slider.slider('option', 'max'); 
     var oldvalmin = slider.slider('values', 0); 
     var oldvalmax = slider.slider('values', 1); 
     var newvalmin = min; 
     var newvalmax = max; 
     if (!reset) { 
      if (newvalmin >= min) newvalmin = oldvalmin; 
      if (newvalmax <= max) newvalmax = oldvalmax; 
      if (oldvalmin == oldmin) newvalmin = min; 
      if (oldvalmax == oldmax) newvalmax = max; 
     } 
     slider.slider('option', 'min', min); 
     slider.slider('option', 'max', max); 
     slider.slider('option', 'values', [ newvalmin, newvalmax ]); 
     log('new slider range from minimum ' + min + ' up to maximum ' + max); 
     return false; 
     } 
     function newrange() { 
     _newrange(
      $('#slider'), 
      $('#slider-min').slider('value'), 
      $('#slider-max').slider('value') 
     ); 
     $('#slider-value').html($('#slider').slider('values', 0) + ' - ' + $('#slider').slider('values', 1)); 
     $('#slider-min-value').html($('#slider-min').slider('value')); 
     $('#slider-max-value').html($('#slider-max').slider('value')); 
     } 
     $(document).ready(function(){ 
     $('#slider-min').slider({ 
      range: 'min', 
      min: 0, 
      max: 49, 
      value: 0, 
      slide: function(event, widget) { newrange(); } 
     }); 
     $('#slider-max').slider({ 
      range: 'max', 
      min: 50, 
      max: 100, 
      value: 100, 
      slide: function(event, widget) { newrange(); } 
     }); 
     $('#slider').slider({ 
      range: true, 
      min: $('#slider-min').slider('option', 'min'), 
      max: $('#slider-max').slider('option', 'max'), 
      values: [ $('#slider-min').slider('option', 'min'), $('#slider-max').slider('option', 'max') ], 
      slide: function(event, widget) { 
      $('#slider-value').html(widget.values[0] + ' - ' + widget.values[1]); 
      log('new slider values from ' + widget.values[0] + ' up to ' + widget.values[1]); 
      } 
     }); 
     newrange(); 
     }); 
    </script> 
    </body> 
</html>

источник

2013-06-12 burnersk

Вызывает искажение в слайдере jQuery, в [это демо] (http://jsfiddle.net/arunpjohny/XLsFx/1/) наименьшее значение ползунка равно 1 вместо 0, перемещение 1 пункта вправо дает значение 0 –

@ArunPJohny вы бы конвертировали свой комментарий в ответ? – burnersk

сделано, пожалуйста, проверьте ниже –

Это была моя ошибка. Я думал, что событие slide даст мне новые значения, но это не будет. slide возвращает старые значения. stop - это событие, в котором я нуждаюсь.

источник

2013-07-03 13:58:08 burnersk

Выглядит Илке ошибка в слайдере JQuery, в this dem о наименьшее значение слайдера 1 вместо 0, двигаясь 1 балл вправо дает значение 0

<strong>Minimum: <var id="slider-min-value"></var></strong> 
<div id="slider-min" class="slider"></div>

$('#slider-min').slider({ 
    range: 'min', 
    min: 0, 
    max: 49, 
    value: 0, 
    slide: function(event, widget) { 
     $('#slider-min-value').html($('#slider-min').slider('value')); 
     //newrange(); 
    } 
});

источник

2013-06-12 12:56:54

Как правильно управлять ползунками jQuery UI?

ответ

Смежные вопросы