如何正確處理jQuery UI滑塊？

我在寫一個web應用程序，通過JavaScript更新一些jQuery UI滑塊。初始化後更新滑塊時遇到了很多問題，但解決得最多。以下問題仍然存在，我沒有看到泄漏。如何正確處理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

看起來ILKE的錯誤在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滑塊？

回答

相關問題