tabset.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	TabSet
//
// The TabSet class allows components on several panes to share the same space. The tabs at 
// the top can be selected by the user to show each pane. 
// <P>
// Tabs are configured via the <code>tabs</code> property, each of which has a
// <code>pane</code> property which will be displayed in the main pane when that tab is
// selected.
//
//  @treeLocation Client Reference/Layout
//  @visibility external
//<

isc.ClassFactory.defineClass("TabSet", "Canvas");

isc.TabSet.addProperties({

    // NOTE: Setting both the paneContainer and TabSet to overflow:"visible" results in an
    // auto-expanding TabSet.  This may be appropriate as a top-level page layout when an
    // application is more web-style than desktop-style, eg, allows and utilizes browser-level
    // scrolling.
    overflow:"hidden",

	// TabBar
	// ----------------------------------------------------------------------------------------
    //>	@attr	tabSet.tabs		(Array of Tab : null : IRW)
    //
    // An array of tab objects, specifying the title and pane contents of each tab in the
    // TabSet.  When developing in JavaScript, tabs are specified as an array of object
    // literals, not instances - see +link{Tab}.
    // <p>
    // You can add and remove tabs after creating the TabSet by calling +link{TabSet.addTab}
    // @visibility external
    // @example tabsOrientation
    //<
    
    //> @object Tab
    // Tabs are specified as objects, not class instances.  For example, when
    // developing in JavaScript, a typical initialization block for a TabSet would look like
    // this:
    // <pre>
    // TabSet.create({
    //     tabs: [
    //         {title: "tab1", pane: "pane1"},
    //         {title: "tab2"}
    //     ]
    // });
    // </pre>
    // And in XML:
    // <pre>
    // &lt;TabSet&gt;
    //    &lt;tabs&gt;
    //        &lt;Tab title="tab1" pane="pane1"/&gt;
    //        &lt;Tab title="tab2"/&gt;
    //    &lt;/tabs&gt;
    // &lt;/TabSet&gt;
    // </pre>
    // 
    // @treeLocation Client Reference/Layout/TabSet
    // @visibility external
    //<

    //> @attr tab.title (HTML : null : IRW)
    //
    // Specifies the title of the this tab.  To change the title after the TabSet has been
    // created, call +link{TabSet.setTabTitle}.
    //
    // @see TabSet.setTabTitle
    // @visibility external 
    //<    
    
    //> @attr tab.pickerTitle   (HTML : null : IRW)
    // If +link{tabSet.showTabPicker} is true for this TabSet, if set this property will determine
    // the title of the picker menu item for this tab. If unset, +link{tab.title} will be used
    // instead
    // @see TabSet.showTabPicker
    // @see tab.title
    // @group tabBarControls
    // @visibility external
    //<
    
    //> @attr tab.pane (ID or Canvas: null : IRW)
    //
    // Specifies the pane associated with this tab.  You have two options for the value of
    // the pane attribute:
    // <ul>
    // <li><b>ID</b> - The global ID of an already created Canvas (or subclass).
    // <li><b>Canvas</b> - A live instance of a Canvas (or subclass).
    // </ul>
    // You can change the pane associated with a given tab after the TabSet has been created by
    // calling +link{TabSet.updateTab}.
    // 
    // @see TabSet.updateTab
    // @visibility external
    //<

    //> @attr tab.ID (identifier : null : IRW)
    // Optional ID for the tab, which can later be used to reference the tab.
    // APIs requiring a referenct a tab will accept the tabs ID 
    // [including  +link{tabSet.selectTab()}, +link{tabSet.updateTab()}, +link{tabSet.removeTab()}].<br>
    // The ID will also be passed to the +link{tabSet.tabSelected()} and +link{tabSet.tabDeselected()}
    // handler functions, if specified.
    // <p>
    // Note that if you provide an ID, it must be globally unique.
    //
    // @visibility external
    //< 

    //> @attr tab.width (number : 100 : IRW)
    // You can specify an explicit width for the tab using this property.  Note that tabs
    // automatically size to make room for the full title, but if you want to e.g. specify a
    // uniform width for all tabs in a TabSet, this property enables you to do so.
    //
    // @visibility external
    //< 
    
    //> @attr   tab.disabled    (boolean : null : IRW)
    // If specified, this tab will initially be rendered in a disabled state. To enable or
    // disable tabs on the fly use the +link{tabSet.enableTab()}, and +link{tabSet.disableTab()}
    // methods.
    // @visibility external
    //<

    //> @attr   tab.icon    (SCImgURL : null : IRW)
    // If specified, this tab will show an icon next to the tab title.  Note that as with 
    // +link{Button.icon}, the URL of a tabs icon will be updated to reflect disabled state.<br>
    // If desired a click handler may be assigned to the icon, which will be fired when the user
    // clicks the tab. This method takes a single parameter <code>tab</code>, a pointer to the tab
    // object.
    // 
    // @visibility external
    // @example tabsOrientation
    // @see tabSet.tabIconClick
    //<
    
    //> @attr   tab.canClose    (boolean : null : IRW)
    // Determines whether this tab should show an icon allowing the user to dismiss the tab by
    // clicking on it directly. The URL for this icon's image will be derived from 
    // +link{tabSet.closeTabIcon} by default, but may be overridden by explicitly specifying
    // +link{tab.closeIcon}.<br>
    // If unset, this property is derived from +link{tabSet.canCloseTabs}
    // @visibility external
    // @example closeableTabs
    // @see TabSet.closeClick()
    //<
    
    //> @attr tab.closeIcon (URL : null : IRW)
    // Custom src for the close icon for this tab to display if it is closeable.
    // See +link{tab.canClose} and +link{tabSet.canCloseTabs}.
    // @visibility external
    //<

    // ---------------------------------------------------------------------------------------
    
    //> @attr tabSet.tabBar (AutoChild : null : R)
    // TabBar for this TabSet, an instance of +link{TabBar}.
    // @visibility external
    //<
    // NOTE: tabBar is actually not created via autoChild system, but supports the same
    // defaults.

    //>	@attr tabSet.tabProperties (Tab Properties : null : IR)
	// Properties to apply to all Tabs created by this TabSet.
    // @visibility external
	//<
    tabProperties:{},

    // Simple Tabs
    // ---------------------------------------------------------------------------------------

    //>	@attr	isc.TabSet.useSimpleTabs    (boolean : false : IRWA)
    //  If set to true, we create tab instances as buttons (styled with 'tabButtonTop' /
    //  'tabButtonBottom' base styles, rather than the more heavy weight imgTab widgets.
    //  (internal for now)
    //<
    //useSimpleTabs:false,
    
    //> @attr   isc.TabSet.simpleTabBaseStyle   (CSSStyleName : "tabButton" : [IRW])
    //  If this.useSimpleTabs is true, simpleTabBaseClass will be the base style used to 
    //  determine the css style to apply to the tabs.<br>
    //  This property will be suffixed with the side on which the tab-bar will appear, followed
    //  by with the tab's state (selected, over, etc), resolving to a className like 
    //  "tabButtonTopOver"
    //<
    simpleTabBaseStyle:"tabButton",
 
    // TabBar placement and sizing   
    // ---------------------------------------------------------------------------------------

    //>	@attr	tabSet.tabBarPosition		(Side : isc.Canvas.TOP : IR)
    // Which side of the TabSet the TabBar should appear on.
    // @group tabBar
    // @visibility external
    // @example tabsOrientation
    //<
	tabBarPosition:isc.Canvas.TOP,
    
    //>	@attr	tabSet.tabBarAlign		(Side : see below : IR)
	// Alignment of the tabBar.
    // <P>
    // If the position of the tabBar is "top" or "bottom", then alignment must be "left" or
    // "right" and defaults to "left".
    // <P>
    // If the position of the tabBar is "left" or "right", then the alignment must be "top" or
    // "bottom" and defaults to "top".
    // 
    // @group tabBar
    // @visibility external
    // @example tabsAlign
	//<

    //>	@attr	tabSet.tabBarThickness		(number : 21 : IRW)
	// Thickness of tabBar, applies to either orientation (specifies height for horizontal,
    // width for vertical orientation).  Note that overriding this value for TabSets that are
    // skinned with images generally means providing new media for the borders.
    // @group tabBar
    // @visibility external
	//<					
	tabBarThickness:21,

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

    //>	@attr	tabSet.selectedTab		(number : 0 : IRW)
    // Specifies the index of the initially selected tab.
    // @group tabBar
    // @visibility external
    //<
	selectedTab:0,
    
    // ---------------------------------------------------------------------------------------

    //> @attr   tabSet.canCloseTabs (boolean : null : IRW)
    // Should tabs in this tabSet show an icon allowing the user to dismiss the tab by
    // clicking on it directly. May be overridden for individual tabs by setting 
    // +link{tab.canClose}.<br>
    // The URL for this icon's image will be derived from  +link{tabSet.closeTabIcon} by 
    // default, but may be overridden by explicitly specifying +link{tab.closeIcon}.
    // @see TabSet.closeClick()
    // @visibility external
    //<
    
    //> @attr   tabSet.closeTabIcon (URL : [SKIN]/TabSet/close.png: IRW)
    // Default src for the close icon for tabs to display if +link{tabSet.canCloseTabs} is true.
    // @visibility external
    //<
    closeTabIcon:"[SKIN]/TabSet/close.png",
    
    // -----------------------------------------------------------
    // Tab bar controls

    //> @attr   tabSet.tabBarControls       (Array : ["tabScroller", "tabPicker"] : [IRA])
    // This property determines what controls should show up after the tabBar for this tabSet.
    // Standard controls can be included using the strings <code>"tabScroller"</code> and 
    // <code>"tabPicker"</code>. These show the standard controls to scroll to clipped tabs, 
    // or pick them directly from a menu, and show up only if +link{tabSet.showTabScroller} or
    //  +link{tabSet.showTabPicker} is true and there is not enough space available to show all 
    // the tabs in the tab-bar.<br>
    // Additional controls can be included by adding any widget to this array.
    // Controls will show up in the order in which they are specified.
    // @group tabBarControls
    // @visibility external
    //<
    tabBarControls : ["tabScroller", "tabPicker"],
    
    
    //> @attr   tabSet.showTabScroller  (boolean : true : [IR])
    // If there is not enough space to display all the tab-buttons in this tabSet, should 
    // scroller buttons be displayed to allow access to tabs that are clipped?
    // @visibility external
    // @group tabBarControls
    //<
    showTabScroller:true,

    //> @attr   tabSet.showTabPicker    (boolean : true : [IR])
    // If there is not enough space to display all the tab-buttons in this tabSet, should
    // a drop-down "picker" be displayed to allow selection of tabs that are clipped?
    // @visibility external
    // @group tabBarControls
    //<    
    showTabPicker:true,
    
    //>Animation
    //> @attr   tabSet.animateTabScrolling  (boolean : true : [IR])
    // If +link{tabSet.showTabScroller} is true, should tabs be scrolled into view via an 
    // animation when the user interacts with the scroller buttons?
    // @visibility external
    // @group tabBarControls
    //<
    animateTabScrolling:true,
    //<Animation
    
    //> @attr   tabSet.scrollerButtonSize   (number : 16 : [IR])
    // If +link{tabSet.showTabScroller} is true, this property governs the size of scroller
    // buttons. Applied as the width of buttons if the tabBar is horizontal, or the height
    // if tabBar is vertical. Note that the other dimension is determined by 
    // +link{tabBarThickness,this.tabBarThickness}
    // @group tabBarControls
    // @visibility external
    //<
    scrollerButtonSize:16,
    
    //> @attr   tabSet.pickerButtonSize   (number : 16 : [IR])
    // If +link{tabSet.showTabPicker} is true, this property governs the size of tab-picker