Ajax Control Toolkit-tabcontainer

The control structure is as follows:

   <  Ajaxtoolkit: tabcontainer  ID  = "Tabcontainer1"  Height  = "300px"  Runat  = "Server"  Cssclass  = "Ajax _ mytab"  
Activetabindex  = "0"  >  
  < Ajaxtoolkit: tabpanel  Runat  = "Server"  ID  = "P1"  Tooltip  = "Num"  >  
  <  Headertemplate  >  
Tab1
  </  Headertemplate  > 
  <  Contenttemplate  >  
Tab1 content
  </  Contenttemplate  >  
  </  Ajaxtoolkit: tabpanel  >  
  <  Ajaxtoolkit: tabpanel  Runat = "Server"  ID  = "P2"  Headertext  = "Tabheadertext"  >  
  <  Headertemplate  >  
Tab2  </  Headertemplate  >  
  < Contenttemplate  >  
Tab2 content  </  Contenttemplate  >  
  </  Ajaxtoolkit: tabpanel  >  
  </  Ajaxtoolkit: tabcontainer  > 

{Headetext is invalid when headertemplate is set .}

1. tabcontainer Properties

Activetabchanged (Event)-Fired on the server side when a tab is changed after a PostBack

Onclientactivetabchanged-The name of a JavaScript function to attach to the client-side tabchanged event

Cssclass-A css class override used to define a custom look and feel for the tabs. See the tabs theming section for more details.

Activetabindex-The first tab to show

Height-Sets the height of the body of the tabs (does not include the tabpanel headers)

Width-Sets the width of the body of the tabs

Scrollbars-Whether to display scrollbars (none, horizontal, vertical, both, auto) in the body of the tabcontainer

Tabstripplacement-Whether to render the tabs on top of the container or below (Top, bottom)

2. tabpanel Properties

Enabled-Whether to display the tab for the tabpanel by default. This can be changed on the client.

Onclientclick-The name of a JavaScript function to attach to the client-side Click Event of the tab.

Headertext-The text to display in the tab

Headertemplate-A templateinstance. Single itemplate to use to render the header

Contenttemplate-A templateinstance. Single itemplate to use to render the body

3. 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.

How to rewrite CSS is as follows:

. Customtabstyle. Ajax _ tab_header {
Font-family: verdana, tahoma, Helvetica;
Font-size: 11px;
Background: URL (images/tab-line.gif) Repeat-x bottom;
}

 1     <  ASP: scriptmanager  ID  = "Scriptmanager1"  Runat  = "Server"     />  
  2     <  Script  Type  = "Text/JavaScript"  > 
  3     Function  Panelclick (sender, e ){
  4   }
  5   
  6     Function Activetabchanged (sender, e ){
  7   }
  8     </  Script  >  
  9     <  Div  >  
  10    <  Ajaxtoolkit: tabcontainer  Runat  = "Server"  ID  = "Tabs"  Height  = "150px"  Onclientactivetabchanged  = "Activetabchanged"  >  
  11     < Ajaxtoolkit: tabpanel  Runat  = "Server"  ID  = "Panel1"  Headertext  = "Tab one"  >  
  12     <  Contenttemplate  >  
  13    <  BR  />  
  14   Page one-sample HTML content for Tab
  15     </  Contenttemplate  >  
  16     </ Ajaxtoolkit: tabpanel  >  
  17     <  Ajaxtoolkit: tabpanel  Runat  = "Server"  ID  = "Panel2"  Headertext  = "Tab two"  >  
  18    <  Contenttemplate  >  
  19   Page two-sample HTML content for Tab
  20     </  Contenttemplate  >  
  21     </ Ajaxtoolkit: tabpanel  >  
  22     <  Ajaxtoolkit: tabpanel  Runat  = "Server"  ID  = "Panel3"  Onclientclick  = "Panelclick"  Headertext  = "Tab three"  > 
  23     <  Contenttemplate  >  
  24   Page three-sample HTML content for Tab
  25     </  Contenttemplate  >  
  26    </  Ajaxtoolkit: tabpanel  >  
  27     </  Ajaxtoolkit: tabcontainer  >  
  28     <  BR  />  
 29     </  Div  >  
  30