In this tutorials you will know how to use Ajax tab control using CSS.first Create new ajax enabled website and add reference of AjaxControlToolkit.dll in solution explorer, and Add some image which are used in CSS.
Add the following code in the tab container:
<style type="text/css">
.fancy .ajax__tab_header
{
font-size:13px;
font-weight:bold;
color:#000000;
font-family:sans-serif;
background:url(img/blue_bg.jpg) repeat-x;
}
.fancy .ajax__tab_active .ajax__tab_outer,
.fancy .ajax__tab_header .ajax__tab_outer,
.fancy .ajax__tab_hover .ajax__tab_outer
{
height:46px;
background:url(img/blue_left.jpg) no-repeat left top;
}
.fancy .ajax__tab_active .ajax__tab_inner,
.fancy .ajax__tab_header .ajax__tab_inner,
.fancy .ajax__tab_hover .ajax__tab_inner
{
height:46px;
margin-left:16px; /* offset the width of the left image */
background:url(img/blue_right.jpg) no-repeat right top;
}
.fancy .ajax__tab_active .ajax__tab_tab,
.fancy .ajax__tab_hover .ajax__tab_tab,
.fancy .ajax__tab_header .ajax__tab_tab
{
margin:16px 16px 0px 0px;
}
.fancy .ajax__tab_hover .ajax__tab_tab,
.fancy .ajax__tab_active .ajax__tab_tab
{
color:#cccccc;
}
.fancy .ajax__tab_body
{
font-family:verdana,tahoma,helvetica;
font-size:10pt;
border:1px solid #999999;
border-top:0;
padding:2px;
background-color:#666666;
}
</style>
Step 4: Drag AjaxToolKit:TabContainer from the toolbox and drop on the page like as follows:
<ajaxToolkit:TabContainer ID="TabContainer1" runat="server" Width="100%" CssClass="fancy"
ActiveTabIndex="0">
<ajaxToolkit:TabPanel ID="TabAboutUs" runat="server" HeaderText="About Me">
<ContentTemplate>
<table cellspacing="2" cellpadding="2" background="img/Bg2.gif" width="100%" height="300">
<tr align="left" valign="top">
<td>
<h3>
Purushottam Rathore</h3>
</td>
</tr>
</table>
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ID="TabAddress" runat="server" HeaderText="Address">
<ContentTemplate>
<table cellspacing="2" cellpadding="2" width="100%" background="img/Bg2.gif" height="300">
<tr align="left" valign="top">
<td>
<h3>
Noida</h3>
</td>
</tr>
</table>
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ID="TabCountry" runat="server" HeaderText="Country">
<ContentTemplate>
<table cellspacing="2" cellpadding="2" width="100%" height="300" background="img/Bg2.gif">
<tr align="left" valign="top">
<td>
<h3>
India</h3>
</td>
</tr>
</table>
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ID="TabPhoto" runat="server" HeaderText="My Photo">
<ContentTemplate>
<table cellspacing="2" cellpadding="2" width="100%" height="300" bgcolor="WhiteSmoke">
<tr align="left" valign="top">
<td>
<img src="puru.jpg" />
</td>
</tr>
</table>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
OutPut: Here I am using ActiveTabIndex property of tabcontainer is zero as follows:
<ajaxToolkit:TabContainer ID="TabContainer1" runat="server" Width="100%" CssClass="fancy"
ActiveTabIndex="0">
Original Source:
Related Stuff
-
MooV: Using cutting edge Video phones and Software Video Phones - coupling all that with VoIP and empowering the disabled.
-
Moo Telecom: VoIP communications made easy - Ring anyway with the fun and ease of using a normal phone
-
TagR:Mobile Social Network with Real Time Locations Based services, and Ambience Intelligence, VoiP, IM, Skype, Googletalk, Mapping, Flickr, Events, Calendaring, Scheduling, SecondLife Support
-
ClearSMS : ClearSMS is a Web-based application that lets you send bulk SMS messages to your customers, contacts, or just about anyone.
-
Jajah:jah is a VoIP (Voice over IP) provider, founded by Austrians Roman Scharf and Daniel Mattes in 2005[1]. The Jajah headquarters are located in Mountain View, CA, USA, and Luxembourg. Jajah maintains a development centre in Israel.
-
Skype: It’s free to download and free to call other people on Skype. Skype the number one voice over ip software
- PrivatePhone: a free local phone number with voicemail and messages you can check online or from any phone.