zoukankan      html  css  js  c++  java
  • 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

      

  • 相关阅读:
    最近实际项目中遇到的技术问题与解决思路
    独立完成一个城市选择组件(阿里前端题目,内附知识点、思路)
    用Node.js写爬虫,撸羞羞的图片
    Flutter项目之app升级方案
    Flutter数据持久化入门以及与Web开发的对比
    为什么要学会正则表达式
    async/await,了解一下?
    面向面试题和实际使用谈promise
    从一次输入框无法输入的bug,谈如何限制输入框输入类型
    Vue组件的is具体用法
  • 原文地址:https://www.cnblogs.com/January/p/2142980.html
Copyright © 2011-2022 走看看