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>
????????????<asp:UpdatePanel?ID="UpdatePanel1"?runat="server">
????????????????<ContentTemplate>
QQ:<asp:TextBox?id="TextBox1"?runat="server"></asp:TextBox>?
????????????????????<br?/>
????????????????????pwd<asp:TextBox?id="TextBox2"?runat="server"></asp:TextBox><br?/>
????????????????????&nbsp;<asp:Button?ID="Button1"?runat="server"?OnClick="Button1_Click"?Text="Button"?/>
????????<asp:Label?ID="Label1"?runat="server"?Text="Label"?Width="153px"></asp:Label><br?/>
????????<asp:Label?ID="Label2"?runat="server"?Text="Label"?Width="189px"></asp:Label>
????????????????</ContentTemplate>
????????????</asp:UpdatePanel>
????????????<BR?/>
</ContentTemplate>
<HeaderTemplate>
QQ
</HeaderTemplate>
</cc1:TabPanel>
<cc1:TabPanel?runat="server"?HeaderText="TabPanel2"?ID="TabPanel2"><ContentTemplate>
msn:<asp:TextBox?id="TextBox3"?runat="server"></asp:TextBox>?<BR?/>pwd<asp:TextBox?id="TextBox4"?runat="server"></asp:TextBox>?
</ContentTemplate>
<HeaderTemplate>
MSN
</HeaderTemplate>
</cc1:TabPanel>
<cc1:TabPanel?runat="server"?HeaderText="TabPanel3"?ID="TabPanel3"><ContentTemplate>
你最喜歡什么電影
</ContentTemplate>
<HeaderTemplate>
電影
</HeaderTemplate>
</cc1:TabPanel>
<cc1:TabPanel?runat="server"?HeaderText="TabPanel4"?ID="TabPanel4"><ContentTemplate>
你最喜歡什么音樂
</ContentTemplate>
<HeaderTemplate>
音樂
</HeaderTemplate>
</cc1:TabPanel>
</cc1:tabcontainer><br?/>
屬性說明：
?????????OnClientActiveTabChanged：在客戶端對當前激活的Tab進行改變時執行的事件腳本。
?????????HeaderText：在TabContainer中的每個Tab的標題內容。
?function?ActiveTabChanged(sender,?e)?{
???????????var?CurrentTab?=?$get('<%=lblMsg.ClientID%>');//lblmsg這個是lable的控件id,lable在ie狀態下就是<span>的形式表現的.
??????????lblMsg.innerHTML?=?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"?%>

<%@?Register?Assembly="System.Web.Extensions,?Version=1.0.61025.0,?Culture=neutral,?PublicKeyToken=31bf3856ad364e35"
????Namespace="System.Web.UI"?TagPrefix="asp"?%>
<%@?Register?Assembly="AjaxControlToolkit"?Namespace="AjaxControlToolkit"?TagPrefix="cc1"?%>

<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html?xmlns="http://www.w3.org/1999/xhtml"?>

?<script?language?=javascript>
?
??
?function?ActiveTabChanged(sender,?e)?{
???????????var?CurrentTab?=?$get('<%=lblMsg.ClientID%>');//lblmsg這個是lable的控件id,lable在ie狀態下就是<span>的形式表現的.
??????????lblMsg.innerHTML?=?sender.get_activeTab().get_headerText();
//??????????Highlight(lblMsg);
????????}
????????
//?????????var?HighlightAnimations?=?{};
//????????function?Highlight(el)?{
//????????????if?(HighlightAnimations[el.uniqueID]?==?null)?{
//????????????????HighlightAnimations[el.uniqueID]?=?AjaxControlToolkit.Animation.createAnimation({
//????????????????????AnimationName?:?"color",
//????????????????????duration?:?0.5,
//????????????????????property?:?"style",
//????????????????????propertyKey?:?"backgroundColor",
//????????????????????startValue?:?"#FFFF90",
//????????????????????endValue?:?"#FFFFFF"
//????????????????},?el);
//????????????}
//????????????HighlightAnimations[el.uniqueID].stop();
//????????????HighlightAnimations[el.uniqueID].play();
//????????}
???function?ToggleHidden(value)?{
????????????$find('<%=TabContainer1.ClientID%>').get_tabs()[3].set_enabled(value);
????????}
????????
????????</script>

<head?id="Head1"?runat="server">
????<title>無標題頁</title>
</head>
<body>
????<form?id="form1"?runat="server">
????<div>
????????<asp:ScriptManager?id="ScriptManager1"?runat="server">
????????</asp:ScriptManager>
????
????</div>
????????<cc1:tabcontainer?id="TabContainer1"?runat="server"?activetabindex="0"?OnClientActiveTabChanged="ActiveTabChanged"?OnActiveTabChanged="TabContainer1_ActiveTabChanged"><cc1:TabPanel?runat="server"?HeaderText="TabPanel1"?ID="TabPanel1"><ContentTemplate>
????????????<asp:UpdatePanel?ID="UpdatePanel1"?runat="server">
????????????????<ContentTemplate>
QQ:<asp:TextBox?id="TextBox1"?runat="server"></asp:TextBox>?
????????????????????<br?/>
????????????????????pwd<asp:TextBox?id="TextBox2"?runat="server"></asp:TextBox><br?/>
????????????????????&nbsp;<asp:Button?ID="Button1"?runat="server"?OnClick="Button1_Click"?Text="Button"?/>
????????<asp:Label?ID="Label1"?runat="server"?Text="Label"?Width="153px"></asp:Label><br?/>
????????<asp:Label?ID="Label2"?runat="server"?Text="Label"?Width="189px"></asp:Label>
????????????????</ContentTemplate>
????????????</asp:UpdatePanel>
????????????<BR?/>
</ContentTemplate>
<HeaderTemplate>
QQ
</HeaderTemplate>
</cc1:TabPanel>
<cc1:TabPanel?runat="server"?HeaderText="TabPanel2"?ID="TabPanel2"><ContentTemplate>
msn:<asp:TextBox?id="TextBox3"?runat="server"></asp:TextBox>?<BR?/>pwd<asp:TextBox?id="TextBox4"?runat="server"></asp:TextBox>?
</ContentTemplate>
<HeaderTemplate>
MSN
</HeaderTemplate>
</cc1:TabPanel>
<cc1:TabPanel?runat="server"?HeaderText="TabPanel3"?ID="TabPanel3"><ContentTemplate>
你最喜歡什么電影
</ContentTemplate>
<HeaderTemplate>
電影
</HeaderTemplate>
</cc1:TabPanel>
<cc1:TabPanel?runat="server"?HeaderText="TabPanel4"?ID="TabPanel4"><ContentTemplate>
你最喜歡什么音樂
</ContentTemplate>
<HeaderTemplate>
音樂
</HeaderTemplate>
</cc1:TabPanel>
</cc1:tabcontainer><br?/>
????????<asp:Label?ID="lblMsg"?runat="server"?Text="Label"></asp:Label>
????????<br?/>
????????<asp:Label?ID="lblSer"?runat="server"?Text="Label"?Width="200px"></asp:Label>
????????<br?/>
????????<asp:CheckBox?ID="ckBoxClose"?runat="server"?onclick="ToggleHidden(this.checked)"?Text="隱藏最后一項"/>
????</form>
</body>
</html>
本文轉自http://www.cnblogs.com/86188281/archive/2008/01/30/933327.html

轉載于:https://www.cnblogs.com/bensoncn/archive/2009/09/14/1566287.html

總結

以上是生活随笔為你收集整理的[转帖]AjaxControlToolkit.TabContainer 自定义样式续的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。