📄 slider.js
字号:
}
// this.verifyOffset();
t.setDelta(this.thumbCenterPoint.x, this.thumbCenterPoint.y);
var _p = t.getTargetCoord(x, y);
var p = [_p.x, _p.y];
if (this.animate && YAHOO.widget.Slider.ANIM_AVAIL && t._graduated && !skipAnim) {
// this.thumb._animating = true;
this.lock();
setTimeout( function() { self.moveOneTick(p); }, this.tickPause );
} else if (this.animate && YAHOO.widget.Slider.ANIM_AVAIL && !skipAnim) {
// this.thumb._animating = true;
this.lock();
var oAnim = new YAHOO.util.Motion(
t.id, { points: { to: p } }, 0.4, YAHOO.util.Easing.easeOut );
oAnim.onComplete.subscribe( function() { self.endMove(); } );
oAnim.animate();
} else {
t.setDragElPos(x, y);
// this.fireEvents();
this.endMove();
}
};
/**
* Move the slider one tick mark towards its final coordinate. Used
* for the animation when tick marks are defined
*
* @param {int[]} the destination coordinate
* @private
*/
YAHOO.widget.Slider.prototype.moveOneTick = function(finalCoord) {
var t = this.thumb;
var curCoord = YAHOO.util.Dom.getXY(t.getEl());
var tmp;
// var thresh = Math.min(t.tickSize + (Math.floor(t.tickSize/2)), 10);
// var thresh = 10;
// var thresh = t.tickSize + (Math.floor(t.tickSize/2));
var nextCoord = null;
if (t._isRegion) {
nextCoord = this._getNextX(curCoord, finalCoord);
var tmpX = (nextCoord) ? nextCoord[0] : curCoord[0];
nextCoord = this._getNextY([tmpX, curCoord[1]], finalCoord);
} else if (t._isHoriz) {
nextCoord = this._getNextX(curCoord, finalCoord);
} else {
nextCoord = this._getNextY(curCoord, finalCoord);
}
if (nextCoord) {
// move to the next coord
// YAHOO.util.Dom.setXY(t.getEl(), nextCoord);
// var el = t.getEl();
// YAHOO.util.Dom.setStyle(el, "left", (nextCoord[0] + this.thumb.deltaSetXY[0]) + "px");
// YAHOO.util.Dom.setStyle(el, "top", (nextCoord[1] + this.thumb.deltaSetXY[1]) + "px");
this.thumb.alignElWithMouse(t.getEl(), nextCoord[0], nextCoord[1]);
// check if we are in the final position, if not make a recursive call
if (!(nextCoord[0] == finalCoord[0] && nextCoord[1] == finalCoord[1])) {
var self = this;
setTimeout(function() { self.moveOneTick(finalCoord); },
this.tickPause);
} else {
this.endMove();
}
} else {
this.endMove();
}
//this.tickPause = Math.round(this.tickPause/2);
};
/**
* Returns the next X tick value based on the current coord and the target coord.
* @private/
*/
YAHOO.widget.Slider.prototype._getNextX = function(curCoord, finalCoord) {
var t = this.thumb;
var thresh;
var tmp = [];
var nextCoord = null;
if (curCoord[0] > finalCoord[0]) {
thresh = t.tickSize - this.thumbCenterPoint.x;
tmp = t.getTargetCoord( curCoord[0] - thresh, curCoord[1] );
nextCoord = [tmp.x, tmp.y];
} else if (curCoord[0] < finalCoord[0]) {
thresh = t.tickSize + this.thumbCenterPoint.x;
tmp = t.getTargetCoord( curCoord[0] + thresh, curCoord[1] );
nextCoord = [tmp.x, tmp.y];
} else {
// equal, do nothing
}
return nextCoord;
};
/**
* Returns the next Y tick value based on the current coord and the target coord.
* @private/
*/
YAHOO.widget.Slider.prototype._getNextY = function(curCoord, finalCoord) {
var t = this.thumb;
// var thresh = t.tickSize;
// var thresh = t.tickSize + this.thumbCenterPoint.y;
var thresh;
var tmp = [];
var nextCoord = null;
if (curCoord[1] > finalCoord[1]) {
thresh = t.tickSize - this.thumbCenterPoint.y;
tmp = t.getTargetCoord( curCoord[0], curCoord[1] - thresh );
nextCoord = [tmp.x, tmp.y];
} else if (curCoord[1] < finalCoord[1]) {
thresh = t.tickSize + this.thumbCenterPoint.y;
tmp = t.getTargetCoord( curCoord[0], curCoord[1] + thresh );
nextCoord = [tmp.x, tmp.y];
} else {
// equal, do nothing
}
return nextCoord;
};
/**
* Resets the constraints before moving the thumb.
* @private
*/
YAHOO.widget.Slider.prototype.b4MouseDown = function(e) {
this.thumb.autoOffset();
this.thumb.resetConstraints();
};
/**
* Handles the mousedown event for the slider background
*
* @private
*/
YAHOO.widget.Slider.prototype.onMouseDown = function(e) {
// this.resetConstraints(true);
// this.thumb.resetConstraints(true);
if (! this.isLocked() && this.backgroundEnabled) {
var x = YAHOO.util.Event.getPageX(e);
var y = YAHOO.util.Event.getPageY(e);
this.focus();
this.moveThumb(x, y);
}
};
/**
* Handles the onDrag event for the slider background
*
* @private
*/
YAHOO.widget.Slider.prototype.onDrag = function(e) {
if (! this.isLocked()) {
var x = YAHOO.util.Event.getPageX(e);
var y = YAHOO.util.Event.getPageY(e);
this.moveThumb(x, y, true);
}
};
/**
* Fired when the slider movement ends
*
* @private
*/
YAHOO.widget.Slider.prototype.endMove = function () {
// this._animating = false;
this.unlock();
this.moveComplete = true;
this.fireEvents();
};
/**
* Fires the change event if the value has been changed. Ignored if we are in
* the middle of an animation as the event will fire when the animation is
* complete
*
* @private
*/
YAHOO.widget.Slider.prototype.fireEvents = function () {
var t = this.thumb;
t.cachePosition();
if (! this.isLocked()) {
if (t._isRegion) {
var newX = t.getXValue();
var newY = t.getYValue();
if (newX != this.previousX || newY != this.previousY) {
this.onChange( newX, newY );
}
this.previousX = newX;
this.previousY = newY;
} else {
var newVal = t.getValue();
if (newVal != this.previousVal) {
this.onChange( newVal );
}
this.previousVal = newVal;
}
if (this.moveComplete) {
this.onSlideEnd();
this.moveComplete = false;
}
}
};
/**
* toString
* @return {string} string representation of the instance
*/
YAHOO.widget.Slider.prototype.toString = function () {
return ("Slider (" + this.type +") " + this.id);
};
/**
* A drag and drop implementation to be used as the thumb of a slider.
*
* @extends YAHOO.util.DD
* @constructor
* @param {String} id the id of the slider html element
* @param {String} sGroup the group of related DragDrop items
* @param {int} iLeft the number of pixels the element can move left
* @param {int} iRight the number of pixels the element can move right
* @param {int} iUp the number of pixels the element can move up
* @param {int} iDown the number of pixels the element can move down
* @param {int} iTickSize optional parameter for specifying that the element
* should move a certain number pixels at a time.
*/
YAHOO.widget.SliderThumb = function(id, sGroup, iLeft, iRight, iUp, iDown, iTickSize) {
if (id) {
this.init(id, sGroup);
/**
* The id of the thumbs parent HTML element (the slider background element).
* @type string
*/
this.parentElId = sGroup;
}
/**
* Overrides the isTarget property in YAHOO.util.DragDrop
* @private
*/
this.isTarget = false;
/**
* The tick size for this slider
* @type int
*/
this.tickSize = iTickSize;
/**
* Informs the drag and drop util that the offsets should remain when
* resetting the constraints. This preserves the slider value when
* the constraints are reset
* @type boolean
*/
this.maintainOffset = true;
this.initSlider(iLeft, iRight, iUp, iDown, iTickSize);
this.scroll = false;
};
// YAHOO.widget.SliderThumb.prototype = new YAHOO.util.DD();
YAHOO.extend(YAHOO.widget.SliderThumb, YAHOO.util.DD);
/**
* Returns the difference between the location of the thumb and its parent.
* @param {Array} Optionally accepts the position of the parent
* @type int[]
*/
YAHOO.widget.SliderThumb.prototype.getOffsetFromParent = function(parentPos) {
var myPos = YAHOO.util.Dom.getXY(this.getEl());
var ppos = parentPos || YAHOO.util.Dom.getXY(this.parentElId);
return [ (myPos[0] - ppos[0]), (myPos[1] - ppos[1]) ];
};
/**
* The (X and Y) difference between the thumb location and its parent
* (the slider background) when the control is instantiated.
* @type int[]
*/
YAHOO.widget.SliderThumb.prototype.startOffset = null;
/**
* Flag used to figure out if this is a horizontal or vertical slider
*
* @type boolean
* @private
*/
YAHOO.widget.SliderThumb.prototype._isHoriz = false;
/**
* Cache the last value so we can check for change
*
* @type int
* @private
*/
YAHOO.widget.SliderThumb.prototype._prevVal = 0;
/**
* initial element X
*
* @type int
* @private
*/
// YAHOO.widget.SliderThumb.prototype._initX = 0;
/**
* initial element Y
*
* @type int
* @private
*/
// YAHOO.widget.SliderThumb.prototype._initY = 0;
/**
* The slider is _graduated if there is a tick interval defined
*
* @type boolean
* @private
*/
YAHOO.widget.SliderThumb.prototype._graduated = false;
/**
* Set up the slider, must be called in the constructor of all subclasses
*
* @param {int} iLeft the number of pixels the element can move left
* @param {int} iRight the number of pixels the element can move right
* @param {int} iUp the number of pixels the element can move up
* @param {int} iDown the number of pixels the element can move down
* @param {int} iTickSize the width of the tick interval.
*/
YAHOO.widget.SliderThumb.prototype.initSlider = function (iLeft, iRight, iUp, iDown,
iTickSize) {
this.setXConstraint(iLeft, iRight, iTickSize);
this.setYConstraint(iUp, iDown, iTickSize);
if (iTickSize && iTickSize > 1) {
this._graduated = true;
}
this._isHoriz = (iLeft > 0 || iRight > 0);
this._isVert = (iUp > 0 || iDown > 0);
this._isRegion = (this._isHoriz && this._isVert);
};
/**
* Clear's the slider's ticks
*/
YAHOO.widget.SliderThumb.prototype.clearTicks = function () {
YAHOO.widget.SliderThumb.superclass.clearTicks.call(this);
this._graduated = false;
};
/**
* Gets the current offset from the element's start position in
* pixels.
*
* @return {int} the number of pixels (positive or negative) the
* slider has moved from the start position.
*/
YAHOO.widget.SliderThumb.prototype.getValue = function () {
if (!this.available) { return 0; }
var val = (this._isHoriz) ? this.getXValue() : this.getYValue();
return val;
};
/**
* Gets the current X offset from the element's start position in
* pixels.
*
* @return {int} the number of pixels (positive or negative) the
* slider has moved horizontally from the start position.
*/
YAHOO.widget.SliderThumb.prototype.getXValue = function () {
if (!this.available) { return 0; }
var newOffset = this.getOffsetFromParent();
return (newOffset[0] - this.startOffset[0]);
};
/**
* Gets the current Y offset from the element's start position in
* pixels.
*
* @return {int} the number of pixels (positive or negative) the
* slider has moved vertically from the start position.
*/
YAHOO.widget.SliderThumb.prototype.getYValue = function () {
if (!this.available) { return 0; }
var newOffset = this.getOffsetFromParent();
return (newOffset[1] - this.startOffset[1]);
};
/**
* toString
* @return {string} string representation of the instance
*/
YAHOO.widget.SliderThumb.prototype.toString = function () {
return "SliderThumb " + this.id;
};
/**
* The onchange event for the handle/thumb is delegated to the YAHOO.widget.Slider
* instance it belongs to.
*
* @private
*/
YAHOO.widget.SliderThumb.prototype.onChange = function (x, y) { };
if ("undefined" == typeof YAHOO.util.Anim) {
YAHOO.widget.Slider.ANIM_AVAIL = false;
}
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -