load_skin.js

javascript 很酷的类库

/*============================================================
    "SmartClient" theme programmatic settings
    SmartClient v5.5
    Copyright 2001-2007, Isomorphic Software
============================================================*/


isc.loadSkin = function (theWindow) {
if (theWindow == null) theWindow = window;
with (theWindow) {


//----------------------------------------
// Specify skin directory
//----------------------------------------
    // must be relative to your application file or isomorphicDir
    isc.Page.setSkinDir("[ISOMORPHIC]/skins/SmartClient/")


//----------------------------------------
// Load skin style sheet(s)
//----------------------------------------
    isc.Page.loadStyleSheet("[SKIN]/skin_styles.css", theWindow)



//============================================================
//  Component Skinning
//============================================================
//   1) Scrollbars
//   2) Buttons
//   3) Resizebars
//   4) Sections
//   5) Progressbars
//   6) TabSets
//   7) Windows
//   8) Dialogs
//   9) Pickers
//  10) Menus
//  11) Hovers
//  12) ListGrids
//  13) TreeGrids
//  14) Form controls
//  15) Drag & Drop
//  16) Edges
//  17) Sliders
//============================================================


//----------------------------------------
// 1) Scrollbars
//----------------------------------------
    isc.Canvas.addProperties({
        showCustomScrollbars:true
    })
    isc.ScrollThumb.addProperties({
        capSize:9
    })
    isc.Scrollbar.addProperties({
        allowThumbDownState:true,
        thumbMinSize:19,
        thumbOverlap:0
    })


//----------------------------------------
// 2) Buttons
//----------------------------------------
    
    // "IButton" is the new standard button class for SmartClient applications. Application
    // code should use IButton instead of Button for all standalone buttons. Other skins may
    // map IButton directly to Button, so this single class will work everywhere. Button remains
    // for internal and advanced uses (eg if you need to mix both CSS-based and image-based
    // standalone buttons in the same application).
    isc.defineClass("IButton", "StretchImgButton").addProperties({
        src:"[SKIN]button/button.png",
        height:20,
        width:100,
        capSize:6,
        vertical:false,
        titleStyle:"headerTitle"
    });

    isc.defineClass("IAutoFitButton", "IButton").addProperties({
        autoFit: true,
        autoFitDirection: isc.Canvas.HORIZONTAL
    });




//----------------------------------------
// 3) Resizebars
//----------------------------------------
    // StretchImgSplitbar class renders as resize bar with 
    // end caps, body, grip
    isc.StretchImgSplitbar.addProperties({
        // modify vSrc / hSrc for custom appearance
        //vSrc:"[SKIN]vsplit.gif",
        //hSrc:"[SKIN]hsplit.gif",
        capSize:10,
        showGrip:true
    })
    
    // ImgSplitbar renders as resizebar with resize grip only
    isc.ImgSplitbar.addProperties({
        // modify these properties for custom appearance
        //vSrc:"[SKIN]vgrip.png",
        //hSrc:"[SKIN]hgrip.png",
        //showDown:true,
        //styleName:"splitbar"
    })
    isc.Layout.addProperties({
        resizeBarSize:10,
        // Use the Snapbar as a resizeBar by default - subclass of Splitbar that 
        // shows interactive (closed/open) grip images
        // Other options include the Splitbar, StretchImgSplitbar or ImgSplitbar
        resizeBarClass:"Snapbar"
    })

    
//----------------------------------------
// 4) Sections
//----------------------------------------
    if (isc.SectionItem) {
        isc.SectionItem.addProperties({
            sectionHeaderClass:"ImgSectionHeader",
            height:23
        })
    }
    if (isc.SectionStack) {
        isc.SectionStack.addProperties({
            sectionHeaderClass:"ImgSectionHeader",
            headerHeight:23
        })
        isc.ImgSectionHeader.changeDefaults("backgroundDefaults", {
            showRollOver:false,
            showDown:false,
            showDisabledIcon:true,
            src:"[SKIN]SectionHeader/header.png",
            icon:"[SKIN]SectionHeader/opener.png",
            capSize:6,
            titleStyle:"imgSectionHeaderTitle",
            baseStyle:"imgSectionHeader"   // could set backgroundColor here instead
        })
    }


//----------------------------------------
// 5) Progressbars
//----------------------------------------
    if (isc.Progressbar) {
        isc.Progressbar.addProperties({
            horizontalItems: [
            {name:"bar_start",size:3},
            {name:"bar_stretch",size:0},
            {name:"bar_end",size:4},
            {name:"empty_start",size:2},
            {name:"empty_stretch",size:0},
            {name:"empty_end",size:2}
            ],
            breadth:12
        })
    }


//----------------------------------------
// 6) TabSets
//----------------------------------------
    if (isc.TabSet) {
        isc.TabSet.addProperties({
            tabBarThickness:28,
            paneContainerClassName:"normal",
            showPaneContainerEdges:true
        });
        isc.TabSet.changeDefaults("paneContainerDefaults", {
            edgeSize:4,
            edgeImage:"[SKIN]/rounded/raised/FFFFFF/4.png",
            backgroundColor:"#C7C7C7"
        })
        isc.TabBar.addProperties({
            // keep the tabs from reaching the curved edge of the pane (regardless of align)
            layoutStartMargin:10,
            layoutEndMargin:10,

            // have the baseline overlap the top edge of the TabSet, using rounded media
            baseLineSrc:"[SKIN]baseline.png",
            baseLineThickness:4,
            baseLineCapSize:4
        })
    }    
    if (isc.ImgTab) {
        isc.ImgTab.addProperties({
            src:"[SKIN]tab.png",
            showRollOver:true,
            
            titleStyle:"tabTitle",
            capSize:4
        })
    }


//----------------------------------------
// 7) Windows
//----------------------------------------
    if (isc.Window) {

        isc.Window.addProperties({
            // rounded frame edges
            showEdges:true,
            customEdges:["T","B","L","R"],
            edgeSize:6,
            edgeImage:"[SKIN]/rounded/frame/A3B2CC/6.png",
            // clear backgroundColor and style since corners are rounded
            backgroundColor:null,

            styleName:"normal",
            edgeCenterBackgroundColor:"white",
            bodyColor:"white",
            // to float the header over the top edge and make it transparent:
            /*
                edgeOffsetTop:0,
                showHeaderBackground:false,
                headerStyle:null,
                hiliteHeaderStyle:null,
            */

            layoutMargin:0,
            membersMargin:0,
            showFooter:false,
            showShadow:true,
            shadowDepth:6
        })

        isc.Window.changeDefaults("headerDefaults", {
            layoutMargin:2,
            height:24,
            top:6
        })
        isc.Window.changeDefaults("headerIconDefaults", {
            width:16,
            height:16,
            layoutAlign:"center",
            src:"[SKIN]/Window/headerIcon.png"
        })
        isc.Window.changeDefaults("restoreButtonDefaults", {
             src:"[SKIN]/Window/restore.png",
             showRollOver:true,
             width:18,
             height:18
        })
        isc.Window.changeDefaults("closeButtonDefaults", { 
             src:"[SKIN]/Window/close.png",
             showRollOver:true,
             width:18,
             height:18
        })
        isc.Window.changeDefaults("maximizeButtonDefaults", { 
             src:"[SKIN]/Window/maximize.png",
             showRollOver:true,
             width:18,
             height:18
        })
        isc.Window.changeDefaults("minimizeButtonDefaults", { 
             src:"[SKIN]/Window/minimize.png",
             showRollOver:true,
             width:18,
             height:18
        })
        isc.Window.changeDefaults("toolbarDefaults", {
            buttonConstructor: "IButton"
        })

//----------------------------------------