ASP.NET AJaxcontroltoolkit-tab container控件简介

Ajax control toolkit-tab container控件1的简介集合。简介：选项卡本身应该是一个以选项卡形式显示组织网页内容的控件。AJAX控件工具包中有一个TabContainer控件，它是一些TabPanel控件的载体，每个TabPanel都可以像标准的Panel控件一样成为其他ASP.NET控件的容器。TabPanel通过其三部分结构指定其内容：HeaderText、HeaderTemplate和ContentTemplate。TabContainer控件能够保持当前的页面状态。当页面刷新时，新选择的选项卡将保持其选中状态；此外，还可以维护每个选项卡的可操作属性页。2.属性： Ajaxtoolkit : container runat=' server ' OnClientAttacvetAbchanged=' ClientFunction ' Height=' 150 px ' Ajaxtoolkit : TabPanel runat=' server '标头文本='签名和生物'内容模板./内容模板//Ajax toolkit 3360 TabContainer是TabContainer的结构，分为两部分，TabContainer的属性部分和TabPanel的属性部分。TabContainer属性：a。活动选项卡已更改(事件):是选定选项卡更改时触发的事件(服务器端事件)。b .当所选选项卡发生更改时，将触发OnClientAttacvetAbchanged d :客户端脚本事件。c . CssClass-用于定义其客户性能的Css Class样式，它具有默认的Tab主题样式。但是也可以根据实际需要进行修改。d . ActiveTabIndex-初始化设置为选定的选项卡e . Height-选项卡的高度(不包括其标题栏)。宽度——制表符的宽度。滚动条-是否显示滚动条，可以设置为，无，水平，垂直，两者或自动选项卡面板属性： a .启用-是否显示选项卡页面。该属性可以在客户端脚本中更改。b . OnClientClick-单击时触发的客户端脚本事件的名称。c . header text-选项卡标题d . header template-一个模板实例。singleitemplate用于定义标题e. ContentT。模板实例。singleitemplate用于定义其内容。需要注意的是，可以用自己的自定义格式将CssClass设置为CSS。如果你的CssClass是Customer，有以下Css属性需要定制： Tabs Css类。复制代码如下：Ajax _ _ tab _ header :a容器元素，它包装了标签容器顶部的所有标签。艾纳。子CSS类：ajax__tab_outer。ajax__tab_outer:选项卡的外部元素，通常用于设置选项卡的左侧背景图像。子CSS类：ajax__tab_inner。ajax__tab_inner:选项卡的内部元素，通常用于设置选项卡的右侧图像。子CSS类：ajax__tab_tab。包含文本内容的标签的一个元素。子CSS类3360none。ajax__tab_body:一个容器元素，用于包装显示TabPanel的区域。儿童CSS类：无。ajax__tab_hover。当鼠标悬停在选项卡上时，这将应用于选项卡。子CSS类：ajax__tab_outer。ajax__tab_act Ive :当某个选项卡是当前选中的选项卡时，此选项应用于该选项卡。子Css类：Ajax _ _ tab _ outer。然后调用自定义表头的CSSCustomer.ajax_tab_header{…}/在下面的示例中，将介绍几种自定义的Css样式。3.示例：与前面的每个控件一样，我们需要首先建立一个ajaxtoolkit模板：并在第一步创建一个ajaxtoolkit模板：。

这个项目的名称是AjaxControlToolKit_Tab。在第二步：中，编辑default.aspx页面。首先，在表单的scriptmanager下拖动一个TabContainer控件，然后设置其属性： 。

可以看到，每个tabcontainer都需要在panel属性中设置一个tabpanelheader文本，也就是这个选项卡的名称，然后每个panel都需要一个ContentTemplate来显示内容，所以只需要填写显示的内容即可。

然后再添加几个tabpanel，下面的每个tabpanel的内容这里可以拷贝上面的内容。因为我这里设置了CssClass属性，所以控件会重载这个钢性铸铁而不是用默认的那个钢性铸铁样式。第三步：我们需要创建一个钢性铸铁文件来存放自定义的标签样式。右键项目，点击添加新项目，创建一个叫做stylee.css文件，然后在default.aspx文件的头节点部分加上链接rel='样式表type='text/css' href='样式表。CSS “/这里附上用到的钢性铸铁样式：/* Ajax _ _ tab _ ie-主题主题*/。Ajax _ _ tab _ ie-主题. Ajax _ _ tab _ header { padding-left :5 px；} .Ajax _ _ tab _ ie-主题ajax _ _ tab _ header .Ajax _ _ tab _ tab { margin-right :0 px；背景： URL(img/ie/tab _ unselect。gif)；宽度宽度：116 pxpadding :9 px 0px 3px 0px文本对齐：居中；color : # 006699 font-family : verdana；font-size :13 px显示：块；} .Ajax _ _ tab _ ie-主题ajax _ _ tab _ active .Ajax _ _ tab _ tab { padd :6 px 0px 3px 0px；背景： URL(img/ie/tab _ selected。gif)；} .Ajax _ _ tab _ ie-主题. Ajax _ _ tab _ body {后台： URL(img/ie/ie _ tab back _ 720 x296。jpg)不重复；font-size :13 pxfont-family : verdana高度：296 px宽度宽度：716px}。Ajax _ _ tab _ ie-主题. Ajax _ _ tab _ body div { padd :8 px；} 第四步：向工程天添加用到的图片：创建一个img文件夹，然后加入图片，用到的图片在后面提供的代码链接里可以下载。4.代码下载： 打包下载