tabpanescreen.js

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

                                    ]
                                }),
                                new Echo.ContentPane({
                                    layoutData: {
                                        title: this._msg["TabPaneScreen.WindowPanesTab"]
                                    },
                                    children: [
                                        new Echo.Column({
                                            insets: 10,
                                            children: [
                                                new Echo.Label({
                                                    text: this._msg["TabPaneScreen.WindowPanesMessage"]
                                                })
                                            ]
                                        }),
                                        new Echo.WindowPane({
                                            title: this._msg["TabPaneScreen.WindowPaneInATabPane"],
                                            maximizeEnabled: true,
                                            positionX: "50%",
                                            positionY: "50%",
                                            width: "85%",
                                            height: "85%",
                                            closable: false,
                                            background: "#b9eca5",
                                            styleName: "TransGreen",
                                            children: [
                                                new Extras.TabPane({
                                                    tabPosition: Extras.TabPane.TAB_POSITION_BOTTOM,
                                                    insets: "5px 10px",
                                                    tabActiveBackground: "#17c759",
                                                    tabInactiveBackground: "#d0ff3f",
                                                    children: [
                                                        new Echo.ContentPane({
                                                            layoutData: {
                                                                title: this._msg["TabPaneScreen.MoreTab"]
                                                            },
                                                            styleName: "Photo.Fern",
                                                            children: [
                                                                new Echo.WindowPane({
                                                                    maximizeEnabled: true,
                                                                    styleName: "GlassBlue2",
                                                                    closable: false,
                                                                    positionX: "50%",
                                                                    positionY: "50%",
                                                                    width: "85%",
                                                                    height: "85%",
                                                                    title: this._msg["TabPaneScreen.AnotherEmbeddedWindowPane"],
                                                                    children: [
                                                                        new Extras.TabPane({
                                                                            tabActiveBackground: "#f06b7e",
                                                                            tabActiveBorder: "3px outset #9f2137",
                                                                            tabInactiveBackground: "#ffd23f",
                                                                            tabInactiveBorder: "3px outset #c4a328",
                                                                            borderType: Extras.TabPane.BORDER_TYPE_SURROUND,
                                                                            children: [
                                                                                new Echo.Label({
                                                                                    layoutData: {
                                                                                        title: this._msg["TabPaneScreen.JustTab"]
                                                                                    }
                                                                                }),
                                                                                new Echo.Label({
                                                                                    layoutData: {
                                                                                        title: this._msg["TabPaneScreen.AnotherTab"]
                                                                                    }
                                                                                }),
                                                                                new Echo.Label({
                                                                                    layoutData: {
                                                                                        title: this._msg["TabPaneScreen.TabPaneTab"]
                                                                                    }
                                                                                })
                                                                            ]
                                                                        })
                                                                    ]
                                                                })
                                                            ]
                                                        }),
                                                        new Echo.ContentPane({
                                                            layoutData: {
                                                                title: this._msg["TabPaneScreen.WindowPanesTab"]
                                                            },
                                                            styleName: "Photo.Leaf",
                                                            children: [
                                                                new Echo.WindowPane({
                                                                    maximizeEnabled: true,
                                                                    styleName: "Default",
                                                                    closable: false,
                                                                    positionX: "50%",
                                                                    positionY: "50%",
                                                                    width: "65%",
                                                                    height: "65%",
                                                                    title: this._msg["TabPaneScreen.YetAnotherWindowPane"],
                                                                    children: [
                                                                        new Extras.TabPane({
                                                                            tabActiveBackground: "#ffffff",
                                                                            tabInactiveBackground: "#afafef",
                                                                            children: [
                                                                                new Echo.Label({
                                                                                    layoutData: {
                                                                                        title: this._msg["TabPaneScreen.AnotherTab"]
                                                                                    }
                                                                                }),
                                                                                new Echo.Label({
                                                                                    layoutData: {
                                                                                        title: this._msg["TabPaneScreen.TabPaneTab"]
                                                                                    }
                                                                                })
                                                                            ]
                                                                        })
                                                                    ]
                                                                })
                                                            ]
                                                        })
                                                    ]
                                                })
                                            ]
                                        })
                                    ]
                                })
                            ]
                        })
                    ]
                })
            ]
        });
        
        this._activeTabBackground.set("color", "#ffffff");
        this._activeTabForeground.set("color", "#000000");
        this._activeTabBorder.set("color", "#3bb467");
        this._inactiveTabBackground.set("color", "#ffffff");
        this._inactiveTabForeground.set("color", "#000000");
        this._inactiveTabBorder.set("color", "#819488");
        this._inactiveTabBackgroundImage.set("selected", "true");
        this._removeButton.setEnabled(false);
    },
    
    _processAddTab: function(e) {
        this._tabPane.add(new Echo.ContentPane({
            layoutData: {
                title: "Tab " + this._tabCount++
            },
            background: this._randomPastelColor(),
            children: [
                new Echo.Column({
                    insets: 20,
                    children: [
                        new Echo.Label({
                            text: this._msg["TabPaneScreen.DynamicTabLabel"]
                        })
                    ]
                })
            ]
        }));
        this._addButton.setEnabled(this._tabPane.getComponentCount() < 15);
        this._removeButton.setEnabled(true);
    },
    
    _processRemoveTab: function(e) {
        this._tabPane.remove(this._tabPane.getComponentCount() - 1);
        this._addButton.setEnabled(true);
        this._removeButton.setEnabled(this._tabPane.getComponentCount() > 2);
    },
    
    _processUpdateTabPane: function(e) {
        this._tabPane.set("tabActiveBackground", this._activeTabBackground.get("color"));
        this._tabPane.set("tabActiveForeground", this._activeTabForeground.get("color"));
        this._tabPane.set("tabActiveBorder", "2px groove " + this._activeTabBorder.get("color"));
        this._tabPane.set("tabActiveBackgroundImage", 
                this._activeTabBackgroundImage.get("selected") ? "image/ControlPaneFill.png" : null);
        this._tabPane.set("tabInactiveBackground", this._inactiveTabBackground.get("color"));
        this._tabPane.set("tabInactiveForeground", this._inactiveTabForeground.get("color"));
        this._tabPane.set("tabInactiveBorder", "2px groove " + this._inactiveTabBorder.get("color"));
        this._tabPane.set("tabInactiveBackgroundImage", 
                this._inactiveTabBackgroundImage.get("selected") ? "image/LightBlueLineBackground.png" : null);
    
    },
    
    _randomPastelColor: function() {
        return "#" + Math.floor(Math.random() * 64 + 192).toString(16) +
                Math.floor(Math.random() * 64 + 192).toString(16) +
                Math.floor(Math.random() * 64 + 192).toString(16);
    }
});