The TabContainer control provides multiple views in a web page . Nowadays , with the increase in the demand for enhanced graphics capabilities , Microsoft has released new products , such as Windows vista , Microsoft Office , and Internet Explorer with tabbed version . The tabs within a page provides you means to view a large amount of information at a single location. The TabContainer control enables you to create a tabbed interface ; where clicking each tab display different contents . Switching from one tab to other does not need a postback .
Sports
</HeaderTemplate>
hot sports
</ContentTemplate>
Output:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="tabcontainer.aspx.cs" Inherits="tabcontainer" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>
<asp:TabContainer ID="TabContainer1" runat="server" Width ="200px">
<asp:TabPanel ID="tab1" runat ="server">
<HeaderTemplate >
Hot News
</HeaderTemplate>
</HeaderTemplate>
<ContentTemplate >
visit for hot gadget news
<a href="http://www.pc-gadgetworld.com">Hot gadget world</a>
<a href="http://www.pc-gadgetworld.com">Hot gadget world</a>
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel ID="tab2" runat ="server" >
<HeaderTemplate >
Sports
</HeaderTemplate>
<ContentTemplate >
hot sports
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
</div>
</form>
</body>
</html>
Output:
Properties of Tab Container Control :
ActiveTabChanged : Set an event that is fired on the server -side when a tab is changed after a postback.
OnClientActiveTabChanged : Attaches a javaScript function to the client side tabChanged event.
CssClass : Set the CSS class to define custom look for tabs . It overrides the already defined custom look settings.
ActiveTabIndex : Set the tab index that remains visible when the page renders for the first time .
Height : Set the Height of the body of tab.
Width : Sets the width of the body of tabs.
ScrollBars : Determines whether or not the scrollbars should be displayed.