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  />
                     & 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 >

转载于:https://www.cnblogs.com/86188281/archive/2007/10/22/933327.html