ASP.NET AJAX Control Toolkit Demos v20.1.0.0

Tabs Sample
Ajax Control Toolkit
Tabs Demonstration
The following user profile is presented in Tab format. You can click on the tab and modify specific fields.

Toolkit User Profile:
Signature:
Bio:


Hit Save to cause a postback from an update panel inside the tab panel.



Current Tab: Signature and Bio


Vertical Tab layout feature:
Signature:
Bio:


Hit Save to cause a postback from an update panel inside the tab panel.


OnDemand feature:
I'm tab 1, I was rendered at 7:39:52 AM
My OnDemandMode is 'Once'
Tabs Description
TabContainer is an ASP.NET AJAX Control, which creates a set of tabs that can be used to organize page content. TabContainer is a host for a number of TabPanel controls.
TabPanel is a part of the TabContainer element. It can be used to organize page content. Each TabPanel defines its HeaderText or HeaderTemplate as well as the ContentTemplate that defines its content.The most recent tab should remain selected after a postback, and the Enabled state of tabs should be preserved after a postback.
Tabs Properties

TabContainer


Properties
  • ActiveTab - The current active tab
  • ActiveTabIndex - The first tab to show
  • ActiveTabIndexForClient - The first tab to show
  • AutoPostBack - Make an auto postback from JavaScript when a tab index changes
  • CssTheme - Gets or sets a CSS theme predefined in a CSS file
  • Height - Height of a tab body (does not include TabPanel headers)
  • OnClientActiveTabChanged - Fires on the client side when a tab is changed
  • OnDemand - Determines whether or not to render/load precise tabs on demand or all tabs on page load
  • ScrollBars - Determines whether or not to display scrollbars (None, Horizontal, Vertical, Both, Auto) in the TabContainer body
  • Tabs - A collection of tabs
  • TabStripPlacement - Determines whether or not to render tabs on top of the container or below (Top, Bottom)
  • UniqueID - AutoPostback ID
  • UseVerticalStripPlacement - Determines whether or not to render tabs on the left or right side of the container
  • VerticalStripWidth - Width of tab panels when tabs are displayed vertically
  • Width - Width of the tab body

Events
  • ActiveTabChanged - Fires on the server side when a tab is changed after a postback

TabPanel


Properties
  • ContentTemplate - TemplateInstance.Single ITemplate to use for rendering the body
  • DynamicContextKey - An arbitrary string value to be passed to the dynamically populated Web method
  • DynamicServiceMethod - The name of a method to call on the page or web service
  • DynamicServicePath - The URL of the web service to call
  • Enabled - Determines whether or not to display a tab for the TabPanel by default
  • HeaderTemplate - TemplateInstance.Single ITemplate to use to render the header
  • HeaderText - Text to display in the tab
  • OnClientClick - The name of a JavaScript function to attach to the tab's client-side Click event
  • OnClientPopulated - A handler to attach to the client-side populated event
  • OnClientPopulating - A handler to attach to the client-side populating event
  • OnDemandMode - Determines whether or not to load a tab (Always, Once, None) when the container's onDemand property is true
  • ScrollBars - Detemines whether or not to display scrollbars (None, Horizontal, Vertical, Both, Auto) in the body of the TabPanel
  • UpdatePanelID - Introduces UpdatePanelID to the client side by prototyping it
  • WasLoadedOnce - Determines the loading status of the tab in Once demand mode
Tabs Theming
You can change the look and feel of Tabs using the Tabs CssClass property. Tabs has a predefined set of CSS classes that can be overridden. It has a default style which is embedded as a WebResource and is a part of the Toolkit assembly that has styles set for all the sub-classes. You can find the default styles in the Toolkit solution in the "AjaxControlToolkit\Tabs\Tabs.css" file. If your CssClass does not provide values for any of those then it falls back to the default value. In the example above the default style is used. To customize the same the user would have to set the CssClass property to the name of the CSS style and define the styles for the individual classes so that the various elements in a Tab control can be styled accordingly. For example if the CssClass property was set to "CustomTabStyle" this is how the css to style the tab header would look:
    .CustomTabStyle .ajax__tab_header {
        font-family:verdana,tahoma,helvetica;
        font-size:11px;
        background:url(images/tab-line.gif) repeat-x bottom;
    }
            
Tabs Css classes
  • .ajax__tab_header: A container element that wraps all of the tabs at the top of the TabContainer. Child CSS classes:.ajax__tab_outer.
  • .ajax__tab_outer: An outer element of a tab, often used to set the left-side background image of the tab.Child CSS classes: .ajax__tab_inner.
  • .ajax__tab_inner: An inner element of a tab, often used to set the right-side image of the tab. Child CSS classes:.ajax__tab_tab.
  • .ajax__tab_tab: An element of the tab that contains the text content. Child CSS classes:none.
  • .ajax__tab_body: A container element that wraps the area where a TabPanel is displayed. Child CSS classes: none.
  • .ajax__tab_hover . This is applied to a tab when the mouse is hovering over. Child CSS classes:.ajax__tab_outer.
  • .ajax__tab_active: This is applied to a tab when it is the currently selected tab. Child CSS classes:.ajax__tab_outer.
Copyright © 2012-2024 CodePlex Foundation. All Rights Reserved.