asp.net AjaxControlToolKit--TabContainer控件的介绍

 
AjaxControlToolKit--TabContainer控件的介绍收藏

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. 代码下载:
打包下载

赞 (0)

相关推荐

  • asp.net 打印控件使用方法

    asp.net 打印控件使用方法

    打印的效果及控制性虽然不是很好,但是也能勉强使用,应付一般的打印还是 可以的了.代码如下所示: 代码 复制代码 代码如下: //调用PrintControl.ExecWB(?,?)实现直接打印和打印预览功能.(直接用系统提供的print()方法打印无法隐藏某些区域) //preview:是否显示预览.null/false:不显示,true:显示 function printPage(preview) { try { var content=window.document.body.innerHT

  • asp.net fileupload控件上传文件与多文件上传

    1.前台文件 Default.aspx: <%@ Page Language="C#" AutoEventWireup="true"CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.

  • 使用VS2010 C#开发ActiveX控件（上）

    使用VS2010 C#开发ActiveX控件（上）

    要开发Web版的读卡程序,大体思路如下: 1.       使用C#对原始的Dll进行封装,这里要封装两部分内容,一部分是串口通信的功能,一部分是对卡读写的功能. 2.       开发ActiveX控件调用封装后的Dll,使用串口通信来对卡进行读写. 3.       打包并发布ActiveX控件. 4.  使用ActiveX控件. 思路1中封装代码有2个类SerialInterfaceHelper,串口通信的帮助类,MifareOneHelper,M1卡的读写帮助类,我们放在了项目CardR

  • Asp.net 菜单控件简洁版

    Asp.net 菜单控件简洁版

    本文介绍的菜单控件采用的css 和ul list来显示菜单,生成的html小,无需javascript支持,对大部分的浏览器都支持,除ie6要单独修改css也可以使其支持. 通过本文可以了解asp.net 控件的开发,及Composite设计模式的实际运用. 采用Composite设计模式设计菜单类: MenuCompositeitem类 复制代码 代码如下: namespace Ruinet.Controls { [Serializable()] public class MenuCompos

  • VS2010/MFC编程（常用控件：树形控件Tree Control控件创建h和实例）

    VS2010/MFC编程（常用控件：树形控件Tree Control控件创建h和实例）

    前面一节讲了树形控件Tree Control的简介.通知消息以及相关数据结构,本节继续讲下半部分,包括树形控件的创建.CTreeCtrl类的主要成员函数和应用实例. 树形控件的创建 MFC为树形控件提供了CTreeCtrl类,它封装了树形控件的所有操作. 树形控件的创建也是有两种方式,一种是在对话框模板中直接拖入Tree Control控件创建,另一种就是通过CTreeCtrl类的Create成员函数创建.下面主要讲后者. CTreeCtrl类的Create成员函数的原型如下: virtual

  • VS2010中呈现控件时出错的解决方法

    在制作控件的时候容易遇到"呈现控件时出错""发生了未处理的异常.未将对象引用设置到对象的实例."这样的错误,如下图:(也有可能仅仅只是因为未设置runat="server"标签而导致该错误,请先检查该项.) 但是在编译时/运行时也都是没有错误的. 分析 如图所示的情况我们称之为"设计时"以区别于"编译时"/"运行时". 设计时:在ASP.NET环境中也就是当我们在Visual Studi

  • ASP.NET单选按钮控件RadioButton常用属性和方法介绍

    1.常用属性: (1)Checked属性:用来设置或返回单选按钮是否被选中,选中时值为true,没有选中时值为false. (2)AutoCheck 属性:如果 AutoCheck 属性被设置为 true(默认),那么当选择该单选按钮时,将自动清除该组中所有其他单选按钮.对一般用户来说,不需改变该属性,采用默认值(true)即可. (3)Appearance 属性:用来获取或设置单选按钮控件的外观.当其取值为 Appearance.Button 时,将使单选按钮的外观像命令按钮一样:当选定它时,

  • asp.net+jquery滚动滚动条加载数据的下拉控件

    asp.net+jquery滚动滚动条加载数据的下拉控件

    这样的需求貌似自己感觉不是很合理,因为数据多了如此下拉无论从人还是机器操作都比较痛苦. 没办法由于需求下来了,只能按需求操作.网上找了很多相关控件都感觉有点庞大,占资源比较多.没办法自己花半天时间弄出个半成品自定义控件,拿出来分享下,如有高手看了请多指点. 需求:AJAX滚动滚动条加载数据的下拉列表 控件名称:Webcombo 所用技术:ASP.NET(C#),jQuery,ASP.NET一般处理文件(.ashx) 下拉列表具体实现:用DIV模拟下拉列表,input和图片模拟下拉框.最终结果如下

  • asp.net GridView控件中模板列CheckBox全选、反选、取消

    asp.net GridView控件中模板列CheckBox全选、反选、取消

    复制代码 代码如下: using System; using System.Data; using System.Data.SqlClient; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebC

  • 使用VS2010 C#开发ActiveX控件(下),完整代码打包下载

    使用VS2010 C#开发ActiveX控件(下),完整代码打包下载

    其实如果我们不进行设置,只是修改了代码,运行程序以后,其出错界面如下图1所示: 图1 抛出异常如下: ************** Exception Text ************** System.MethodAccessException: Attempt by security transparent method 'Rare.Card.Libary.Controls. ReadCardControl.btnRead_Click(System.Object, System.Event

随机推荐