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 python php java c#

    paip.判断文件是否存在uapi python php java c# ==========uapi file_exists exists() 面向对象风格:  File.Exists 作者: 老哇 ...

  2. IOS—静态方法(类方法)和实例方法

    1.实例方法/动态方法 a).标识符:- b).调用方式:(实例对象    函数) c).实例方法在堆栈上. 2.静态方法/类方法 a).标识符:+ b).调用方式:(类    函数) c).静态方法 ...

  3. ArrayList/Vector的原理、线程安全和迭代Fail-Fast

    疑问 * ArrayList是非线程非安全的,具体是指什么?具体会产生什么问题?* ArrayList的内部原理是什么?为什么可以动态扩容?* Vector是线程安全的,具体是如何实现的?为什么不再推 ...

  4. POI 设置EXCEL单元格格式（日期数字文本等）

    HSSFCellStyle style0 = workbook2003.createCellStyle(); style0.setBorderBottom(HSSFCellStyle.BORDER_T ...

  5. 使用LS2J技术在LotusScript中使用Java

    我们可以使用LS2J技术在LotusScript中来调用Java类,下面举例说明: 1.       首先需要在代理的 (Options)部分,添加如下: Uselsx "*javacon& ...

  6. Web开发人员常犯的10个错误

    说到开发一个运行在现代网络中的网站:Web开发人员需要选择虚拟主机平台和底层数据存储,准备编写HTML.CSS和JavaScript用的工具,要有设计执行方式,以及一些可用的JavaScript库/框 ...

  7. Scala 深入浅出实战经典 第60讲：Scala中隐式参数实战详解以及在Spark中的应用源码解析

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

  8. Zone.js 简介 & 抛砖引玉

    Zone.js是angular团队参照NodeJS的Domain,Dart的Zone,为angular 2开发的核心组件. 一开始,我对Zone.js是拒绝的.我们知道类似的 Domain 模块,主要 ...

  9. Azure SoftEther VPN

    装个vs2015,想装全组建还得爬墙… 曾经的 Azure OpenVPN 项目 (http://azure-openvpn.github.io/) 好几年木有更新 改用 SoftEther VPN ...

  10. 关于execel单元格中的数字变成文本（左上角带绿色三角形标志）的办法

    对于很多软件,需要将数字变成文本,才能导入到该系统当中.在excel当中,如果数字是以文本的形式存储,在左上角是带有绿色的三角形标志的.如果对于大批量数据,操作方法如下:1将目标列数据copy到记事本 ...