Ajax Control Toolkit – TabContainer

控制項結構如下

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

｛設定HeaderTemplate時HeadeText失效。｝

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.

如何重寫CSS，如下：

.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