library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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.

Browse Source 
Fixes #4432 - Allow animation when programmatically changing slider value
Fixes #4659 - Allow slider to animate if slider value is set programatically
This commit is contained in:
Richard Worth 2009-10-12 10:50:38 +00:00
parent 299f20b299
commit b7bf4b4527
2 changed files with 66 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
tests/visual/slider/slider_option_animate_true.html
View File

@ -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>

32
ui/jquery.ui.slider.js vendored
View File

@ -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;
}
@ -507,9 +520,10 @@ $.widget("ui.slider", $.extend({}, $.ui.mouse, {
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;