tabcontainer控件太长_asp.net AjaxControlToolKit--TabContainer控件的介绍

ModalTopup控件允许用户以对话框模式显示ASP页面的一部分，同时限制用户与页面其他部分的交互。让成都搜索引擎优化技术频道的编辑带你通过ASP.NET的AJAXCONTROLTOLKIT-TABCANTAL控件的介绍。

ajaxcontroltoolkit-tab container控件介绍集合< br>

1。简介:

选项卡本身应该是一个以选项卡形式显示组织网页内容的控件在AJAX控件工具包控件中，有一个TabContainer控件，它是一些TabPanel控件的载体，每个TabPanel都可以成为其他ASP.NET控件的容器，如标准的Panel控件。选项卡面板通过其三部分结构、标题文本、标题模板和内容模板属性来指定其内容。

标签容器控件具有维护当前页面状态的能力当页面刷新时，新选择的选项卡将保持其选定状态。此外，可以维护每个选项卡的操作属性页< br>2。属性:

& ltAJaxtToolkit:TabContainer runat = " server " OnClientContactVitAbChanged = " ClientFunction " Height = " 150 px " & gt。&lt。AJaxtToolkit:TabPanel runat = "服务器" HeaderText= "签名和生物" & lt内容模板&gt。...&lt。/ContentTemplate&gt。/&gt。&lt。/AJaxtToolkit:TabContainer & gt。以上是tabcontainer的结构，分为两个部分，TabContainer属性部分和TabContainer属性部分。标签容器属性:< br>a .活动标签更改(事件):当选定的标签更改时触发的事件(服务器端事件)OnClientActiveTabChanged:当所选选项卡更改时触发的客户端脚本事件用于定义其客户的性能的Css类样式，它具有默认的标签主题样式。但是，也可以修改< br>d .活动选项卡索引-初始化选项卡< br>e .高度-选项卡高度(不包括其标题栏)< br>f .宽度-选项卡宽度< br>g .滚动条-是否根据实际需要显示滚动条。可以设置为“无”、“水平”、“垂直”、“两者”或“自动”选项卡属性:< br>a。启用-是否显示选项卡页面。此属性可以更改。OnClientClick-单击时触发的客户端脚本事件的名称。头下文本-选项卡标题< br>d .头下模板-模板实例。singleitemplate用于定义标题

e . ContentTemplate-模板实例。singleitemplate用于定义内容

特别重要的是，请注意，如果您的CSS类是客户，则需要自定义的Css属性包括以下内容:

选项卡Ajax _ _ tab _ header:一个容器元素，它将所有的选项卡包装在tabcontainer的顶部。..Ajax _ _ tab _ outer。

。ajax__tab_outer:选项卡的外部元素，通常用于设置选项卡的左侧背景图像。子CSS类:。ajax__tab_inner。

。ajax__tab_inner:选项卡的内部元素，通常用于设置选项卡的右侧图像。子CSS类:。ajax__tab_tab。

。包含文本内容的标签元素。子CSS类:无。

。ajax__tab_body:一个容器元素，用于包装显示选项卡面板的区域。子CSS类:无。

。ajax__tab_hover。当鼠标悬停在标签上时，这将应用于标签。子CSS类:。ajax__tab_outer。

。ajax _ _ tab _ active:当选项卡是当前选定的选项卡时，这将应用于该选项卡。Ajax _ _ tab _ outer。

然后调用自定义标题的Css顾客。Ajax _ tab _ header {…}/

在以下示例中将介绍几种自定义Css样式< br>3。示例:

就像前面的每个控件一样，我们需要首先创建一个ajaxtoolkit模板:

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

个名为AjaxControlToolKit_Tab的项目步骤2:编辑默认的. aspx页面。

首先需要在窗体的scriptmanager下拖动一个TabContainer控件。然后设置其属性:

。可以看出，每个选项卡容器都需要具有选项卡面板标题文本的属性，即该选项卡的名称。然后每个面板都需要内容模板来显示内容，并随机填充显示的内容。

然后添加几个选项卡。下面每个选项卡的内容可以复制到这里。

因为我在这里设置了CssClass属性，所以控件将重载这个Css，而不是使用默认的Css样式

步骤3:我们需要创建一个Css文件来存储自定义标签样式

右键单击项目，单击“添加新项目”，创建一个名为样式css的文件，然后单击“标题”。添加

& ltlink rel= "样式表" type="text/css" href= "样式表. css" /&gt。

这里附上了使用的Css样式:

/* Ajax _ _ tab _ ie-主题*/

。Ajax _ _ tab _ ie-主题。Ajax _ _ tab _ header

{

填充-左侧:5px< br>}

。Ajax _ _ tab _ ie-主题。ajax__tab_header。ajax__tab_tab

{

右边距:0px

背景:URL(img/ie/tab _ unselect . gif)；

宽度:116像素；

填充:9px 0px 3px 0px

文本对齐:居中；

颜色:# 006699；

字体系列:verdana

字号:13px

显示:块；< br>}

。Ajax _ _ tab _ ie-主题。ajax__tab_active。ajax__tab_tab

{

填充:6px 0px 3px 0px

背景:URL(img/ie/tab _ selected . gif)；< br>}

。Ajax _ _ tab _ ie-主题。ajax__tab_body

{

背景:URL(img/ie/ie _ tab baker _ 720 x296 . jpg)无重复；

字号:13px

字体系列:verdana

高度:296像素；

宽度:716像素；< br>}

。Ajax _ _ tab _ ie-主题。ajax__tab_body div

{

填充:8px< br>}

步骤4:将用过的图片添加到项目日:创建一个img文件夹，然后添加图片。使用过的图片可以在后面提供的代码链接中下载。< br>4。代码下载:

上面的包下载

介绍了ASP.NET的Ajax controltoolkit-tab container控件如果你想学习，你可以收集成都搜索引擎优化技术渠道，方便阅读。