zoukankan      html  css  js  c++  java
  • 轻松Ajax.net实例教程12_TabContainer和TabPanel(按AjaxControlToolkit字母排序)

    原文:http://www.falaosao.net/article.asp?id=143
    本章介绍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之间的通讯问题等,有机会我也会作相关研究,和大家一起学习。

    出处: http://www.cnblogs.com/windy2008

  • 相关阅读:
    HTML中为何P标签内不可包含块元素?
    js判断鼠标位置是否在某个div中
    拒绝图片延迟加载,爽爽的看美图
    PHP为什么会被认为是草根语言?
    宜信开源微服务任务调度平台(SIA-TASK)
    JSBridge框架解决通信问题实现移动端跨平台开发
    如何运用多阶构建编写优雅的Dockerfile
    Sharding-JDBC 使用入门和基本配置
    程序员笔记|详解Eureka 缓存机制
    程序员笔记|常见的Spring异常分析及处理
  • 原文地址:https://www.cnblogs.com/windy2008/p/1219338.html
Copyright © 2011-2022 走看看