Introduction to the ASP. NET Ajaxcontroltoolkit--tabcontainer Control

Ajaxcontroltoolkit--tabcontainer Control's Introduction collection

1. Introduction:
The tab itself should be a control that displays the contents of your organization's pages as a tab. There are tabcontainer controls in the controls in the AJAX Control Tool Kit, which are the vectors of some tabpanel controls, and each tabpanel can be a container for some other ASP. NET controls, just like a standard panel control. TabPanel uses its three-part structure HeaderText, HeaderTemplate, and ContentTemplate properties to specify its contents.
The Tabcontainer control has the ability to maintain the current page state. When the page refreshes, the most recently selected tab is kept in its selected state, and the Actionable property page for each tab can be persisted.
2. Properties:
<ajaxtoolkit:tabcontainer runat= "Server" onclientactivetabchanged= "clientfunction" height= "150px" > < Ajaxtoolkit:tabpanel runat= "Server" headertext= "Signature and Bio" <ContentTemplate> ... </contenttemplate >/></ajaxtoolkit:tabcontainer> above is the structure of Tabcontainer, which is divided into two parts, the Tabcontainer attribute section and the TabPanel attribute section.
Tabcontainer Properties:
A. Activetabchanged (event): Events (server-side events) that are triggered when the tab is selected to be changed.
B. Onclientactivetabchanged: The client script event that is triggered when tab change is selected.
C. CssClass-the CSS Class style that is used to define its customer performance, which has a default Tab theme style, but can also be modified according to the actual needs
D. Activetabindex-initialization is set to the selected Tab
E. Height-the height of the Tab (excluding its title bar)
F. Width-where the Tab width
G. ScrollBars-whether scroll bars are displayed, can be set to, None, horizontal, Vertical, Both, or Auto
TabPanel Properties:
A. Enabled-whether the Tab page is displayed, which can be changed in client script
B. OnClientClick-The client script event name that is triggered when 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 contents of
It is important to note that CssClass can be set to your own custom format of CSS, if your cssclass is customer, you need to customize the CSS properties have the following:
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 was applied to a tab when the mouse was hovering over. Child CSS Classes:.ajax__tab_outer. .ajax__tab_active:this is applied to a tab when it's the currently selected tab. Child CSS classes:.ajax__tab_outer.
  

Then the custom header of the CSS is called; customer.ajax_tab_header{...} /
A few custom CSS styles will be introduced in the following example.
3. Example:
As with each of the previous controls, we need to create a ajaxtoolkit template first:
First step: Create a Ajaxtoolkit Template:

The name of the project is called Ajaxcontroltoolkit_tab.

Step two: Edit the Default.aspx page,

You first need to drag a Tabcontainer control underneath the ScriptManager of the form, and then set its properties:

You can see that each tabcontainer needs to have a TabPanel panel in the properties set HeaderText, that is, the tab name, and then each panel needs to ContentTemplate to display the content, fill in the content of the point display.

Then add a few tabpanel, the contents of each of the following TabPanel can be copied here.
Because I set the CssClass property here, the control will reload the CSS instead of using the default CSS style.
Step three: We need to create a CSS file to hold the Custom tab style.
Right-click Project, tap ' Add New Item ', create a file called Stylee.css, and then add the <Head> node portion of the Default.aspx file
<link rel= "stylesheet" type= "Text/css" href= "Stylesheet.css"/>
Here is a CSS style to use:
/* 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;
}

Fourth step: Add a picture to the project day: Create an IMG folder, then add a picture