控件结构如下
<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失效。}
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)
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