Ajax Tab Container Tool Kit

Tab Container

Tabcontainer is used to create a tabbed Interface on the page.It has the tabpanel to specify  the Tabpanels to create with in the Tabconstainer& every tab panel has ‘headerTemplate& ‘Contenttemplate’Where Header Template is used to provide heading  for the Tabpanel and content Template is used to the content to display on the Tabpanel.Other properties Tab container has are as follows.

Tab Strip Placement

Used to specify where to display the Tabstrips with in the Tab container, Scroll bars Used to specify which scroll bars you want to display for the Tabcontainer .It has the following options. None Horizontal Vertical Both Auto

Active Tab Index

Used to get or set the Indes of the tab which is currently active in tab container. It has the event ‘Active Tabchanged’ as the default event that will be raised whenever user select a new tabpanel with in the tabeconatiner

Example

the following example creates a tabcontainer with two tabpanels within it. Add a page to the website ,take a toolkit script manager on the page and within HTML source of the page create tab panels within the tab container. <asp: Tabpanel ID=”Tp1” runat=”server”> <headerTemplate> Tab1 </headerTempalte> <content Template> <asp:calender ID=”c1” runat=”server”/> </contentTemplate> </asp:TabPanel> <asp:TabPanel ID=”Tp2” runat=”server”/> <HeaderTemplate> Tab2 </HeaderTemplate> <contentTemplate> <asp:Image ID=”Image1” runat=”server” width=”300” height=”300” ImageUrl=”~/Images/penguins.jpg”)> </contentTemplate> </asp:Tabpanel>