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

 <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <script type="text/javascript">
        function PanelClick(sender, e) {
        }

        function ActiveTabChanged(sender, e) {
        }
    </script>
    <div>
        <ajaxToolkit:TabContainer runat="server" ID="Tabs" Height="150px" OnClientActiveTabChanged="ActiveTabChanged">
            <ajaxToolkit:TabPanel runat="Server" ID="Panel1" HeaderText="Tab One">
                <ContentTemplate>
                    <br />
                    PAGE ONE - Sample HTML Content for Tab
                </ContentTemplate>
            </ajaxToolkit:TabPanel>
            <ajaxToolkit:TabPanel runat="Server" ID="Panel2" HeaderText="Tab Two">
                <ContentTemplate>
                    PAGE TWO - Sample HTML Content for Tab
                </ContentTemplate>
            </ajaxToolkit:TabPanel>
            <ajaxToolkit:TabPanel runat="Server" ID="Panel3" OnClientClick="PanelClick" HeaderText="Tab Three">
                <ContentTemplate>
                                        PAGE THREE - Sample HTML Content for Tab
                </ContentTemplate>
            </ajaxToolkit:TabPanel>
        </ajaxToolkit:TabContainer>
        <br />
            </div>