diff options
| author | Richard Worth <rdworth@gmail.com> | 2009-10-12 10:50:38 +0000 |
|---|---|---|
| committer | Richard Worth <rdworth@gmail.com> | 2009-10-12 10:50:38 +0000 |
| commit | b7bf4b4527d3e849b55274e38e62c0d893779a1a (patch) | |
| tree | 3cabfc5911476e30a32a615e1dde243003cb83c3 | |
| parent | 299f20b29966ba5c4cd3570ccb9ca871f39242bb (diff) | |
| download | jquery-ui-b7bf4b4527d3e849b55274e38e62c0d893779a1a.tar.gz jquery-ui-b7bf4b4527d3e849b55274e38e62c0d893779a1a.zip | |
Slider: Fixed animation to respond to keypress as well as mouse click, animation still does not occur at init or during mouse drag slide, both by design. Animation now occurs, if animate is on, when using the value method, but not when using the value option. This allows for animated and non-animated programmatic setting of values without changing the animate option.
Fixes #4432 - Allow animation when programmatically changing slider value
Fixes #4659 - Allow slider to animate if slider value is set programatically
| -rw-r--r-- | tests/visual/slider/slider_option_animate_true.html | 45 | ||||
| -rw-r--r-- | ui/jquery.ui.slider.js | 34 |
2 files changed, 66 insertions, 13 deletions
diff --git a/tests/visual/slider/slider_option_animate_true.html b/tests/visual/slider/slider_option_animate_true.html index 40bbb55b6..dba82c083 100644 --- a/tests/visual/slider/slider_option_animate_true.html +++ b/tests/visual/slider/slider_option_animate_true.html @@ -7,17 +7,56 @@ <script type="text/javascript" src="../../../jquery-1.3.2.js"></script> <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> <script type="text/javascript" src="../../../ui/jquery.ui.slider.js"></script> + + <style type="text/css"> + fieldset { padding: 1em; margin: 1em; } + legend { font-size: 1.3em; font-family: monospace; font-weight: bold; } + #slider1 { margin: 1em; } + #slider2 { margin: 1em; height: 400px; } + </style> + <script type="text/javascript"> $(function() { - $("#slider").slider({ - animate: true + $("#slider1").slider({ + animate: true, + step: 10 + }); + $("#slider2").slider({ + animate: true, + orientation: 'vertical', + step: 5, + values: [5, 15, 35, 75] }); }); </script> </head> <body> -<div id="slider"></div> +<fieldset> + <legend>$("#slider1").slider({ + animate: true, + step: 10 + });</legend> +<div id="slider1"></div> +<button onclick="$('#slider1').slider('value', 15);">method value: 15</button> +<button onclick="$('#slider1').slider('value', 75);">method value: 75</button> +<button onclick="$('#slider1').slider('option', 'value', 25);">option value: 25</button> +<button onclick="$('#slider1').slider('option', 'value', 85);">option value: 85</button> +</fieldset> + +<fieldset> + <legend>$("#slider2").slider({ + animate: true, + orientation: 'vertical', + step: 5, + values: [5, 15, 35, 75] + });</legend> +<div id="slider2"></div> +<button onclick="$('#slider2').slider('values', [10, 20, 30, 40]);">method values: [10, 20, 30, 40]</button> +<button onclick="$('#slider2').slider('values', [80, 70, 60, 50]);">method values: [80, 70, 60, 50]</button> +<button onclick="$('#slider2').slider('option', 'values', [20, 30, 40, 50]);">option values: [20, 30, 40, 50]</button> +<button onclick="$('#slider2').slider('option', 'values', [90, 80, 70, 60]);">option values: [90, 80, 70, 60]</button> +</fieldset> </body> </html> diff --git a/ui/jquery.ui.slider.js b/ui/jquery.ui.slider.js index 84dc9633c..f81403540 100644 --- a/ui/jquery.ui.slider.js +++ b/ui/jquery.ui.slider.js @@ -19,6 +19,7 @@ $.widget("ui.slider", $.extend({}, $.ui.mouse, { var self = this, o = this.options; this._keySliding = false; + this._animateOff = true; this._handleIndex = null; this._detectOrientation(); this._mouseInit(); @@ -176,6 +177,8 @@ $.widget("ui.slider", $.extend({}, $.ui.mouse, { this._refreshValue(); + this._animateOff = false; + }, destroy: function() { @@ -254,6 +257,7 @@ $.widget("ui.slider", $.extend({}, $.ui.mouse, { normValue = this._normValueFromMouse(position); this._slide(event, index, normValue); + this._animateOff = true; return true; }, @@ -281,6 +285,7 @@ $.widget("ui.slider", $.extend({}, $.ui.mouse, { this._handleIndex = null; this._clickOffset = null; + this._animateOff = false; return false; }, @@ -356,7 +361,7 @@ $.widget("ui.slider", $.extend({}, $.ui.mouse, { }); var otherVal = this.values(index ? 0 : 1); if (allowed !== false) { - this.values(index, newVal, ( event.type == 'mousedown' && this.options.animate ), true); + this.values(index, newVal, true); } } @@ -369,7 +374,7 @@ $.widget("ui.slider", $.extend({}, $.ui.mouse, { value: newVal }); if (allowed !== false) { - this._setData('value', newVal, ( event.type == 'mousedown' && this.options.animate )); + this.value(newVal); } } @@ -407,7 +412,8 @@ $.widget("ui.slider", $.extend({}, $.ui.mouse, { if (arguments.length) { newValue = newValue >= this.options.min ? newValue : this.options.min; newValue = newValue <= this.options.max ? newValue : this.options.max; - this._setData("value", newValue); + this.options.value = newValue; + this._refreshValue(); this._change(null, 0); } @@ -415,11 +421,11 @@ $.widget("ui.slider", $.extend({}, $.ui.mouse, { }, - values: function(index, newValue, animated, noPropagation) { + values: function(index, newValue, noPropagation) { if (arguments.length > 1) { this.options.values[index] = newValue; - this._refreshValue(animated); + this._refreshValue(); if(!noPropagation) this._change(null, index); } @@ -435,7 +441,7 @@ $.widget("ui.slider", $.extend({}, $.ui.mouse, { }, - _setData: function(key, value, animated) { + _setData: function(key, value) { $.widget.prototype._setData.apply(this, arguments); @@ -457,10 +463,17 @@ $.widget("ui.slider", $.extend({}, $.ui.mouse, { this.element .removeClass("ui-slider-horizontal ui-slider-vertical") .addClass("ui-slider-" + this.orientation); - this._refreshValue(animated); + this._refreshValue(); break; case 'value': - this._refreshValue(animated); + this._animateOff = true; + this._refreshValue(); + this._animateOff = false; + break; + case 'values': + this._animateOff = true; + this._refreshValue(); + this._animateOff = false; break; } @@ -506,10 +519,11 @@ $.widget("ui.slider", $.extend({}, $.ui.mouse, { var valueMax = this.options.max; return valueMax; }, - - _refreshValue: function(animate) { + + _refreshValue: function() { var oRange = this.options.range, o = this.options, self = this; + var animate = (!this._animateOff) ? o.animate : false; if (this.options.values && this.options.values.length) { var vp0, vp1; |