sync.accordionpane.js

echo3 很炫的ajax框架技术 js 演示demo ajax j2ee 里面有jsp演示代码

            if (foreground) {
                Echo.Sync.Color.render(foreground, tabDiv, "color");
            }
            border = this._parent.component.render("tabRolloverBorder");
            if (!border) {
                border = this._parent._getTabBorder();
                if (Echo.Sync.Border.isMultisided(border)) {
                    borderData = Echo.Sync.Border.parse(border.top);
                    borderDataBottom = Echo.Sync.Border.parse(border.bottom);
                    border = {
                            top: Echo.Sync.Border.compose(borderData.size, borderData.style,
                                    Echo.Sync.Color.adjust(borderData.color, 20, 20, 20)),
                            bottom: Echo.Sync.Border.compose(borderDataBottom.size, borderDataBottom.style,
                                    Echo.Sync.Color.adjust(borderDataBottom.color, 20, 20, 20))
                    };
                } else {
                    borderData = Echo.Sync.Border.parse(border);
                    border = Echo.Sync.Border.compose(borderData.size, borderData.style,
                            Echo.Sync.Color.adjust(borderData.color, 20, 20, 20));
                }
            }
        } else {
            border = this._parent._getTabBorder();
            Echo.Sync.Color.render(this._parent._getTabBackground(), tabDiv, "backgroundColor");
            Echo.Sync.Color.render(this._parent.component.render("tabForeground", 
                    Extras.Sync.AccordionPane._defaultTabForeground), tabDiv, "color");
            tabDiv.style.backgroundImage = "";
            tabDiv.style.backgroundPosition = "";
            tabDiv.style.backgroundRepeat = "";
            Echo.Sync.FillImage.render(this._parent.component.render("tabBackgroundImage"), tabDiv);
        }

        if (Echo.Sync.Border.isMultisided(border)) {
            Echo.Sync.Border.render(border.top, tabDiv, "borderTop");
            Echo.Sync.Border.render(border.bottom, tabDiv, "borderBottom");
        } else {
            Echo.Sync.Border.render(border, tabDiv, "borderTop");
            Echo.Sync.Border.render(border, tabDiv, "borderBottom");
        }
    },
    
    _addEventListeners: function() {
        Core.Web.Event.add(this._tabDiv, "click", Core.method(this, this._processClick), false);
        if (this._parent.component.render("tabRolloverEnabled", true)) {
            Core.Web.Event.add(this._tabDiv, 
                    Core.Web.Env.PROPRIETARY_EVENT_MOUSE_ENTER_LEAVE_SUPPORTED ? "mouseenter" : "mouseover", 
                    Core.method(this, this._processEnter), false);
            Core.Web.Event.add(this._tabDiv, 
                    Core.Web.Env.PROPRIETARY_EVENT_MOUSE_ENTER_LEAVE_SUPPORTED ? "mouseleave" : "mouseout", 
                    Core.method(this, this._processExit), false);
        }
        Core.Web.Event.Selection.disable(this._tabDiv);
    },
    
    _getContentInsets: function() {
        if (this._childComponent.pane) {
            return 0;
        } else {
            var insets = this._parent.component.render("defaultContentInsets");
            return insets ? insets : Extras.Sync.AccordionPane._defaultTabContentInsets;
        }
    },
    
    _processClick: function(e) {
        if (!this._parent || !this._parent.client || !this._parent.client.verifyInput(this._parent.component)) {
            return;
        }
        this._parent._selectTab(this._childComponent.renderId);
        // FIXME notify server
    },
    
    _processEnter: function(e) {
        if (!this._parent || !this._parent.client || !this._parent.client.verifyInput(this._parent.component)) {
            return;
        }
        this._highlight(true);
    },
    
    _processExit: function(e) {
        if (!this._parent || !this._parent.client || !this._parent.client.verifyInput(this._parent.component)) {
            return;
        }
        this._highlight(false);
    },
    
    _render: function(client, update) {
        var layoutData = this._childComponent.render("layoutData") || {};
        
        this._tabDiv = document.createElement("div");
        this._tabDiv.id = this._parent.component.renderId + "_tab_" + this._childComponent.renderId;
        this._tabDiv.style.cssText = "cursor:pointer;position:absolute;left:0;right:0;overflow:hidden;";
        Echo.Sync.Insets.render(this._parent._getTabInsets(), this._tabDiv, "padding");
        
        if (layoutData.icon) {
            //FIXME Temporary implementation.  Need proper layout for common icon + text case.
            var img = document.createElement("img");
            Echo.Sync.ImageReference.renderImg(layoutData.icon, img);
            img.style.paddingRight = "3px";
            this._tabDiv.appendChild(img);
        }
        
        if (layoutData.title) {
            this._tabDiv.appendChild(document.createTextNode(layoutData.title));
        }
    
        this._containerDiv = document.createElement("div");
        this._containerDiv.style.cssText = "display:none;position:absolute;left:0;right:0;overflow:hidden;";
        
        this._contentDiv = document.createElement("div");
        this._contentDiv.style.cssText = "position:absolute;left:0;right:0;overflow:auto;";
        Echo.Sync.Insets.render(this._getContentInsets(), this._contentDiv, "padding");
        
        Echo.Render.renderComponentAdd(update, this._childComponent, this._contentDiv);
        
        this._containerDiv.appendChild(this._contentDiv);
        
        this._highlight(false);
        this._addEventListeners();
    },
    
    _renderDisplay: function() {
        Core.Web.VirtualPosition.redraw(this._tabDiv);
        Core.Web.VirtualPosition.redraw(this._containerDiv);
        Core.Web.VirtualPosition.redraw(this._contentDiv);
    }
});

/**
 * Object to manage rotation animation of an AccordionPane.
 * These objects are created and assigned to a specific AccordionPane
 * while it is animating.
 *
 * Creates and starts a new Rotation.  This constructor will store the
 * created Rotation object in the specified AccordionPane's 'rotation'
 * property.
 *
 * @param parent the AccordionPane to rotate
 * @param oldTab the old (current) tab
 * @param newTab the new tab to display
 */
Extras.Sync.AccordionPane.Rotation = Core.extend(Extras.Sync.Animation, {
    
    _parent: null,
    _oldTab: null,
    _newTab: null,
    
    $construct: function(parent, oldTab, newTab) {
        this._parent = parent;
        this._oldTab = oldTab;
        this._newTab = newTab;
        
        this._oldTabIndex = Core.Arrays.indexOf(this._parent._tabs, this._oldTab);
        this._newTabIndex = Core.Arrays.indexOf(this._parent._tabs, this._newTab);
        this._directionDown = this._newTabIndex < this._oldTabIndex;
        
        this._rotatingTabCount = Math.abs(this._newTabIndex - this._oldTabIndex);
        
        this._regionHeight = this._newTab._tabDiv.parentNode.offsetHeight;
        
        if (this._directionDown) {
            // Numbers of tabs above that will not be moving.
            this._numberOfTabsAbove = this._newTabIndex + 1;
            
            // Number of tabs below that will not be moving.
            this._numberOfTabsBelow = this._parent._tabs.length - 1 - this._newTabIndex;
            
            // Initial top position of topmost moving tab.
            this._startTopPosition = this._parent.getTabHeight(0, this._newTabIndex + 1);
            
            // Final top position of topmost moving tab.
            this._endTopPosition = this._regionHeight - this._parent.getTabHeight(this._newTabIndex + 1, this._parent._tabs.length);
            
            // Number of pixels across which animation will occur.
            this._animationDistance = this._endTopPosition - this._startTopPosition;
        
        } else {
            // Numbers of tabs above that will not be moving.
            this._numberOfTabsAbove = this._newTabIndex;
        
            // Numbers of tabs below that will not be moving.
            this._numberOfTabsBelow = this._parent._tabs.length - 1 - this._newTabIndex;
    
            // Initial bottom position of bottommost moving tab.
            this._startBottomPosition = this._parent.getTabHeight(this._newTabIndex + 1, this._parent._tabs.length);
    
            // Final bottom position of bottommost moving tab.
            this._endBottomPosition = this._regionHeight - this._parent.getTabHeight(0, this._newTabIndex + 1);
            
            // Number of pixels across which animation will occur.
            this._animationDistance = this._endBottomPosition - this._startBottomPosition;
        }
    },
    
    init: function() {
        this._newTab._containerDiv.style.height = "";
        if (this._directionDown) {
            this._oldTab._containerDiv.style.bottom = "";
            this._newTab._containerDiv.style.top = this._parent.getTabHeight(0, this._newTabIndex + 1) + "px";
        } else {
            this._newTab._containerDiv.style.top = "";
            this._newTab._containerDiv.style.bottom = 
                    this._parent.getTabHeight(this._newTabIndex + 1, this._parent._tabs.length) + "px";
        }
        this._newTab._containerDiv.style.display = "block";

        // Set size of tab content to be equivalent to available space.
        var regionContentHeight = this._parent._div.offsetHeight - this._parent.getTabHeight(0, this._parent._tabs.length);
        var oldTabInsets = Echo.Sync.Insets.toPixels(this._oldTab._getContentInsets());
        var newTabInsets = Echo.Sync.Insets.toPixels(this._newTab._getContentInsets());
        var oldContentHeight = regionContentHeight - oldTabInsets.top - oldTabInsets.bottom;
        var newContentHeight = regionContentHeight - newTabInsets.top - newTabInsets.bottom;
        oldContentHeight = oldContentHeight > 0 ? oldContentHeight : 0;
        newContentHeight = newContentHeight > 0 ? newContentHeight : 0;

        if (this._parent._resetOverflowForAnimation) {
            this._oldTab._contentDiv.style.overflow = "hidden";
            this._newTab._contentDiv.style.overflow = "hidden";
        }

        this._oldTab._contentDiv.style.bottom = "";
        this._newTab._contentDiv.style.bottom = "";
        this._oldTab._contentDiv.style.height = oldContentHeight + "px";
        this._newTab._contentDiv.style.height = newContentHeight + "px";
    },

    /**
     * Renders the next step of the rotation animation.
     * Queues subsequent frame of animation via Window.setTimeout() call to self.
     */
    step: function(progress) {
        var i,
            oldContainerHeight,
            newContainerHeight;

        var stepPosition = Math.round(progress * this._animationDistance);

        if (this._directionDown) {
            // Move each moving tab to next step position.
            for (i = this._oldTabIndex; i > this._newTabIndex; --i) {
                this._parent._tabs[i]._tabDiv.style.top = (stepPosition + this._startTopPosition + 
                        this._parent.getTabHeight(this._newTabIndex + 1, i)) + "px";
            }

            // Adjust height of expanding new tab content to fill expanding space.
            newContainerHeight = stepPosition;
            if (newContainerHeight < 0) {
                newContainerHeight = 0;
            }
            this._newTab._containerDiv.style.height = newContainerHeight + "px";

            // Move top of old content downward.
            var oldTop = stepPosition + this._startTopPosition + 
                    this._parent.getTabHeight(this._newTabIndex + 1, this._oldTabIndex + 1);
            this._oldTab._containerDiv.style.top = oldTop + "px";

            // Reduce height of contracting old tab content to fit within contracting space.
            oldContainerHeight = this._regionHeight - this._parent.getTabHeight(this._newTabIndex, this._oldTabIndex);
            if (oldContainerHeight < 0) {
                oldContainerHeight = 0;
            }
            this._oldTab._containerDiv.style.height = oldContainerHeight + "px";
        } else {
            // Move each moving tab to next step position.
            for (i = this._oldTabIndex + 1; i <= this._newTabIndex; ++i) {
                this._parent._tabs[i]._tabDiv.style.bottom = (stepPosition + this._startBottomPosition + 
                        this._parent.getTabHeight(i + 1, this._newTabIndex + 1)) + "px";
            }

            // Reduce height of contracting old tab content to fit within contracting space.
            oldContainerHeight = this._regionHeight - stepPosition - 
                    this._parent.getTabHeight(this._oldTabIndex, this._newTabIndex); 
            if (oldContainerHeight < 0) {
                oldContainerHeight = 0;
            }
            this._oldTab._containerDiv.style.height = oldContainerHeight + "px";

            // Increase height of expanding tab content to fit within expanding space.
            newContainerHeight = stepPosition;
            if (newContainerHeight < 0) {
                newContainerHeight = 0;
            }
            this._newTab._containerDiv.style.height = newContainerHeight + "px";
        }
    },
    
    complete: function() {
        this._parent._rotation = null;

        // Complete Rotation.
        var parent = this._parent;
        
        if (this._parent._resetOverflowForAnimation) {
            this._oldTab._contentDiv.style.overflow = "auto";
            this._newTab._contentDiv.style.overflow = "auto";
        }

        var renderId = this._parent.component.renderId;
        this._parent = null;
        this._oldTab = null;
        this._newTab = null;
        
        parent._redrawTabs(true);
    }
});