1.       Introduction:

Tab本身就应该是个以页签形式显示组织网页内容的一个控件。在AJAX Control Tool Kit的控件中有TabContainer控件,它是一些TabPanel控件的载体,而每个TabPanel可以像标准的Panel控件一样,成为其它一些ASP.NET控件的容器。TabPanel通过它的三部分结构HeaderText, HeaderTemplate和ContentTemplate属性来指定它的内容。

TabContainer控件具有保持当前页面状态的能力。当页面发生刷新后,最新被选中的Tab将被保持其选中的状态;此外每个Tab的可操作属性页可以保持。

2.       Properties:

  <ajaxToolkit:TabContainer runat="server" 
        OnClientActiveTabChanged="ClientFunction" 
        Height="150px">
    <ajaxToolkit:TabPanel runat="server" 
        HeaderText="Signature and Bio"
        <ContentTemplate>
            ...
        </ContentTemplate>
    />
</ajaxToolkit:TabContainer>

上面就是TabContainer的结构,它分为两大部分,TabContainer的属性部分和TabPanel属性部分。

TabContainer属性:

a.       ActiveTabChanged(Event): 当选中的Tab被改变的时候触发的事件(服务器端事件)。

b.       OnClientActiveTabChanged: 当选中的Tab改变时触发的客户端脚本事件。

c.       CssClass - 被用于定义其客户表现的 Css Class 样式，它具有默认的 Tab 主题样式，但是也可以根据实际需要进行修改

d.       ActiveTabIndex - 初始化被设置为选中的 Tab

e.       Height - 其中 Tab 的高度(不包括其标题栏)

f.        Width - 其中 Tab 的宽度

g.       ScrollBars - 是否显示滚动条，可以设置为、None、Horizontal、Vertical、Both 或者 Auto

TabPanel属性:

a.       Enabled - 是否显示该 Tab 页，该属性可以在客户端脚本中改变

b.       OnClientClick - 当被点击时触发的客户端脚本事件名称

c.       HeaderText - Tab 标题

d.       HeaderTemplate - 一个 TemplateInstance.Single ITemplate 用来其定义标题

e.       ContentTemplate - 一个 TemplateInstance.Single ITemplate 用来其定义内容

特别需要注意的是CssClass可以设定为你自定义格式的CSS，假如你的CssClass为Customer,需要自定义的Css属性有以下这些:

Tabs Css classes

·                  .ajax__tab_header: A container element that wraps all of the tabs at the top of the TabContainer. Child CSS classes:.ajax__tab_outer.

·                  .ajax__tab_outer: An outer element of a tab, often used to set the left-side background image of the tab.Child CSS classes: .ajax__tab_inner.

·                  .ajax__tab_inner: An inner element of a tab, often used to set the right-side image of the tab. Child CSS classes:.ajax__tab_tab.

·                  .ajax__tab_tab: An element of the tab that contains the text content. Child CSS classes:none.

·                  .ajax__tab_body: A container element that wraps the area where a TabPanel is displayed. Child CSS classes: none.

·                  .ajax__tab_hover . This is applied to a tab when the mouse is hovering over. Child CSS classes:.ajax__tab_outer.

·                  .ajax__tab_active: This is applied to a tab when it is the currently selected tab. Child CSS classes:.ajax__tab_outer.

那么自定义的header的Css就叫做； Customer.ajax_tab_header{…}/

在下面的例子中将会介绍几个自定义的Css样式。

3.       Example:

和以前每个控件一样,我们需要先建立一个ajaxtoolkit模版:

第一步: 创建一个ajaxtoolkit模板:

起个项目名字叫做AjaxControlToolKit_Tab。

第二步: 编辑default.aspx页面,

首先需要在form的scriptmanager下方拖入一个TabContainer控件,然后设置它的属性:

可以看出来每个tabcontainer中需要有tabpanel Panel的属性中设置headertext,也就是这个tab的名字,然后每个panel中需要ContentTemplate来显示内容,随便填写点显示的内容。

然后再添加几个tabpanel, 下面的每个tabpanel的内容这里可以拷贝上面的内容。

因为我这里设置了CssClass属性,所以控件会重载这个Css而不是用默认的那个Css样式。

第三步:我们需要创建一个Css文件来存放自定义的tab样式。

右键project,点击’Add New Item’,创建一个叫做stylee.css文件, 然后在default.aspx文件的<Head>节点部分加上

<link rel="stylesheet" type="text/css" href="stylesheet.css" />

这里附上用到的Css样式:

/* ajax__tab_ie-theme theme */

.ajax__tab_ie-theme .ajax__tab_header

{

padding-left:5px;

}

.ajax__tab_ie-theme .ajax__tab_header .ajax__tab_tab

{

margin-right:0px;

background:url(img/ie/tab_unselected.gif);

width:116px;

padding:9px 0px 3px 0px;

text-align:center;

color:#006699;

font-family:verdana;

font-size:13px;

display:block;

}

.ajax__tab_ie-theme .ajax__tab_active .ajax__tab_tab

{

padding:6px 0px 3px 0px;

background:url(img/ie/tab_selected.gif);

}

.ajax__tab_ie-theme .ajax__tab_body

{

background:url(img/ie/ie_tabbacker_720x296.jpg) no-repeat;

font-size:13px;

font-family:verdana;

height:296px;

width:716px;

}

.ajax__tab_ie-theme .ajax__tab_body div

{

padding:8px;

}

第四步:向工程天添加用到的图片:创建一个img文件夹, 然后加入图片,用到的图片在后面提供的代码链接里可以下载.

4.       代码下载:

http://dujingjing1230.download.csdn.net/

AjaxControlToolKit--TabContainer控件的介绍的更多相关文章

  1. iOS开发UI篇—UITableview控件简单介绍

    iOS开发UI篇—UITableview控件简单介绍 一.基本介绍 在众多移动应⽤用中,能看到各式各样的表格数据 . 在iOS中,要实现表格数据展示,最常用的做法就是使用UITableView,UIT ...

  2. iOS开发UI篇—Date Picker和UITool Bar控件简单介绍

    iOS开发UI篇—Date Picker和UITool Bar控件简单介绍 一.Date Picker控件 1.简单介绍: Date Picker显示时间的控件 有默认宽高,不用设置数据源和代理 如何 ...

  3. iOS开发基础-UITableView控件简单介绍

     UITableView 继承自 UIScrollView ,用于实现表格数据展示,支持垂直滚动.  UITableView 需要一个数据源来显示数据,并向数据源查询一共有多少行数据以及每一行显示什么 ...

  4. Tkinter 控件详细介绍

    Tkinter 控件详细介绍 1.Button 按钮.类似标签,但提供额外的功能,例如鼠标掠过.按下.释放以及键盘操作/事件 2.Canvas 画布.提供绘图功能(直线.椭圆.多边形.矩形) ;可以包 ...

  5. Swift UI控件详细介绍(上）

    UI控件 首先介绍一下AppDelegate.swift@UIApplicationMain 调用了OC中的UIApplicationMain函数:UIApplicationMain是iOS应用程序的 ...

  6. Android 中常见控件的介绍和使用

    1 TextView文本框 1.1 TextView类的结构 TextView 是用于显示字符串的组件,对于用户来说就是屏幕中一块用于显示文本的区域.TextView类的层次关系如下: java.la ...

  7. Android Support Library控件详细介绍之RecyclerView

    RecyclerView控件 依赖  compile 'com.android.support:recyclerview-v7:24.1.1'RecyclerView也是容器控件,大多数的效果显示可通 ...

  8. WPF自学入门（六）WPF带标题的内容控件简单介绍

    在WPF自学入门(二)WPF-XAML布局控件的文章中分别介绍StackPanel,WarpPanel,DockPanel,Grid,Canvas五种布局容器的使用,可以让我们大致了解容器可以使用在什 ...

  9. Python:GUI之tkinter学习笔记1控件的介绍及使用

    相关内容: tkinter的使用 1.模块的导入 2.使用 3.控件介绍 Tk Button Label Frame Toplevel Menu Menubutton Canvas Entry Mes ...

随机推荐

  1. paip.字符串操作uapi java php python总结..

    paip.字符串操作uapi java php python总结.. java and php 相互转换.. import strUtil>>>  requiry(strUtil.p ...

  2. 盘点mysql中容易被我们误会的地方

    引语:mysql作为数据库的一大主力军,到处存在于我们各种系统中,相信大家都不陌生!但是,你知道你能用不代表你知道细节,那我们就来盘点盘点其中一些我们平时不太注意的地方,一来为了有趣,二来为了不让自己 ...

  3. python爬虫抓取数据

    URL管理器实现方式:1. 内存python内存待爬取URL集合:set()已爬取URL集合:set() 2. 关系数据库MySQLurls(url, is_crawled) 3. 缓存数据库(高性能 ...

  4. ubuntu下安装 infer

    sudo apt-get updatesudo apt-get upgradesudo apt-get install git openjdk-7-jdk m4 zlib1g-dev python-s ...

  5. 于网站主机，DNS，域名解析，Web服务器关系详解

    /*本文将介绍网站主机,DNS,域名解析,Web服务器关系,转载请保留以下版权*/ /*启明星工作室 www.dotnetcms.org  提供会议室预定系统,请假系统,helpdesk,工作日志系统 ...

  6. ie8下jquery改变PNG的opacity出现黑边,ie6下png透明解决办法

    目前互联网对于网页效果要求越来越高,不可避免的用到PNG图片,PNG分为几种格 式,PNG8 PNG24 PNG32,其中最常用的,也是显示效果和大小比较适中的则是PNG24,支持半透明,透明,颜色也 ...

  7. 【Vegas原创】RHEL6.2安装vmtools

    1,mount虚拟cdrom       # mount /dev/cdrom /mnt/cdrom   2, ls一下,看有没有      # cd /mnt/cdrom     # ls –l   ...

  8. [Aaronyang] 写给自己的WPF4.5 笔记21 [3d课 2/4]

    1. 当然复杂的3d模型我们是可以通过更专业的工具做出来,然后导入项目中,我们只是方便演示,选择简单的图形. Tip: 关于摄像机的NearPlaneDistance和FarPlaneDistance ...

  9. quick -- 添加按钮

    cc.ui.UIPushButton.new({ normal = "comm_btnGreenBackBack.png", pressed = "comm_btnGre ...

  10. Scala 深入浅出实战经典 第81讲：Scala中List的构造是的类型约束逆变、协变、下界详解

    王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-97讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...