Ajax contorl toolkit Tabs Demonstration
Tabs Demonstration
The following user profile is presented in Tab format. You can click on the tab
and modify specific fields.
Toolkit User Profile:
Current Tab:
Signature and Bio
Vertical Tab layout feature:
OnDemand feature:
I'm tab 1, I was rendered at
5:07:19 PM
My OnDemandMode is 'Once'
I'm tab 3, I was rendered at
5:07:19 PM
My OnDemandMode is 'None'
TabContainer is an ASP.NET AJAX Control which creates a set of Tabs that can be
used to organize page content. A TabContainer is a host for a number of TabPanel
controls.
Each TabPanel defines its HeaderText or HeaderTemplate as well as a ContentTemplate
that defines its content. The most recent tab should remain selected after a postback,
and the Enabled state of tabs should remain after a postback as well.
TabContainer layout provides option to set TabPanels at top, topright, bottom, bottomright.
TabContainer also provides option to set TabPanels at left, leftbottom, right and
rightbottom by setting UseVerticalStripPlacement to true.
Tabs can be loaded all at one time or on demand. Each tab provides functionality
to load tab in three different modes - always, once or none.
Tab can be accessed by keyboard. After focus is set on the tab container then you can navigate to different
tabs by using the left and right arrow keys. When tabs are displayed vertically then Up and Down arrow keys can be
used to navigate from tab to tab.
The control above is initialized with this code. The italic properties
are optional:
<ajaxToolkit:TabContainer runat="server"
OnClientActiveTabChanged="ClientFunction"
Height="150px"
Width="400px"
ActiveTabIndex="1"
OnDemand="true"
AutoPostBack="false"
TabStripPlacement="Top"
CssClass="ajax__tab_xp"
ScrollBars="None"
UseVerticalStripPlacement="true"
VerticalStripWidth="120px"
>
<ajaxToolkit:TabPanel runat="server"
HeaderText="Signature and Bio"
Enabled="true"
ScrollBars="Auto"
OnDemandMode="Once"
<ContentTemplate>
...
</ContentTemplate>
/>
</ajaxToolkit:TabContainer>
TabContainer Properties
- ActiveTabChanged (Event) - Fired on the server side when a tab
is changed after a postback
- OnClientActiveTabChanged - The name of a javascript function to
attach to the client-side tabChanged event
- CssClass - A css class override used to define a custom look and
feel for the tabs. See the Tabs Theming section for more details.
- ActiveTabIndex - The first tab to show
- Height - sets the height of the body of the tabs (does not include
the TabPanel headers)
- Width - sets the width of the body of the tabs
- ScrollBars - Whether to display scrollbars (None, Horizontal, Vertical,
Both, Auto) in the body of the TabContainer
- TabStripPlacement - Whether to render the tabs on top of the container
or below (Top, Bottom)
- UseVerticalStripPlacement - Whether to render the tabs on left or right
of the container
- VerticalStripWidth - Width of the tab panels when displaying tabs
vertically
- AutoPostBack - Make auto postback from the javascript when tab index changes.
- OnDemand - Whether to render/load tabs onDemand or all at page load
TabPanel Properties
- Enabled - Whether to display the Tab for the TabPanel by default.
This can be changed on the client.
- OnClientClick - The name of a javascript function to attach to
the client-side click event of the tab.
- HeaderText - The text to display in the Tab
- HeaderTemplate - A TemplateInstance.Single ITemplate to use to
render the header
- ContentTemplate - A TemplateInstance.Single ITemplate to use to
render the body
- Enabled - Make tab enable or not
- ScrollBars - Whether to display scrollbars (None, Horizontal, Vertical,
Both, Auto) in the body of the TabPanel
- OnDemandMode - When container's onDemand is true then whether to load tab -
Always, Once, None
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.
Ajax control toolkit Tabs example with demo in asp .net
In this asp .net tuotiral you will learn about
ajax control toolkit Tabs,ajax control toolkit Tabs Extender,ajax control toolkit pie chart sample,ajax control toolkit Tabs Demo,ajax control toolkit Tabs with database,ajax control toolkit Tabs tutorial