tabbar.js

javascript 很酷的类库

/*
 * Isomorphic SmartClient
 * Version 6.5 (2008-04-30)
 * Copyright(c) 1998-2007 Isomorphic Software, Inc. All rights reserved.
 * "SmartClient" is a trademark of Isomorphic Software, Inc.
 *
 * [e-mail]
 *
 * http://smartclient.com/license
 */

 





//>	@class	TabBar
// Shows a set of Tabs.  TabBars are automatically created by TabSets and shouldn't be used
// directly.  The TabBar is documented for skinning purposes.
// 
// @treeLocation Client Reference/Layout/TabSet
// @visibility external
//<
isc.ClassFactory.defineClass("TabBar", "Toolbar");

isc.TabBar.addProperties({
	//>	@attr	isc.TabBar.tabs		(Array of Tab Properties : null : IR)
	// Tab for this TabBar.
    // @visibility external
	//<

    //>	@attr	isc.TabBar.breadth	(number : 21 : IRW)
	// Breadth of the tabBar (including baseline breadth)
    // @visibility external
	//<
	breadth: 21,

    //>	@attr	isc.TabBar.buttonConstructor	(class: ImgTab : AIRW)
	// SmartClient component used for the tabs of the tabBar. 
    // Must be Button or Button subclass.
    // @visibility external
	//<
    // Note - if this TabBar is part of a TabSet, this constructor can be overridden by setting 
    // 'useSimpleTabs' on the TabSet - will use buttons instead, styled via CSS to look like
    // tabs.
	buttonConstructor:isc.ImgTab,

    // We want to have arrow keys, not tab-keypresses, move between tabs
    tabWithinToolbar:false,

    //>	@attr	isc.TabBar.skinImgDir		(URL : "images/Tab/" : AIRW)
	//			base path for the tab images, if an image-based
	//			tab is being used.
	//		@group skins, files
	//<
	skinImgDir:"images/Tab/",			
										
	// Baseline
	// --------------------------------------------------------------------------------------------
    
    //> @groupDef baseLine
    // The baseLine is StretchImg that is placed along the edge of the TabBar that borders on
    // the pane, occluding the pane's actual border but matching it exactly.  The selected tab
    // is in front of the baseLine, and the rest are behind it.
    // @visibility external
    //<

    //>	@attr isc.TabBar.baseLineThickness (number : 1 : IR)
	// Thickness of the baseLine, in pixels.  This should be set to match the media specified
    // by +link{baseLineSrc}.  The baseLineThickness also determines the degree of overlap with
    // the TabSet's paneContainer when using decorative edges - see +link{TabSet.paneContainer}
    // for details.
    // 
    // @group baseLine 
    // @visibility external
	//<
	baseLineThickness:1,

    //>	@attr isc.TabBar.baseLineSrc	(SCImgURL : "[SKIN]baseline.gif" : IR)
	// Sets +link{stretchImg.src} for the +link{group:baseLine} StretchImg.
    // @group baseLine 
    // @visibility external
	//<
	baseLineSrc:"[SKIN]baseline.gif",

    //>	@attr isc.TabBar.baseLineCapSize	(number : 2 : IR)
	// Set +link{stretchImg.capSize} for the +link{group:baseLine} stretchImg.
    // @group baseLine
    // @visibility external
	//<
	baseLineCapSize:2,

	// Positioning and Alignment
	// --------------------------------------------------------------------------------------------
    //>	@attr	isc.TabBar.tabBarPosition	(Side : isc.Canvas.TOP : IRW)
	// Position of the tabBar in relation to whatever it controls.
	//<
    // Not doc'd, do via TabSet
	tabBarPosition:isc.Canvas.TOP,

	// --------------------------------------------------------------------------------------------
    //>	@attr	isc.TabBar.selectedTab		(number : 0 : IR)
	// Index of the initially selected tab.  Settable at initialization only, afterwards, call
    // +link{selectTab}.
	//<
    // Not doc'd, do via TabSet
	selectedTab:0,

    //>	@attr	isc.TabBar.defaultTabSize		(number : 80 : IR)
	// Default size (length) in pixels for tabs within this tabBar
    // @visibility external
	//<    
    defaultTabSize:80
										
	//>	@attr	TabBar.tabDefaults		(Tab : 0 : AIR)
	//			Defaults applied to tabs on init.
	//			Note that these are overlaid over the superclass property
	//			toolBar.buttonDefaults.
    //<
    // Null by default - we will set this up in initWidget - this avoids multiple tabBars
    // pointing to the same tabDefaults object
	//tabDefaults:{}
});


isc.TabBar.addMethods({
//>	@method	tabBar.initWidget()	(A)
// Initialize the TabBar object.
// <p>
// Setup special button properties and create the baseLine
//<
initWidget : function () {
	// if the name of the pane property of a tab is specified as a string, check it
	// now, and reassign.
	for (var i = 0; i < this.tabs.length; i++) {
		var pane = this.tabs[i].pane;
		
		if (isc.isA.String(pane) && isc.isA.Canvas(window[pane])) {
			this.tabs[i].pane = window[pane];
		}
        
	}
	
	// copy tabs over to the buttons array, which is what the superclass uses.
	this.buttons = this.tabs;
    
    // Note that the order of the tabs can be reversed by setting the 'reverseOrder' property
    // on this tabBar [can be done in tabBarDefaults] if this is required.
    
    // set up the skinImgDir for the baseline
    this.skinImgDir = this.skinImgDir + this.tabBarPosition + "/",
    // set this.vertical to handle Layout
    this.vertical = (this.orientation == isc.Layout.VERTICAL);
    
    var tabDefaults = this.tabDefaults;
    if (tabDefaults == null) tabDefaults = this.tabDefaults = {};
    
	// tabs are created as "buttons" by Toolbar superclass code; to have tabDefaults applied to
    // each button, assign to buttonDefaults.
    // NOTE: if we add properties directly to the buttonDefaults object, we'll side effect all
    // Toolbars
	tabDefaults = this.buttonDefaults = isc.addProperties({}, this.buttonDefaults, tabDefaults);

    // tabs are mutually exclusive
    tabDefaults.actionType = isc.StatefulCanvas.RADIO;
    
    // Default tabs to defaultTabWidth
    if (this.vertical) {
        tabDefaults.defaultHeight = this.defaultTabSize;
    } else {
        tabDefaults.defaultWidth = this.defaultTabSize;
    }
    // .. and allow them to expand to fit content
    tabDefaults.overflow = isc.Canvas.VISIBLE;

    // set the 'position' property on tabs to match this.tabBarPosition, so they can style
    // correctly
    tabDefaults.tabBarPosition = this.tabBarPosition;
    
    // have iconClick close the tabs if appropriate
    tabDefaults.iconClick = this._tabIconClickHandler;


    tabDefaults._generated = true;
    
	this.Super(this._$initWidget);

	if (this._baseLine == null) this.makeBaseLine();
},

// _tabIconClickHandler - method applied directly to the tabs
_tabIconClickHandler : function () {
    return this.parentElement.tabIconClick(this);
},

tabIconClick : function (tab) {
    
    var ts = this.parentElement;
    return ts._tabIconClick(tab);
   
},

// override makeButton to show the icon for the button
makeButton : function (properties, a,b,c,d) {
    var canClose = this.parentElement.canCloseTab(properties);
    if (canClose) {
        properties.icon = (properties.closeIcon || this.parentElement.closeTabIcon);
        // close icon should appear at the end of the tab
        properties.iconOrientation = isc.Page.isRTL() ? "left" : "right";
        properties.iconAlign = properties.iconOrientation;
        
    }                                                
    
    return this.invokeSuper("TabBar", "makeButton", properties, a,b,c,d);
},

addTabs : function (tabs, position) {
    if (!position && this.tabBarPosition == isc.Canvas.LEFT) position = 0;
    this.addButtons(tabs, position);
    // ensure the tabs initially show up behind the baseline
    if (this._baseLine != null) {
        this._baseLine.bringToFront();
        var selectedTab = this.getButton(this.getSelectedTab());
    	if (selectedTab) selectedTab.bringToFront();
    }
},


removeTabs : function (tabs) {
    // get the list of tab widgets to be removed
    if (tabs == null) return;
    if (!isc.isAn.Array(tabs)) tabs = [tabs];
    var tabWidgets = this.map("getButton", tabs);

    // remove the tabs
    this.removeButtons(tabs);
    
    // destroy each of the buttons we removed; it's appropriate/okay to do this because the buttons
    // were automatically created by this tabBar
    for (var i = 0; i < tabWidgets.length; i++) {
        if (tabWidgets[i] != null) tabWidgets[i].destroy();
    }
},

//>	@method	tabBar.draw()	(A)
// Extended to do layout and handle the selected tab.
//		@group	drawing
//<
draw : function (a,b,c,d) {
    arguments.__this = this;

	this.fixLayout();

	this.invokeSuper(isc.TabBar, "draw", a,b,c,d);
	this.bringToFront();

	var selectedTab = this.getButton(this.selectedTab);
	// now that the buttons have all drawn, bring the baseline in front of them, then count on
    // the setSelected() behavior to bring the selected tab in front of the baseLine
	if (selectedTab) {
        
        selectedTab.setSelected(true);
    }
},

//>	@method	tabBar.makeBaseLine()	(A)