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>
<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 />
<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 />
<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>
下面来看一个示例：
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 /> <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 /> <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>
学习，积累中......
