diff options
| -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; |