下面来看一个示例:
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 />
< 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 >
</ 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();
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 >
<% @ 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 >
</ 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 >