sync.menu.js

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

        Echo.Render.registerPeer("Extras.DropDownMenu", this);
    },
    
    _containerDiv: null,
    _contentDiv: null,
    _selectedItem: null,
    
    _createContent: function(itemModel) {
        var img;
        if (itemModel.icon) {
            if (itemModel.text) {
                // Render Text and Icon
                var table = document.createElement("table");
                table.style.cssText = "border-collapse:collapse;padding:0;";
                var tbody = document.createElement("tbody");
                var tr = document.createElement("tr");
                var td = document.createElement("td");
                td.style.cssText = "padding:0vertical-align:top;";
                img = document.createElement("img");
                Echo.Sync.ImageReference.renderImg(itemModel.icon, img);
                td.appendChild(img);
                tr.appendChild(td);
                td = document.createElement("td");
                td.style.cssText = "padding:width:3px;";
                var spacingDiv = document.createElement("div");
                spacingDiv.style.cssText = "width:3px";
                td.appendChild(spacingDiv);
                tr.appendChild(td);
                td = document.createElement("td");
                td.style.cssText = "padding:0vertical-align:top;";
                td.appendChild(document.createTextNode(itemModel.text));
                tr.appendChild(td);
                tbody.appendChild(tr);
                table.appendChild(tbody);
                return table;
            } else {
                // Render Icon Only
                img = document.createElement("img");
                Echo.Sync.ImageReference.renderImg(itemModel.icon, img);
                return img;
            }
        } else {
            // Text (or Empty)
            return document.createTextNode(itemModel.text ? itemModel.text : "\u00a0");
        }
    },

    getSubMenuPosition: function(menuModel, width, height) {
        var bounds = new Core.Web.Measure.Bounds(this.element);
        return { x: bounds.left, y: bounds.top + bounds.height };
    },
    
    processAction: function(itemModel) {
        if (this.component.render("selectionEnabled")) {
            this._setSelection(itemModel);
        }
        var path = itemModel.getItemPositionPath().join(".");
        this.component.set("selection", path);
        Extras.Sync.Menu.prototype.processAction.call(this, itemModel);
    },

    _processClick: function(e) {
        if (!this.client || !this.client.verifyInput(this.component) || Core.Web.dragInProgress) {
            return true;
        }
        
        Core.Web.DOM.preventEventDefault(e);
    
        this.activate();
        this.activateItem(this.menuModel);
    },
    
    renderDisplay: function() {
        Core.Web.VirtualPosition.redraw(this._containerDiv);
    },
    
    renderDispose: function(update) {
        Core.Web.Event.removeAll(this.element);
        this._containerDiv = null;
        Extras.Sync.Menu.prototype.renderDispose.call(this, update);
    },
    
    renderMain: function() {
        var dropDownDiv = document.createElement("div");
        dropDownDiv.id = this.component.renderId;
        dropDownDiv.style.cssText = "overflow:hidden;cursor:pointer;";
        
        Echo.Sync.LayoutDirection.render(this.component.getLayoutDirection(), dropDownDiv);
        Echo.Sync.Color.render(this.component.render("foreground", Extras.Sync.Menu.DEFAULT_FOREGROUND), dropDownDiv, "color");
        Echo.Sync.Color.render(this.component.render("background", Extras.Sync.Menu.DEFAULT_BACKGROUND), 
                dropDownDiv, "backgroundColor");
        Echo.Sync.FillImage.render(this.component.render("backgroundImage"), dropDownDiv); 
        Echo.Sync.Border.render(this.component.render("border", Extras.Sync.Menu.DEFAULT_BORDER), dropDownDiv); 
        
        var relativeDiv = document.createElement("div");
        relativeDiv.style.cssText = "position:relative;overflow:hidden;";
        dropDownDiv.appendChild(relativeDiv);
        
        Echo.Sync.Extent.render(this.component.render("width"), dropDownDiv, "width", true, true);
        Echo.Sync.Extent.render(this.component.render("height"), relativeDiv, "height", false, true);

        var expandIcon = this.component.render("expandIcon", this.client.getResourceUrl("Extras", "image/menu/ArrowDown.gif"));

        this._contentDiv = document.createElement("div");
        this._contentDiv.style.cssText = "position:absolute;white-space:nowrap;";
        Echo.Sync.Insets.render(this.component.render("insets", "2px 5px"), this._contentDiv, "padding");
        
        relativeDiv.appendChild(this._contentDiv);
        var expandElement = document.createElement("span");
        expandElement.style.position = "absolute";
        expandElement.style.top = "2px";
        expandElement.style.right = "2px";

        var img = document.createElement("img");
        img.style.verticalAlign = "middle";
        Echo.Sync.ImageReference.renderImg(expandIcon, img);
        expandElement.appendChild(img);

        relativeDiv.appendChild(expandElement);
    
        Core.Web.Event.add(dropDownDiv, "click", Core.method(this, this._processClick), false);
        Core.Web.Event.Selection.disable(dropDownDiv);

        if (this.component.render("selectionEnabled")) {
            var selection = this.component.render("selection");
            if (selection) {
                this._selectedItem = this.menuModel.getItemModelFromPositions(selection.split("."));
            }
        } else {
            this._selectedItem = null;
        }
        
        if (this._selectedItem) {
            this._contentDiv.appendChild(this._createContent(this._selectedItem));
        } else {
            var contentText = this.component.render("selectionText");
            this._contentDiv.appendChild(document.createTextNode(contentText ? contentText : "\u00a0"));
        }
        
        if (!this.component.render("height")) {
            var contentBounds = new Core.Web.Measure.Bounds(this._contentDiv);
            relativeDiv.style.height = contentBounds.height + "px";
        }

        return dropDownDiv;
    },

    /**
     * Sets the selection to the given menu model.
     *
     * @param itemModel the model to select
     */
    _setSelection: function(itemModel) {
        this._selectedItem = itemModel;
        for (var i = this._contentDiv.childNodes.length - 1; i >= 0; --i) {
            this._contentDiv.removeChild(this._contentDiv.childNodes[i]);
        }
        this._contentDiv.appendChild(this._createContent(itemModel));
    }
});    

/**
 * Component rendering peer: MenuBarPane
 */
Extras.Sync.MenuBarPane = Core.extend(Extras.Sync.Menu, {

    $static: {
        _defaultItemInsets: "0px 12px"
    },
    
    $load: function() {
       Echo.Render.registerPeer("Extras.MenuBarPane", this);
    },
    
    _activeItem: null,
    _menuBarTable: null,
    _menuBarBorderHeight: null,
    itemElements: null,
    
    $construct: function() {
        Extras.Sync.Menu.call(this);
        this.itemElements = {};
    },
    
    activate: function() {
        if (Extras.Sync.Menu.prototype.activate.call(this)) {
            this.addMenu(this);
        }
    },
    
    close: function() {
        if (this._activeItem) {
            this._setItemHighlight(this._activeItem, false);
            this._activeItem = null;
        }
    },
    
    _getItemElement: function(element) {
        if (element == null) {
            return null;
        }
        // Find TD element.
        while (element.nodeName.toLowerCase() != "td") {
            if (element == this.element) {
                return null;
            }
            element = element.parentNode;
        }
        return element;
    },
    
    _getItemModel: function(element) {
        var itemModelId = null;
        element = this._getItemElement(element);
        if (element == null) {
            return null;
        }

        // Find item model id of clicked element.
        for (var x in this.itemElements) {
            if (this.itemElements[x] == element) {
                itemModelId = x;
                break;
            }
        }

        if (itemModelId == null) {
            return null;
        } else {
            return this.menuModel.findItem(itemModelId);
        }
    },
    
    getPreferredSize: function() {
        this._menuBarTable.style.height = "";
        var insets = Echo.Sync.Insets.toPixels(this.component.render("insets", Extras.MenuBarPane.DEFAULT_INSETS));
        return { height: new Core.Web.Measure.Bounds(this.element).height + insets.top + insets.bottom };
    },
    
    getSubMenuPosition: function(menuModel, width, height) {
        var itemElement = this.itemElements[menuModel.id];
        if (!itemElement) {
            throw new Error("Invalid menu: " + menuModel);
        }
        
        var containerBounds = new Core.Web.Measure.Bounds(this.element);
        var itemBounds = new Core.Web.Measure.Bounds(itemElement);

        return { x: itemBounds.left, y: containerBounds.top + containerBounds.height };
    },
    
    _processClick: function(e) {
        if (!this.client || !this.client.verifyInput(this.component)) {
            return true;
        }
        
        Core.Web.DOM.preventEventDefault(e);

        var itemModel = this._getItemModel(Core.Web.DOM.getEventTarget(e));
        if (itemModel) {
            if (itemModel instanceof Extras.OptionModel) {
                this.deactivate();
                this.processAction(itemModel);
            } else {
                this.activate();
                this._setActiveItem(itemModel, true);
            }
        } else {
            this.deactivate();
        }
    },
    
    _processItemEnter: function(e) {
        this._processRollover(e, true);
    },
    
    _processItemExit: function(e) {
        this._processRollover(e, false);
    },
    
    _processRollover: function(e, state) {
        if (!this.client || !this.client.verifyInput(this.component) || Core.Web.dragInProgress) {
            return true;
        }
        
        var element = this._getItemElement(Core.Web.DOM.getEventTarget(e));
        if (!element) {
            return;
        }
        var itemModel = this._getItemModel(element);
        
        if (this.stateModel && !this.stateModel.isEnabled(itemModel.modelId)) {
            return;
        }
        
        if (this.active) {
            if (state) {
                this._setActiveItem(itemModel, itemModel instanceof Extras.MenuModel);
            }
        } else {
            this._setItemHighlight(itemModel, state);
        }
    },
    
    renderDisplay: function() {
        Core.Web.VirtualPosition.redraw(this.element);
        var bounds = new Core.Web.Measure.Bounds(this.element.parentNode);
        var height = bounds.height - this._menuBarBorderHeight;
        this._menuBarTable.style.height = height <= 0 ? "" : height + "px";
    },

    renderDispose: function(update) {
        this._menuBarTable = null;
        Core.Web.Event.removeAll(this.element);
        Extras.Sync.Menu.prototype.renderDispose.call(this, update);
    },
    
    renderMain: function(update) {
        var menuBarDiv = document.createElement("div");
        menuBarDiv.id = this.component.renderId;
        menuBarDiv.style.cssText = "overflow:hidden;";
        
        Echo.Sync.renderComponentDefaults(this.component, menuBarDiv);
        var border = this.component.render("border", Extras.Sync.Menu.DEFAULT_BORDER);
        this._menuBarBorderHeight = Echo.Sync.Border.getPixelSize(border, "top") + Echo.Sync.Border.getPixelSize(border, "bottom"); 
        Echo.Sync.Border.render(border, menuBarDiv, "borderTop");
        Echo.Sync.Border.render(border, menuBarDiv, "borderBottom");
        Echo.Sync.FillImage.render(this.component.render("backgroundImage"), menuBarDiv); 
        
        this._menuBarTable = document.createElement("table");
        this._menuBarTable.style.borderCollapse = "collapse";
        menuBarDiv.appendChild(this._menuBarTable);
        
        var menuBarTbody = document.createElement("tbody");
        this._menuBarTable.appendChild(menuBarTbody);
        
        var menuBarTr = document.createElement("tr");
        menuBarTbody.appendChild(menuBarTr);
        
        if (this.menuModel != null) {
            var items = this.menuModel.items;
            for (var i = 0; i < items.length; ++i) {
                var item = items[i];
                if (item instanceof Extras.OptionModel || item instanceof Extras.MenuModel) {
                    var menuBarItemTd = document.createElement("td");
                    this.itemElements[item.id] = menuBarItemTd;
                    menuBarItemTd.style.padding = "0px";
                    menuBarItemTd.style.cursor = "pointer";
                    menuBarTr.appendChild(menuBarItemTd);
                    var menuBarItemDiv = document.createElement("div");
                    menuBarItemDiv.style.whiteSpace = "nowrap";
                    Echo.Sync.Insets.render(Extras.Sync.MenuBarPane._defaultItemInsets, 
                            menuBarItemDiv, "padding");
                    menuBarItemTd.appendChild(menuBarItemDiv);
                    if (item.icon) {
                        // FIXME no load listeners being set on images for auto-resizing yet.
                        var img = document.createElement("img");
                        img.style.verticalAlign = "middle";
                        img.src = item.icon;
                        menuBarItemDiv.appendChild(img);
                        if (item.text) {
                            // FIXME Does not handle RTL.
                            img.style.paddingRight = "1ex";
                        }
                    }
                    if (item.text) {
                        var textSpan = document.createElement("span");
                        textSpan.style.verticalAlign = "middle";
                        textSpan.appendChild(document.createTextNode(item.text));
                        menuBarItemDiv.appendChild(textSpan);
                    }
                }
            }
        }
        
        Core.Web.Event.add(menuBarDiv, "click", Core.method(this, this._processClick), false);
        Core.Web.Event.add(menuBarDiv, "mouseover", Core.method(this, this._processItemEnter), false);
        Core.Web.Event.add(menuBarDiv, "mouseout", Core.method(this, this._processItemExit), false);
        Core.Web.Event.Selection.disable(menuBarDiv);
    
        return menuBarDiv;
    },
    
    _setActiveItem: function(itemModel, execute) {
        if (this._activeItem == itemModel) {
            return;
        }
        
        if (this._activeItem) {
            this._setItemHighlight(this._activeItem, false);
            this._activeItem = null;
        }
    
        if (execute) {
            this.activateItem(itemModel);
        }

        if (itemModel) {
            this._activeItem = itemModel;
            this._setItemHighlight(this._activeItem, true);
        }
    },
    
    _setItemHighlight: function(itemModel, state) {
        var element = this.itemElements[itemModel.id];
        if (state) {
            Echo.Sync.FillImage.render(this.component.render("selectionBackgroundImage"), element);
            Echo.Sync.Color.render(this.component.render("selectionBackground", 
                    Extras.Sync.Menu.DEFAULT_SELECTION_BACKGROUND), element, "backgroundColor");
            Echo.Sync.Color.render(this.component.render("selectionForeground", 
                    Extras.Sync.Menu.DEFAULT_SELECTION_FOREGROUND), element, "color");
        } else {
            element.style.backgroundImage = "";
            element.style.backgroundColor = "";
            element.style.color = "";
        } 
    }
});