]> source.dussan.org Git - jquery-ui.git/commitdiff
projects / jquery-ui.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 299f20b)
Slider: Fixed animation to respond to keypress as well as mouse click, animation...
authorRichard Worth <rdworth@gmail.com>
Mon, 12 Oct 2009 10:50:38 +0000 (10:50 +0000)
committerRichard Worth <rdworth@gmail.com>
Mon, 12 Oct 2009 10:50:38 +0000 (10:50 +0000)
Fixes #4432 - Allow animation when programmatically changing slider value
Fixes #4659 - Allow slider to animate if slider value is set programatically

tests/visual/slider/slider_option_animate_true.html patch | blob | history
ui/jquery.ui.slider.js patch | blob | history

diff --git a/tests/visual/slider/slider_option_animate_true.html b/tests/visual/slider/slider_option_animate_true.html
index 40bbb55b64e2ed148f3f0600363b214c677de446..dba82c083c1135b17b1abc3a9f83d63c2e217f50 100644 (file)
--- 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 84dc9633c1971cd4763a8b942106ffbd67958435..f8140354094bfb87f54f46af235c36b2ae73d6f9 100644 (file)
--- 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;
The official jQuery user interface library: https://github.com/jquery/jquery-ui