carousel-beta-debug.js

这是YUI的源码及相关示例。里面有很多很炫的Javascript效果。

         *
         * @method getElementForItem
         * @param index {Number} The index of the item to be returned
         * @return {Element} Return the item at index or null if not found
         * @public
         */
        getElementForItem: function (index) {
            if (index < 0 || index >= this.get("numItems")) {
                YAHOO.log("Index out of bounds", "error", WidgetName);
                return null;
            }

            // TODO: may be cache the item
            if (this._itemsTable.numItems > index) {
                if (!JS.isUndefined(this._itemsTable.items[index])) {
                    return Dom.get(this._itemsTable.items[index].id);
                }
            }

            return null;
        },

        /**
         * Return the ITEM_TAG_NAME for all items in the Carousel.
         *
         * @method getElementForItems
         * @return {Array} Return all the items
         * @public
         */
        getElementForItems: function () {
            var els = [], i;

            for (i = 0; i < this._itemsTable.numItems; i++) {
                els.push(this.getElementForItem(i));
            }

            return els;
        },

        /**
         * Return the item at index or null if the index is not found.
         *
         * @method getItem
         * @param index {Number} The index of the item to be returned
         * @return {Object} Return the item at index or null if not found
         * @public
         */
        getItem: function (index) {
            if (index < 0 || index >= this.get("numItems")) {
                YAHOO.log("Index out of bounds", "error", WidgetName);
                return null;
            }

            if (this._itemsTable.numItems > index) {
                if (!JS.isUndefined(this._itemsTable.items[index])) {
                    return this._itemsTable.items[index];
                }
            }

            return null;
        },

        /**
         * Return all items as an array.
         *
         * @method getItems
         * @return {Array} Return all items in the Carousel
         * @public
         */
        getItems: function (index) {
            return this._itemsTable.items;
        },

        /**
         * Return the position of the Carousel item that has the id "id", or -1
         * if the id is not found.
         *
         * @method getItemPositionById
         * @param index {Number} The index of the item to be returned
         * @public
         */
        getItemPositionById: function (id) {
            var i = 0, n = this._itemsTable.numItems;

            while (i < n) {
                if (!JS.isUndefined(this._itemsTable.items[i])) {
                    if (this._itemsTable.items[i].id == id) {
                        return i;
                    }
                }
                i++;
            }

            return -1;
        },

        /**
         * Remove an item at index from the Carousel.
         *
         * @method removeItem
         * @public
         * @param index {Number} The position to where in the list (starts from
         * zero).
         * @return {Boolean} Return true on success, false otherwise
         */
        removeItem: function (index) {
            var item, num = this.get("numItems");

            if (index < 0 || index >= num) {
                YAHOO.log("Index out of bounds", "error", WidgetName);
                return false;
            }

            item = this._itemsTable.items.splice(index, 1);
            if (item && item.length == 1) {
                this.set("numItems", num - 1);

                this.fireEvent(itemRemovedEvent,
                        { item: item[0], pos: index, ev: itemRemovedEvent });
                return true;
            }

            return false;
        },

        /**
         * Render the Carousel.
         *
         * @method render
         * @public
         * @param appendTo {HTMLElement | String} The element to which the
         * Carousel should be appended prior to rendering.
         * @return {Boolean} Status of the operation
         */
        render: function (appendTo) {
            var config = this.CONFIG,
                cssClass = this.CLASSES,
                size;

            this.addClass(cssClass.CAROUSEL);

            if (!this._clipEl) {
                this._clipEl = this._createCarouselClip();
                this._clipEl.appendChild(this._carouselEl);
            }

            if (appendTo) {
                this.appendChild(this._clipEl);
                this.appendTo(appendTo);
                this._setClipContainerSize();
            } else {
                if (!Dom.inDocument(this.get("element"))) {
                    YAHOO.log("Nothing to render. The container should be " +
                            "within the document if appendTo is not "       +
                            "specified", "error", WidgetName);
                    return false;
                }
                this.appendChild(this._clipEl);
            }

            if (this.get("isVertical")) {
                size = getCarouselItemSize.call(this);
                size = size < config.MIN_WIDTH ? config.MIN_WIDTH : size;
                this.setStyle("width",  size + "px");
                this.addClass(cssClass.VERTICAL);
            } else {
                this.addClass(cssClass.HORIZONTAL);
            }

            if (this.get("numItems") < 1) {
                YAHOO.log("No items in the Carousel to render", "warn",
                        WidgetName);
                return false;
            }

            // Make sure at least one item is selected
            this.set("selectedItem", this.get("firstVisible"));

            this.fireEvent(renderEvent);

            // By now, the navigation would have been rendered, so calculate
            // the container height now.
            this._setContainerSize();

            return true;
        },

        /**
         * Scroll the Carousel by an item backward.
         *
         * @method scrollBackward
         * @public
         */
        scrollBackward: function () {
            this.scrollTo(this._firstItem - this.get("scrollIncrement"));
        },

        /**
         * Scroll the Carousel by an item forward.
         *
         * @method scrollForward
         * @public
         */
        scrollForward: function () {
            this.scrollTo(this._firstItem + this.get("scrollIncrement"));
        },

        /**
         * Scroll the Carousel by a page backward.
         *
         * @method scrollPageBackward
         * @public
         */
        scrollPageBackward: function () {
            this.scrollTo(this._firstItem - this.get("numVisible"));
        },

        /**
         * Scroll the Carousel by a page forward.
         *
         * @method scrollPageForward
         * @public
         */
        scrollPageForward: function () {
            this.scrollTo(this._firstItem + this.get("numVisible"));
        },

        /**
         * Scroll the Carousel to make the item the first visible item.
         *
         * @method scrollTo
         * @public
         * @param item Number The index of the element to position at.
         * @param dontSelect Boolean True if select should be avoided
         */
        scrollTo: function (item, dontSelect) {
            var anim,
                animate,
                animAttrs,
                animCfg    = this.get("animation"),
                isCircular = this.get("isCircular"),
                delta,
                direction,
                firstItem  = this._firstItem,
                newPage,
                numItems   = this.get("numItems"),
                numPerPage = this.get("numVisible"),
                offset,
                page       = this.get("currentPage"),
                rv,
                sentinel,
                which;

            if (item == firstItem) {
                return;         // nothing to do!
            }

            if (this._isAnimationInProgress) {
                return;         // let it take its own sweet time to complete
            }

            if (item < 0) {
                if (isCircular) {
                    item = numItems + item;
                } else {
                    return;
                }
            } else if (item > numItems - 1) {
                if (this.get("isCircular")) {
                    item = numItems - item;
                } else {
                    return;
                }
            }

            direction = (this._firstItem > item) ? "backward" : "forward";

            sentinel  = firstItem + numPerPage;
            sentinel  = (sentinel > numItems - 1) ? numItems - 1 : sentinel;
            rv = this.fireEvent(beforeScrollEvent,
                    { dir: direction, first: firstItem, last: sentinel });
            if (rv === false) { // scrolling is prevented
                return;
            }

            this.fireEvent(beforePageChangeEvent, { page: page });

            delta = firstItem - item; // yes, the delta is reverse
            this._firstItem = item;
            this.set("firstVisible", item);

            YAHOO.log("Scrolling to " + item + " delta = " + delta, WidgetName);

            loadItems.call(this); // do we have all the items to display?

            sentinel  = item + numPerPage;
            sentinel  = (sentinel > numItems - 1) ? numItems - 1 : sentinel;

            which     = this.get("isVertical") ? "top" : "left";
            offset    = getScrollOffset.call(this, delta);
            YAHOO.log("Scroll offset = " + offset, WidgetName);

            animate   = animCfg.speed > 0;

            if (animate) {
                this._isAnimationInProgress = true;
                if (this.get("isVertical")) {
                    animAttrs = { points: { by: [0, offset] } };
                } else {
                    animAttrs = { points: { by: [offset, 0] } };
                }
                anim = new YAHOO.util.Motion(this._carouselEl, animAttrs,
                        animCfg.speed, animCfg.effect);
                anim.onComplete.subscribe(function (ev) {
                    var first = this.get("firstVisible");

                    this._isAnimationInProgress = false;
                    this.fireEvent(afterScrollEvent,
                            { first: first, last: sentinel });
                }, null, this);
                anim.animate();
                anim = null;
            } else {
                offset += getStyle(this._carouselEl, which);
                Dom.setStyle(this._carouselEl, which, offset + "px");
            }

            newPage = parseInt(this._firstItem / numPerPage, 10);
            if (newPage != page) {
                this.setAttributeConfig("currentPage", { value: newPage });
                this.fireEvent(pageChangeEvent, newPage);
            }

            if (!dontSelect) {
                if (this.get("selectOnScroll")) {
                    if (item != this._selectedItem) { // out of sync
                        this.set("selectedItem", this._getSelectedItem(item));
                    }
                }
            }

            delete this._autoPlayTimer;
            if (this.get("autoPlay") > 0) {
                this.startAutoPlay();
            }

            if (!animate) {
                this.fireEvent(afterScrollEvent,
                        { first: item, last: sentinel });
            }
        },

        /**
         * Display the Carousel.
         *
         * @method show
         * @public
         */
        show: function () {
            var cssClass = this.CLASSES;

            if (this.fireEvent(beforeShowEvent) !== false) {
                this.addClass(cssClass.VISIBLE);
                this.fireEvent(showEvent);
            }
        },

        /**
         * Start auto-playing the Carousel.
         *
         * @method startAutoPlay
         * @public
         */
        startAutoPlay: function () {
            var self  = this,
                timer = this.get("autoPlay");

            if (timer > 0) {
                if (!JS.isUndefined(this._autoPlayTimer)) {
                    return;
                }
                this.fireEvent(startAutoPlayEvent);
                this._autoPlayTimer = setTimeout(function () {
                    autoScroll.call(self); }, timer);
            }
        },

        /**
         * Stop auto-playing the Carousel.
         *
         * @method stopAutoPlay
         * @public
         */
        stopAutoPlay: function () {
            if (!JS.isUndefined(this._autoPlayTimer)) {
                clearTimeout(this._autoPlayTimer);
                delete this._autoPlayTimer;
                this.set("autoPlay", 0);
                this.fireEvent(stopAutoPlayEvent);
            }
        },

        /**
         * Return the string representation of the Caro