AjaxControlToolkit学习笔记--TabContainer

Tabs控件其实是一个容器控件TabContainer和面板控件TabPanel。TabContainer控件用于包含TabPanel。TabPanel控件用于显示。

下面来看一个示例：

1)在VS2005中新建一个ASP.NET AJAX-Enabled Web Project项目工程，命名为Tabs。

2)在Default.aspx页面上添加一个TabContainer控件，同时在该容器控件中添加两个TabPanel。分别命名为TabPanel1和TabPanel2，同时设置HeaderText为QQ和Msn,电影,音乐。

<cc1:tabcontainer id="TabContainer1" runat="server" activetabindex="0" OnClientActiveTabChanged="ActiveTabChanged" OnActiveTabChanged="TabContainer1_ActiveTabChanged"><cc1:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel1"><ContentTemplate>
AjaxControlToolkit学习笔记--TabContainer

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
AjaxControlToolkit学习笔记--TabContainer

<ContentTemplate>
AjaxControlToolkit学习笔记--TabContainer

QQ:<asp:TextBox id="TextBox1" runat="server"></asp:TextBox>
AjaxControlToolkit学习笔记--TabContainer

pwd<asp:TextBox id="TextBox2" runat="server"></asp:TextBox> 
AjaxControlToolkit学习笔记--TabContainer

<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
AjaxControlToolkit学习笔记--TabContainer

<asp:Label ID="Label1" runat="server" Text="Label" Width="153px"></asp:Label> 
AjaxControlToolkit学习笔记--TabContainer

<asp:Label ID="Label2" runat="server" Text="Label" Width="189px"></asp:Label>
AjaxControlToolkit学习笔记--TabContainer

</ContentTemplate>
AjaxControlToolkit学习笔记--TabContainer

</asp:UpdatePanel>
AjaxControlToolkit学习笔记--TabContainer

</ContentTemplate>
AjaxControlToolkit学习笔记--TabContainer

<HeaderTemplate>
AjaxControlToolkit学习笔记--TabContainer

</HeaderTemplate>
AjaxControlToolkit学习笔记--TabContainer

</cc1:TabPanel>
AjaxControlToolkit学习笔记--TabContainer

<cc1:TabPanel runat="server" HeaderText="TabPanel2" ID="TabPanel2"><ContentTemplate>
AjaxControlToolkit学习笔记--TabContainer

msn:<asp:TextBox id="TextBox3" runat="server"></asp:TextBox> pwd<asp:TextBox id="TextBox4" runat="server"></asp:TextBox>
AjaxControlToolkit学习笔记--TabContainer

</ContentTemplate>
AjaxControlToolkit学习笔记--TabContainer

<HeaderTemplate>
AjaxControlToolkit学习笔记--TabContainer

MSN

</HeaderTemplate>
AjaxControlToolkit学习笔记--TabContainer

</cc1:TabPanel>
AjaxControlToolkit学习笔记--TabContainer

<cc1:TabPanel runat="server" HeaderText="TabPanel3" ID="TabPanel3"><ContentTemplate>
AjaxControlToolkit学习笔记--TabContainer

你最喜欢什么电影

</ContentTemplate>
AjaxControlToolkit学习笔记--TabContainer

<HeaderTemplate>
AjaxControlToolkit学习笔记--TabContainer

电影

</HeaderTemplate>
AjaxControlToolkit学习笔记--TabContainer

</cc1:TabPanel>
AjaxControlToolkit学习笔记--TabContainer

<cc1:TabPanel runat="server" HeaderText="TabPanel4" ID="TabPanel4"><ContentTemplate>
AjaxControlToolkit学习笔记--TabContainer

你最喜欢什么音乐

</ContentTemplate>
AjaxControlToolkit学习笔记--TabContainer

<HeaderTemplate>
AjaxControlToolkit学习笔记--TabContainer

音乐

</HeaderTemplate>
AjaxControlToolkit学习笔记--TabContainer

</cc1:TabPanel>
AjaxControlToolkit学习笔记--TabContainer

</cc1:tabcontainer>

属性说明：
OnClientActiveTabChanged：在客户端对当前激活的Tab进行改变时执行的事件脚本。
HeaderText：在TabContainer中的每个Tab的标题内容。

sender.get_activeTab().get_headerText();

30在页面上添加ActiveTabChanged事件函数，用于显示。
这个函数是写在aspx页面的,用于绑定 OnClientActiveTabChanged

4)在TabContainer下面拖放一个Label，命名为lblMsg。用于显示当前激活的Tab。
代码如下:

<asp:Label ID="lblMsg" runat="server" Text="Label"></asp:Label>

效果如下:

整体代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Tab.aspx.cs" Inherits="YDZC.AjaxControlToolkit.Tab" %>
AjaxControlToolkit学习笔记--TabContainer

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
AjaxControlToolkit学习笔记--TabContainer

Namespace="System.Web.UI" TagPrefix="asp" %>
AjaxControlToolkit学习笔记--TabContainer

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
AjaxControlToolkit学习笔记--TabContainer

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
AjaxControlToolkit学习笔记--TabContainer

<html xmlns="http://www.w3.org/1999/xhtml" >
AjaxControlToolkit学习笔记--TabContainer