轻松掌握Ajax.net系列教程十二：使用TabContainer&TabPanel

文本Tag：  微软  sql

【IT168技术文档】


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

  第一步：建立Ajax Control Toolkit Website 

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

 
 

  
  <
  
  ajaxToolkit:TabContainer 
  
  ID
  
  ="TabContainer1"
  
   runat
  
  ="server"
  
  >
  
  

  
  <
  
  ajaxToolkit:TabPanel 
  
  ID
  
  ="TabPanel1"
  
   runat
  
  ="server"
  
   HeaderText
  
  ="标签一"
  
  >
  
  

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

  
  </
  
  ajaxToolkit:TabPanel
  
  >
  
  

  
  <
  
  ajaxToolkit:TabPanel 
  
  ID
  
  ="TabPanel2"
  
   runat
  
  ="server"
  
   HeaderText
  
  ="标签二"
  
  >
  
  

  
  <
  
  HeaderTemplate
  
  ><
  
  span 
  
  style
  
  ="font-size:12px;color:Red;font-weight:bold"
  
  >
  
  支持HTML的标签二
  
  </
  
  span
  
  ></
  
  HeaderTemplate
  
  >
  
  

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

  
  </
  
  ajaxToolkit:TabPanel
  
  >
  
  

  
  <
  
  ajaxToolkit:TabPanel 
  
  ID
  
  ="TabPanel3"
  
   runat
  
  ="server"
  
   HeaderText
  
  ="标签三"
  
  >
  
  

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

  
  </
  
  ajaxToolkit:TabPanel
  
  >
  
  

  
  </
  
  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之间的通讯问题等，有机会我也会作相关研究，和大家一起学习。