r3361 committed - Slider: Fixed animation to respond to keypress as well as mouse click,...
Revision: 3361
Author: rdworth
Date: Mon Oct 12 03:50:38 2009
Log: 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
http://code.google.com/p/jquery-ui/source/detail?r=3361
Modified:
/trunk/tests/visual/slider/slider_option_animate_true.html
/trunk/ui/jquery.ui.slider.js
=======================================
--- /trunk/tests/visual/slider/slider_option_animate_true.html Thu Sep 17
03:39:12 2009
+++ /trunk/tests/visual/slider/slider_option_animate_true.html Mon Oct 12
03:50:38 2009
@@ -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>
=======================================
--- /trunk/ui/jquery.ui.slider.js Mon Oct 12 02:27:23 2009
+++ /trunk/ui/jquery.ui.slider.js Mon Oct 12 03:50:38 2009
@@ -19,6 +19,7 @@
var self = this, o = this.options;
this._keySliding = false;
+ this._animateOff = true;
this._handleIndex = null;
this._detectOrientation();
this._mouseInit();
@@ -176,6 +177,8 @@
this._refreshValue();
+ this._animateOff = false;
+
},
destroy: function() {
@@ -254,6 +257,7 @@
normValue = this._normValueFromMouse(position);
this._slide(event, index, normValue);
+ this._animateOff = true;
return true;
},
@@ -281,6 +285,7 @@
this._handleIndex = null;
this._clickOffset = null;
+ this._animateOff = false;
return false;
},
@@ -356,7 +361,7 @@
});
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 @@
value: newVal
});
if (allowed !== false) {
- this._setData('value', newVal, ( event.type == 'mousedown' &&
this.options.animate ));
+ this.value(newVal);
}
}
@@ -407,7 +412,8 @@
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 @@
},
- 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 @@
},
- _setData: function(key, value, animated) {
+ _setData: function(key, value) {
$.widget.prototype._setData.apply(this, arguments);
@@ -457,11 +463,18 @@
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 @@
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;
Topic Participants
Paul Bakaus
Richard Worth