default.stylesheet.js

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

DemoApp.StyleSheet = new Echo.StyleSheet({
    "ControlPane": {
        "Row": {
            layoutData: {
                backgroundImage: {
                    url: "image/ControlPaneFill.png",
                    y: "50%"
                },
                overflow: Echo.SplitPane.OVERFLOW_HIDDEN
            },
            cellSpacing: 3,
            insets: "0px 9px"
        }
    },
    "ControlPane.Button": {
        "Button": {
            insets: "3px 15px",
            lineWrap: false,
            foreground: "#000000",
            rolloverForeground: "#ffffff",
            rolloverBackground: "#3939d6",
            rolloverBackgroundImage: {
                url: "image/ControlPaneHighlight.png",
                y: "50%"
            },
            rolloverEnabled: true,
            pressedForeground: "#dfffff",
            pressedBackground: "#3939d6",
            pressedBackgroundImage: {
                url: "image/ControlPaneHighlightLight.png",
                y: "50%"
            },
            pressedEnabled: true
        }
    },
    "Default": {
        "AbstractButton": {
            border: "1px outset #709bcd",
            foreground: "#000000",
            backgroundImage: {
                url: "image/InputFieldBackground.png",
                y: "50%"
            },
            pressedBackgroundImage: {
                url: "image/InputFieldBackgroundPressed.png",
                y: "50%"
            },
            pressedBorder: "1px inset #709bcd",
            rolloverBackgroundImage: {
                url: "image/InputFieldBackgroundHighlight.png",
                y: "50%"
            },
            rolloverBorder: "1px outset #bcd6f4",
            pressedEnabled: true,
            rolloverEnabled: true,
            insets: "1px 4px",
            disabledForeground: "#93bed5"
        },
        "AbstractListComponent": {
            border: "2px groove #cfdfff",
            background: "#cfdfff"
        },
        "Extras.AccordionPane": {
            tabBorder: "1px outset #514f58",
            tabForeground: "#ffffff",
            tabBackground: "#514f58",
            tabBackgroundImage: {
                url: "image/TabBackground.png",
                y: "50%"
            },
            tabRolloverEnabled: true,
            tabRolloverBackground: "#86899a",
            tabRolloverBackgroundImage: {
                url: "image/TabBackgroundRollover.png",
                y: "50%"
            }
        },
        "Extras.CalendarSelect": {
            background: "#6f87af",
            dateBackground: "#bcbcbc",
            dateBackgroundImage: {
                url: "image/CalendarSelectGradient.png",
                repeat: "repeat-x"
            },
            headerForeground: "#ffffff",
            headerBackgroundImage: {
                url: "image/CalendarHeaderBackground.png",
                y: "50%"
            },
            rolloverDateBackground: "#ffffff",
            selectedDateBackground: "#1579c7",
            selectedDateBackgroundImage: "image/CalendarSelectSelectedDateFill.png",
            selectedDateBorder:  {
                left: "1px solid #0e4f82",
                top: "1px solid #0e4f82",
                right: "1px solid #1472bc",
                bottom: "1px solid #1472bc"
            }
        },
        "Extras.ContextMenu": {
            animationTime: 350,
            backgroundImage: {
                url: "image/LightBlueLineBackground.png",
                y: "50%"
            },
            menuBackgroundIamge: "image/LightBlueLineBackground.png",
            menuBorder: {
                top: "1px solid #dfdfef",
                left: "1px solid #dfdfef",
                right: "1px solid #7f7f8f",
                bottom: "1px solid #7f7f8f"
            },
            menuOpacity: 80,
            selectionBackgroundImage: "image/ShadowBackgroundDarkBlue2.png"
        },
        "Extras.DropDownMenu": {
            animationTime: 350,
            backgroundImage: {
                url: "image/LightBlueLineBackground.png",
                y: "50%"
            },
            border: {
                top: "1px solid #dfdfef",
                left: "1px solid #dfdfef",
                right: "1px solid #7f7f8f",
                bottom: "1px solid #7f7f8f"
            },
            insets: "2px 10px",
            menuBackgroundIamge: "image/LightBlueLineBackground.png",
            menuBorder: {
                top: "1px solid #dfdfef",
                left: "1px solid #dfdfef",
                right: "1px solid #7f7f8f",
                bottom: "1px solid #7f7f8f"
            },
            menuOpacity: 80,
            selectionBackgroundImage: "image/ShadowBackgroundDarkBlue2.png"
        },
        "Extras.MenuBarPane": {
            animationTime: 150,
            border: "0px solid #000000",
            backgroundImage: {
                url: "image/PulldownMenuBackground.png",
                y: "50%"
            },
            foreground: "#ffffff",
            menuBackground: "#000000",
            menuOpacity: 92,
            menuBackgroundImage: "image/GreyMenuBackground.png",
            menuBorder: {
                top: "1px solid #3f3f3f",
                left: "1px solid #3f3f3f",
                right: "1px solid #1f1f1f",
                bottom: "1px solid #1f1f1f"
            },
            selectionBackground: "#fffac1",
            selectionBackgroundImage: { 
                url:"image/BeigeLightedBackground.png",
                x: "50%", 
                y: "50%"
            },
            selectionForeground: "#000000"
        },
        "Extras.RichTextArea": {
            controlPaneSplitPaneStyleName: "ControlPane.Container.Bottom",
            controlPaneRowStyleName: "ControlPane",
            controlPaneButtonStyleName: "ControlPane.Button", 
            menuStyleName: "RichTextArea.Menu",
            toolbarButtonStyleName: "RichTextArea.Toolbar",
            windowPaneStyleName: "Default"
        },
        "TextComponent": {
            background: "#cfdfff",
            border: "2px groove #cfdfff",
            backgroundImage: {
                url: "image/InputFieldBackground.png",
                repeat: "repeat-x",
                y: "50%"
            }
        },
        "WindowPane": {
            ieAlphaRenderBorder: true,
            titleForeground: "#ffffff",
            titleBackground: "#2f2f4f",
            titleInsets: "5px 10px",
            controlsInsets: "-1px 5px",
            closeIcon: "image/window/simple/ControlClose.png",
            closeRolloverIcon: "image/window/simple/ControlCloseRollover.png",
            maximizeIcon: "image/window/simple/ControlMaximize.png",
            maximizeRolloverIcon: "image/window/simple/ControlMaximizeRollover.png",
            minimizeIcon: "image/window/simple/ControlMinimize.png",
            minimizeRolloverIcon: "image/window/simple/ControlMinimizeRollover.png",
            titleBackgroundImage: {
                url: "image/window/simple/Header.png",
                repeat: "repeat-x",
                y: "50%"
            },
            border: {
                contentInsets: "8px 14px 14px 8px",
                borderInsets: "17px 23px 23px 17px",
                topLeft: "image/window/simple/BorderTopLeft.png",
                top: "image/window/simple/BorderTop.png",
                topRight: "image/window/simple/BorderTopRight.png",
                left: "image/window/simple/BorderLeft.png",
                right: "image/window/simple/BorderRight.png",
                bottomLeft: "image/window/simple/BorderBottomLeft.png",
                bottom: "image/window/simple/BorderBottom.png",
                bottomRight: "image/window/simple/BorderBottomRight.png"
            }
        }
    },
    "DefaultResizableLarge": {
        "SplitPane" : {
            separatorHeight: 12,
            separatorWidth: 12,
            resizable: true,
            separatorHorizontalImage: {
                url: "image/SplitPaneHorizontalSeparatorLarge.png",
                y: "50%"
            },
            separatorHorizontalRolloverImage: {
                url: "image/SplitPaneHorizontalSeparatorLargeRollover.png",
                y: "50%"
            },
            separatorVerticalImage: {
                url: "image/SplitPaneVerticalSeparatorLarge.png",
                x: "50%"
            },
            separatorVerticalRolloverImage: {
                url: "image/SplitPaneVerticalSeparatorLargeRollover.png",
                x: "50%"
            }
        }
    },
    "LaunchPanel": {
        "Button": {
            alignment: "center",
            background: "#1f1f1f",
            textAlignment: "center",
            textPosition: "bottom",
            rolloverEnabled: true,
            rolloverBackgroundImage: "image/DemoSelectButtonRolloverBackground.png",
            rolloverBorder: { 
                top: "1px solid #1d1d1d",
                left: "1px solid #1d1d1d",
                bottom: "1px solid #5d5d5d",
                right: "1px solid #5d5d5d"
            },
            backgroundImage: "image/DemoSelectButtonBackground.png",
            foreground: "#ffffff",
            font: { size: "9pt" },
            iconTextMargin: 2,
            insets: 10,
            pressedEnabled: true,
            border: { 
                top: "1px solid #0d0d0d",
                left: "1px solid #0d0d0d",
                bottom: "1px solid #3d3d3d",
                right: "1px solid #3d3d3d"
            },
            pressedBackgroundImage: "image/DemoSelectButtonSelectedBackground.png",
            pressedBorder: {
                top: "1px solid #2b2b2b",
                left: "1px solid #2b2b2b",
                bottom: "1px solid #9e9e9e",
                right: "1px solid #9e9e9e"