slider.js

YahooUI,搞WEB开发的朋友值得看一看

		var oAnim = new YAHOO.util.Motion( 
                t.id, { points: { to: p } }, 0.4, YAHOO.util.Easing.easeOut );


		oAnim.onComplete.subscribe( function() { self.endAnim(); } );
		oAnim.animate();
	} else {
		t.setDragElPos(x, y);
		this.fireEvents();
	}
};

/**
 * 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);
	}

	// this.logger.debug("moveOneTick: " + 
			// " finalCoord: " + finalCoord +
			// " curCoord: " + curCoord +
			// " nextCoord: " + nextCoord);

	if (nextCoord) {

		// move to the next coord
		YAHOO.util.Dom.setXY(t.getEl(), nextCoord);
		
		// 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 {
			// all done
			//this.thumb._animating = false;
			this.unlock();
			this.fireEvents();
		}
	} else {
		// all done
		// this.thumb._animating = false;
		this.unlock();
		this.fireEvents();
	}

	//this.tickPause = Math.round(this.tickPause/2);
};

YAHOO.widget.Slider.prototype._getNextX = function(curCoord, finalCoord) {
    var t = this.thumb;
    //var thresh = t.tickSize;
    // var thresh = t.tickSize + (Math.floor(t.tickSize/2));
    // var thresh = t.tickSize + this.thumbCenterPoint.x;
    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;
};

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.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()) {
		var x = YAHOO.util.Event.getPageX(e);
		var y = YAHOO.util.Event.getPageY(e);
		this.logger.debug("bg mousedown: " + x + "," + y);

		this.moveThumb(x, y);
		this.focus();
	}
	
};

/**
 * 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 animation ends
 *
 * @private
 */
YAHOO.widget.Slider.prototype.endAnim = function () {
	// this._animating = false;
	this.unlock();
	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;
	// this.logger.debug("FireEvents: " + t._isRegion);

	t.cachePosition();

	if (! this.isLocked()) {
		if (t._isRegion) {
			this.logger.debug("region");
			var newX = t.getXValue();
			var newY = t.getYValue();

			if (newX != this.previousX || newY != this.previousY) {
				// this.logger.debug("Firing onchange");
				this.onChange( newX, newY );
			}

			this.previousX = newX;
			this.previousY = newY;

		} else {
			var newVal = t.getValue();
			if (newVal != this.previousVal) {
				// this.logger.debug("Firing onchange");
				this.onChange( newVal );
			}
			this.previousVal = newVal;
		}

		if (this._deferSlideEnd) {
			this.onSlideEnd();
			this._deferSlideEnd = false;
		}

	}
};


/**
 * @class The handle or thumb of the 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);

        this.parentElId = sGroup;

		/**
		 * @private
		 */
		this.logger = new ygLogger("SliderThumb " + id);
		this.initSlider(iLeft, iRight, iUp, iDown, iTickSize);
	}

	/**
	 * Overrides the isTarget property in YAHOO.util.DragDrop
	 * @private
	 */
	this.isTarget = false;

	this.tickSize = iTickSize;
    this.maintainOffset = true;

};

YAHOO.widget.SliderThumb.prototype = new YAHOO.util.DD();

YAHOO.widget.SliderThumb.prototype.getOffsetFromParent = function() {
    var myPos     = YAHOO.util.Dom.getXY(this.getEl());
    var parentPos = YAHOO.util.Dom.getXY(this.parentElId);

    return [ (myPos[0] - parentPos[0]), (myPos[1] - parentPos[1]) ];
};

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 {String} sValElId the id of the element used for the value display
 */
YAHOO.widget.SliderThumb.prototype.initSlider = function (iLeft, iRight, iUp, iDown, 
		iTickSize) {

	this.logger.debug("Slider init");

	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); 

	// var el = this.getEl();

    // this.parentPos = YAHOO.util.getXY(this.parentElId);
    this.startOffset = this.getOffsetFromParent();
};

/**
 * 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 () {
    var val = (this._isHoriz) ? this.getXValue() : this.getYValue();
    this.logger.debug("getVal: " + val);
    return val;
};

YAHOO.widget.SliderThumb.prototype.getXValue = function () {
	// return (YAHOO.util.Dom.getX(this.getEl()) - this.initPageX);
    var newOffset = this.getOffsetFromParent();
	return (newOffset[0] - this.startOffset[0]);
};

YAHOO.widget.SliderThumb.prototype.getYValue = function () {
	// return (YAHOO.util.Dom.getY(this.getEl()) - this.initPageY);
    var newOffset = this.getOffsetFromParent();
	return (newOffset[1] - this.startOffset[1]);
};


/**
 * 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;
}