轻松Ajax.net实例教程12_TabContainer和TabPanel(按AjaxControlToolkit字母排序)

原文:http://www.falaosao.net/article.asp?id=143

本章介绍TabContainer和TabPanel的使用方法，这两个是一套组件，两者结合使用，使用方法非常十分相当简单，我在这里简单演示一下。

第一步：建立Ajax Control Toolkit Website

这个例子我们只需要TabContainer和TabPanel组件，不需要其他控件。具体代码如下：

[align=left]<ajaxToolkit:TabContainer ID="TabContainer1" runat="server">[/align]
[align=left] <ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="标签一">[/align]
[align=left] <ContentTemplate>一大段内容A...<br />[/align]
[align=left] 一大段内容A...<br />[/align]
[align=left] 一大段内容A...<br />[/align]
[align=left] 一大段内容A...<br />[/align]
[align=left] 一大段内容A...<br /></ContentTemplate>[/align]
[align=left] </ajaxToolkit:TabPanel>[/align]
[align=left] <ajaxToolkit:TabPanel ID="TabPanel2" runat="server" HeaderText="标签二">[/align]
[align=left] <HeaderTemplate><span style="font-size:12px;color:Red;font-weight:bold">支持HTML的标签二</span></HeaderTemplate>[/align]
[align=left] <ContentTemplate>一大段内容B...<br />[/align]
[align=left] 一大段内容B...<br />[/align]
[align=left] 一大段内容B...<br />[/align]
[align=left] 一大段内容B...<br />[/align]
[align=left] 一大段内容B...<br /></ContentTemplate>[/align]
[align=left] </ajaxToolkit:TabPanel>[/align]
[align=left] <ajaxToolkit:TabPanel ID="TabPanel3" runat="server" HeaderText="标签三">[/align]
[align=left] <ContentTemplate>一大段内容C...<br />[/align]
[align=left] 一大段内容C...<br />[/align]
[align=left] 一大段内容C...<br />[/align]
[align=left] 一大段内容C...<br />[/align]
[align=left] 一大段内容C...<br /></ContentTemplate>[/align]
[align=left] </ajaxToolkit:TabPanel>[/align]
</ajaxToolkit:TabContainer>
注意：TabPanel2多了HeaderTemplate标签，它的作用是丰富简单的HeaderText。另外TabPanel标签中还有OnClientClick等属性，能支持Javascript，大家自己挖掘一下。

OK，运行看一下效果。



选择标签后即可切换内容



注意：成功运行后我们看一下该页面的源文件，发现有如下代码：

<div id="TabContainer1_body">

<div id="TabContainer1_TabPanel1">

一大段内容A...<br />

一大段内容A...<br />

一大段内容A...<br />

一大段内容A...<br />

一大段内容A...<br />

</div><div id="TabContainer1_TabPanel2" style="display:none;visibility:hidden;">

一大段内容B...<br />

一大段内容B...<br />

一大段内容B...<br />

一大段内容B...<br />

一大段内容B...<br />

</div><div id="TabContainer1_TabPanel3" style="display:none;visibility:hidden;">

一大段内容C...<br />

一大段内容C...<br />

一大段内容C...<br />

一大段内容C...<br />

一大段内容C...<br />

</div>

</div>

这证明了所有内容都已输出到客户端，只是使用了JS暂时隐藏起来，所以大家在使用TabContainer和TabPanel的时候一定要注意性能，避免同时输出过多内容到客户端。

结束：

本章介绍了TabContainer和TabPanel的使用方法，基础用法很简单，但还有很多深度用法需要大家自行去挖掘，包括TabPanel之间的通讯问题等，有机会我也会作相关研究，和大家一起学习。