Introduction to the Asp.net ajaxcontroltoolkit-tabcontainer Control

Ajaxcontroltoolkit -- Introduction to The tabcontainer Control

1. Introduction:
A tab is a control that displays the content of an organizational page in the form of a tab. The control of Ajax control tool kit contains the tabcontainer control, which is the carrier of some tabpanel controls. Each tabpanel can become the container of some other ASP. NET controls like a standard panel control. Tabpanel uses its three-part structure headertext, headertemplate, and contenttemplate to specify its content.
The tabcontainer control can maintain the current page status. When the page is refreshed, the latest Selected tab is kept in the selected status. In addition, the operable attribute pages of each tab can be kept.
2. properties:
<Ajaxtoolkit: tabcontainer runat = "server" onclientactivetabchanged = "clientfunction" Height = "150px"> <ajaxtoolkit: tabpanel runat = "server" headertext = "signature and bio" <contenttemplate>... </contenttemplate>/> </ajaxtoolkit: tabcontainer> the structure of tabcontainer consists of two parts: attribute and tabpanel attribute.
Tabcontainer attributes:
A. activetabchanged: events triggered when the Selected tab is changed (server events ).
B. onclientactivetabchanged: the client script event triggered when the Selected tab changes.
C. cssclass-is used to define the CSS class style of customer performance. It has the default tab topic style, but can also be modified as needed
D. activetabindex-initialize the Selected tab
E. Height-the height of the tab (excluding its title bar)
F. Width-the tab width
G. scrollbars-whether to display the scroll bar. It can be set to, none, horizontal, vertical, both, or auto.
Tabpanel attributes:
A. enabled-whether to display this tab page. This attribute can be changed in the client script.
B. onclientclick-client script event name triggered when clicked
C. headertext-tab title
D. headertemplate-A templateinstance. Single itemplate is used to define the title.
E. contenttemplate-A templateinstance. Single itemplate is used to define the content.
Note that cssclass can be set to CSS in your custom format. If your cssclass is customer, you need to customize the following CSS attributes:
Tabs CSS classes CopyCode The Code is as follows: ·. 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.

The CSS of the custom header is called; customer. ajax_tab_header {...} /
In the following example, we will introduce several custom CSS styles.
3. Example:
Like every previous control, we need to first create an ajaxtoolkit template:
Step 1: Create an ajaxtoolkit template:

The project name is ajaxcontroltoolkit_tab.

Step 2: edit the default. aspx page,

First, you need to drag a tabcontainer control under the form scriptmanager and set its properties:

It can be seen that each tabcontainer needs to set headertext In the attribute of tabpanel, that is, the name of the tab. Then, contenttemplate is required for each panel to display the content. You can enter the content displayed by dot.

Then add several more tabpanels. The content of each tabpanel below can be copied here.
Because I have set the cssclass attribute here, the control will reload this CSS instead of using the default CSS style.
Step 3: Create a CSS file to store custom tab styles.
Right-click the project, click 'add new item', create a file named stylee.css, and add
<LINK rel = "stylesheet" type = "text/CSS" href = "stylesheet.css"/>
The CSS style used is attached here:
/* 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: pixel PX;
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;
}
Step 4: add images to the project day: Create an IMG folder and add images. The images used can be downloaded from the code link provided later.
4. Download the Code:
Package download