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 1 Packages Projects Releases Wiki Activity

slider:

Browse Source 
- implemented animate method
- slider min/max values could be exceeded using the keyboard (fixes #3737)
This commit is contained in:
Paul Bakaus 2009-01-28 22:07:46 +00:00
parent a853e4fd17
commit be1b2b023a
1 changed files with 30 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
ui/ui.slider.js
View File

@ -123,10 +123,12 @@ $.widget("ui.slider", $.extend({}, $.ui.mouse, {
break; break;
case $.ui.keyCode.UP: case $.ui.keyCode.UP:
case $.ui.keyCode.RIGHT: case $.ui.keyCode.RIGHT:
if(curVal == self._valueMax()) return;
newVal = curVal + step; newVal = curVal + step;
break; break;
case $.ui.keyCode.DOWN: case $.ui.keyCode.DOWN:
case $.ui.keyCode.LEFT: case $.ui.keyCode.LEFT:
if(curVal == self._valueMin()) return;
newVal = curVal - step; newVal = curVal - step;
break; break;
} }
@ -209,10 +211,10 @@ $.widget("ui.slider", $.extend({}, $.ui.mouse, {
var offset = closestHandle.offset(); var offset = closestHandle.offset();
var mouseOverHandle = !$(event.target).parents().andSelf().is('.ui-slider-handle'); var mouseOverHandle = !$(event.target).parents().andSelf().is('.ui-slider-handle');
this.clickOffset = mouseOverHandle ? { left: 0, top: 0 } : { this._clickOffset = mouseOverHandle ? { left: 0, top: 0 } : {
left: event.pageX - offset.left + (parseInt(closestHandle.css('marginLeft')) || 0), left: event.pageX - offset.left + (parseInt(closestHandle.css('marginLeft'),10) || 0),
top: event.pageY - offset.top + (parseInt(closestHandle.css('marginTop')) || 0) top: event.pageY - offset.top + (parseInt(closestHandle.css('marginTop'),10) || 0)
} };
normValue = this._normValueFromMouse(position); normValue = this._normValueFromMouse(position);
this._slide(event, index, normValue); this._slide(event, index, normValue);
@ -242,7 +244,7 @@ $.widget("ui.slider", $.extend({}, $.ui.mouse, {
this._stop(event); this._stop(event);
this._change(event); this._change(event);
this._handleIndex = null; this._handleIndex = null;
this.clickOffset = null; this._clickOffset = null;
return false; return false;
@ -253,10 +255,10 @@ $.widget("ui.slider", $.extend({}, $.ui.mouse, {
var pixelTotal, pixelMouse; var pixelTotal, pixelMouse;
if ('horizontal' == this.orientation) { if ('horizontal' == this.orientation) {
pixelTotal = this.elementSize.width; pixelTotal = this.elementSize.width;
pixelMouse = position.x - this.elementOffset.left - (this.clickOffset ? this.clickOffset.left : 0); pixelMouse = position.x - this.elementOffset.left - (this._clickOffset ? this._clickOffset.left : 0);
} else { } else {
pixelTotal = this.elementSize.height; pixelTotal = this.elementSize.height;
pixelMouse = position.y - this.elementOffset.top - (this.clickOffset ? this.clickOffset.top : 0); pixelMouse = position.y - this.elementOffset.top - (this._clickOffset ? this._clickOffset.top : 0);
} }
var percentMouse = (pixelMouse / pixelTotal); var percentMouse = (pixelMouse / pixelTotal);
@ -305,7 +307,7 @@ $.widget("ui.slider", $.extend({}, $.ui.mouse, {
}); });
var otherVal = this.values(index ? 0 : 1); var otherVal = this.values(index ? 0 : 1);
if (allowed !== false) { if (allowed !== false) {
this.values(index, newVal); this.values(index, newVal, !( event.type == 'mousedown' && this.options.animate ));
} }
} }
@ -318,7 +320,7 @@ $.widget("ui.slider", $.extend({}, $.ui.mouse, {
value: newVal value: newVal
}); });
if (allowed !== false) { if (allowed !== false) {
this._setData('value', newVal); this._setData('value', newVal, ( event.type == 'mousedown' && this.options.animate ));
} }
} }
@ -350,11 +352,11 @@ $.widget("ui.slider", $.extend({}, $.ui.mouse, {
}, },
values: function(index, newValue) { values: function(index, newValue, noAnimation) {
if (arguments.length > 1) { if (arguments.length > 1) {
this.options.values[index] = newValue; this.options.values[index] = newValue;
this._refreshValue(); this._refreshValue(!noAnimation);
this._change(); this._change();
} }
@ -430,34 +432,36 @@ $.widget("ui.slider", $.extend({}, $.ui.mouse, {
return valueMax; return valueMax;
}, },
_refreshValue: function() { _refreshValue: function(animate) {
var oRange = this.options.range; var oRange = this.options.range, o = this.options, self = this;
if (this.options.values && this.options.values.length) { if (this.options.values && this.options.values.length) {
var self = this, vp0, vp1; var vp0, vp1;
this.handles.each(function(i, j) { this.handles.each(function(i, j) {
var valPercent = (self.values(i) - self._valueMin()) / (self._valueMax() - self._valueMin()) * 100; var valPercent = (self.values(i) - self._valueMin()) / (self._valueMax() - self._valueMin()) * 100;
$(this).css(self.orientation == 'horizontal' ? 'left' : 'bottom', valPercent + '%'); var _set = {}; _set[self.orientation == 'horizontal' ? 'left' : 'bottom'] = valPercent + '%';
$(this).stop(1,1)[animate ? 'animate' : 'css'](_set, o.animate);
if (self.options.range === true) { if (self.options.range === true) {
if (self.orientation == 'horizontal') { if (self.orientation == 'horizontal') {
(i == 0) && self.range.css('left', valPercent + '%'); (i == 0) && self.range.stop(1,1)[animate ? 'animate' : 'css']({ left: valPercent + '%' }, o.animate);
(i == 1) && self.range.css('width', (valPercent - lastValPercent) + '%'); (i == 1) && self.range[animate ? 'animate' : 'css']({ width: (valPercent - lastValPercent) + '%' }, { queue: false, duration: o.animate });
} else { } else {
(i == 0) && self.range.css('bottom', (valPercent) + '%'); (i == 0) && self.range.stop(1,1)[animate ? 'animate' : 'css']({ bottom: (valPercent) + '%' }, o.animate);
(i == 1) && self.range.css('height', (valPercent - lastValPercent) + '%'); (i == 1) && self.range[animate ? 'animate' : 'css']({ height: (valPercent - lastValPercent) + '%' }, { queue: false, duration: o.animate });
} }
} }
lastValPercent = valPercent; lastValPercent = valPercent;
}); });
} else { } else {
var valPercent = (this.value() - this._valueMin()) / (this._valueMax() - this._valueMin()) * 100; var valPercent = (this.value() - this._valueMin()) / (this._valueMax() - this._valueMin()) * 100;
this.handle.css(this.orientation == 'horizontal' ? 'left' : 'bottom', valPercent + '%'); var _set = {}; _set[self.orientation == 'horizontal' ? 'left' : 'bottom'] = valPercent + '%';
this.handle.stop(1,1)[animate ? 'animate' : 'css'](_set, o.animate);
(oRange == "min") && (this.orientation == "horizontal") && this.range.css({ left: 0, width: valPercent + '%' }); (oRange == "min") && (this.orientation == "horizontal") && this.range.stop(1,1)[animate ? 'animate' : 'css']({ left: 0, width: valPercent + '%' }, o.animate);
(oRange == "max") && (this.orientation == "horizontal") && this.range.css({ left: valPercent + '%', width: (100 - valPercent) + '%' }); (oRange == "max") && (this.orientation == "horizontal") && this.range[animate ? 'animate' : 'css']({ left: valPercent + '%', width: (100 - valPercent) + '%' }, { queue: false, duration: o.animate });
(oRange == "min") && (this.orientation == "vertical") && this.range.css({ top: (100 - valPercent) + '%', height: valPercent + '%' }); (oRange == "min") && (this.orientation == "vertical") && this.range.stop(1,1)[animate ? 'animate' : 'css']({ top: (100 - valPercent) + '%', height: valPercent + '%' }, o.animate);
(oRange == "max") && (this.orientation == "vertical") && this.range.css({ bottom: valPercent + '%', height: (100 - valPercent) + '%' }); (oRange == "max") && (this.orientation == "vertical") && this.range[animate ? 'animate' : 'css']({ bottom: valPercent + '%', height: (100 - valPercent) + '%' }, { queue: false, duration: o.animate });
} }
} }
@ -469,6 +473,7 @@ $.extend($.ui.slider, {
version: "@VERSION", version: "@VERSION",
eventPrefix: "slide", eventPrefix: "slide",
defaults: { defaults: {
animate: 1000,
delay: 0, delay: 0,
distance: 0, distance: 0,
max: 100, max: 100,