asp.net AjaxControlToolKit--TabContainer control introduction

AjaxControlToolKit--TabContainer control introduction collection

1. Introduction:
Tab itself should be a control that displays the content of organized web pages in the form of tabs. Among the controls in the AJAX Control Tool Kit, there is the TabContainer control, which is the carrier of some TabPanel controls, and each TabPanel can become a container for some other ASP.NET controls like a standard Panel control. TabPanel specifies its content through its three-part structure HeaderText, HeaderTemplate and ContentTemplate properties.
TabContainer control has the ability to maintain the current page state. When the page is refreshed, the latest selected Tab will remain selected; in addition, the operable property pages of each Tab can be maintained.
2. Properties:
... />The above is the structure of TabContainer, which is divided into two parts, the TabContainer attribute part and the TabPanel attribute part.
TabContainer properties:
a. ActiveTabChanged(Event): Event triggered when the selected Tab is changed (server-side event).
b. OnClientActiveTabChanged: Client script event triggered when the selected Tab changes.
c. CssClass - The Css Class style used to define its client performance. It has the default Tab theme style, but can also be modified according to actual needs
d. ActiveTabIndex - Initialization is set to the selected Tab
e. Height - the height of the Tab (excluding its title bar)
f. Width - the width of the Tab
g. ScrollBars - whether to display scroll bars, can be set to None, Horizontal, Vertical, Both or Auto
TabPanel properties:
a. Enabled - Whether to display the Tab page, this property can be changed in the client script
b. OnClientClick - The name of the client script event triggered when it is clicked
c. HeaderText - Tab title
d. HeaderTemplate - a TemplateInstance.Single ITemplate used to define the title
e. ContentTemplate - a TemplateInstance.Single ITemplate used to define the content
Special attention should be paid to CssClass can be set to CSS in your custom format. If your CssClass is Customer, the Css properties that need to be customized are as follows:
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.

Then the Css of the customized header is Called; Customer.ajax_tab_header{…}/
In the following example, several custom CSS styles will be introduced.
3. Example:
Like every previous control, we need to create an ajaxtoolkit template first:
Step one: Create an ajaxtoolkit template:

Name the project AjaxControlToolKit_Tab.

Second step: Edit the default.aspx page,

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

It can be seen that each tabcontainer needs to set the headertext in the properties of the tabpanel Panel, which is the name of the tab, and then each panel needs a ContentTemplate to display the content. Just fill in the displayed content.

Then add a few more tabpanels. The content of each tabpanel below can be copied from the above content.
Because I set the CssClass property here, the control will overload this Css instead of using the default Css style.
Step 3: We need to create a Css file to store the custom tab style.
Right-click the project, click 'Add New Item', create a file called stylee.css, and then add

Attached here are the Css styles used:
/* 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;
}

Step 4: Add the images used to the project: create an img folder, and then add the images

More introduction to asp.net AjaxControlToolKit--TabContainer control For related articles, please pay attention to the PHP Chinese website!