AjaxControlToolkit学习笔记--TabContainer
2007-10-22 16:22
309 查看
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的标题内容。
<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>
// 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();
// }
</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>
</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的标题内容。
<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>
// 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();
// }
</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>
</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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- AjaxControlToolkit学习笔记
- AjaxControlToolkit学习笔记之ModalPopupExtender
- AjaxControltoolkit学习Calendar之我见
- AJAX ControlToolkit学习日志-DropShadowExtender(10)
- AJAX ControlToolkit学习日志-MaskedEditExtender和MaskedEditValidator(15)
- AJAX ControlToolkit学习日志-MutuallyExclusiveCheckBoxExtender(17)
- AJAX ControlToolkit学习日志-Tabs(27)
- AJAX ControlToolkit学习日志-ValidatorCalloutExtender(31)
- AjaxControlToolkit学习系列(1) DragPanelExtender
- AjaxControlToolkit学习系列(2) AlwaysVisibleControlExtender
- AjaxControlToolkit中，TabContainer的一个简单Css样式
- SharePoint And Ajax Technology（2）：Ajax Control Toolkit学习
- AJAX ControlToolkit学习日志-DynamicPopulate(11)
- AJAX ControlToolkit学习日志-NumericUpDownExtender(18)
- AJAX ControlToolkit学习日志-PopupControlExtender(21)
- （学习Asp.net Ajax笔记四）Ajax Control Toolkit的AutoComplete功能
- AjaxControlToolkit中，TabContainer的一个简单Css样式
- AjaxToolKit学习笔记 之 TextBoxWatermark
- AjaxControlToolkit——TabContainer 样式修改