Я пишу веб-приложение, которое обновляет некоторые ползунки пользовательского интерфейса jQuery через JavaScript. Я столкнулся со многими проблемами с обновлением ползунка после инициализации, но решил большинство из них. Следующий вопрос все еще открыт, и я не вижу утечки.
Первый ползунок является эталонным ползунком, значения которого будут проверяться. Второй и третий слайдеры представляют собой динамические изменения, которые посетитель может внести на веб-сайт, что приводит к изменению диапазона эталонного слайдера. К сожалению, я не могу вернуться к минимальному 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>
