AJAX Toolkit(3)--Tabs

xml 代码

 

1. <ajaxToolkit:TabContainer ID="TabContainer1" runat="server"   
2.            OnClientActiveTabChanged="ClientFunction"   
3.            Height="150px"> <!--Clientfunction 是客户端处理程序，需要用javascript写 --> 
4.            <ajaxToolkit:TabPanel ID="TabPanel1" runat="server"   
5.            HeaderText="Signature and Bio">  
6.            <ContentTemplate>  
7.                1123  
8.            </ContentTemplate>  
9.            </ajaxToolkit:TabPanel>  
10.            <ajaxToolkit:TabPanel ID="TabPanel2" runat="server"   
11.            HeaderText="abc">  
12.            <ContentTemplate>  
13.                1123  
14.            </ContentTemplate>  
15.            </ajaxToolkit:TabPanel>  
16.              
17.        </ajaxToolkit:TabContainer>  
18.        <asp:Label ID="msg" Text=""  runat="server"/>  

客户端处理程序

js 代码

 

1. <script type="text/javascript">  
2.         function ClientFunction(sender, e){  
3.             var mlabel =  $get('<%=msg.ClientID%>'); 
   
4.             //取得客户端控件
   
5.             mlabel.innerHTML = sender.get_activeTab().get_headerText();
   
6.             // 当前标题，放到相应控件上去
   
7.             alert(sender.get_activeTab().get_headerText());  
8.               
9.         }  
10.     </script>  

注意，客户端因为有了<%%>之间的代码，所以，必须要放到有runat="server"的标签之内。
<ajaxToolkit:TabPannel>可以有多个。
运行结果：