Ajax controltoolkit Learning Log-tabs (27)

The tabs control is actually a container control tabiner iner and a panel control tabpanel. The tabcontainer control is used to contain tabpanel. The tabpanel control is used for display.

Here is an example:

1) Create an ASP. NET Ajax-enabled web project in vs2005 and name it tabs.

2) Add a tabcontainer control on the default. aspx page, and add two tabpanels to the Container Control. Name tabpanel1 and tabpanel2 respectively, and set headertext as account and email.

CodeAs follows: 1 < C0: tabcontainer ID = "Tabcontainer1" Runat = "Server" Height = "200px" Width = "300px" Onclientactivetabchanged = "Activetabchanged" >
2 < C0: tabpanel ID = "Tabpanel1" Runat = "Server" Headertext = "Account" >
3 < Contenttemplate >
4 < ASP: Label ID = "Label1" Runat = "Server" Text = "Name" > </ ASP: Label >
5 & Nbsp; < ASP: textbox ID = "Txtname" Runat = "Server" > </ ASP: textbox > < BR />
6 < ASP: Label ID = "Label2" Runat = "Server" Text = "Password" > </ ASP: Label >
7 < ASP: textbox ID = "Txtpassword" Runat = "Server" Textmode = "Password" > </ ASP: textbox > < BR /> < BR />
8 < ASP: updatepanel ID = "Updatepanel1" Runat = "Server" >
9 < Contenttemplate >
10 < ASP: button ID = "Button1" Runat = "Server" Text = "Button" Onclick = "Getuserinfo"   />
11 < ASP: Label ID = "Namepassword" Runat = "Server" Text = "" > </ ASP: Label >
12 </ Contenttemplate >
13 </ ASP: updatepanel >
14 </ Contenttemplate >
15 </ C0: tabpanel >
16 < C0: tabpanel ID = "Tabpanel2" Runat = "Server" Headertext = "E-mail" >
17 < Contenttemplate >
18 < ASP: Label ID = "Label3" Runat = "Server" Text = "Email" > </ ASP: Label >
19 < ASP: textbox ID = "Textbox1" Runat = "Server" > </ ASP: textbox > < BR /> < BR />
20 < ASP: button ID = "Button2" Runat = "Server" Text = "Button" Onclientclick = "Getemail"   />
21 </ Contenttemplate >
22 </ C0: tabpanel >
23 </ C0: tabcontainer >

Attribute description:

Onclientactivetabchanged: The Event script executed when the client changes the currently activated tab.
Headertext: The title content of each tab in tabcontainer.

3) Add the activetabchanged event function on the page for display.

The Code is as follows:

1 Function Activetabchanged (sender, eventargs)
2 {
3 VaR Currenttab = $ Get ('currenttab ');
4 Currenttab. innerhtml = " The tab you selected is "   + Sender. get_activetab (). get_headertext ();
5 }

4) drag and drop a label under tabcontainer and name it currenttab. Displays the currently active tab.

The Code is as follows:<ASP: LabelID= "Currenttab"Runat= "Server"Text= ""> </ASP: Label>

4) press Ctrl + F5 to view the effect in the browser.

As follows: