1

这是我第一次使用 Ajax Toolkit for ASP.NET。我正在使用 TabContainer，这是一个非常棒的控件。我遵循了 AJAX 工具包网站上的描述，除了一些样式问题外，一切都对我很好。我有 TabContainer 的以下 CSS 样式。我现在在选项卡中遇到问题。我想在标签本身的标题或标题之外添加一个小图标或图像。我这样做了，但现在文本下降了，并且没有完全显示出来，所以读者无法阅读。那你能帮我修一下吗？

CSS 样式：

/* CSS Style of the Ajax TabContainer */
.ajax__myTab .ajax__tab_header { font-family: verdana; font-size: 16px; border-bottom: solid 2px #aaaaaa } 
.ajax__myTab .ajax__tab_outer { padding-right: 2px; height: 20px; background-color: #C0C0C0; margin-right: 1px; border-right: solid 2px #666666; border-top: solid 1px #999999 } 
.ajax__myTab .ajax__tab_inner { padding-left: 3px; background-color: #C0C0C0; }
 .ajax__myTab .ajax__tab_tab { height: 13px; padding: 4px; margin: 0; } 
 .ajax__myTab .ajax__tab_hover .ajax__tab_outer { background-color: #cccccc }
  .ajax__myTab .ajax__tab_hover .ajax__tab_inner { background-color: #cccccc }
   .ajax__myTab .ajax__tab_hover .ajax__tab_tab { background-color:Green; } 
   .ajax__myTab .ajax__tab_active .ajax__tab_outer { background-color: #fff; border-left: solid 1px #999999; }
    .ajax__myTab .ajax__tab_active .ajax__tab_inner { background-color:#fff; } 
    .ajax__myTab .ajax__tab_active .ajax__tab_tab { }
     .ajax__myTab .ajax__tab_body { font-family: verdana; font-size: 11pt; border: 2px solid #999999; padding: 6px; background-color: #ffffff; }

抱歉，由于我的积分太少，我无法上传快照。

更新：

这是 ASP.NET 代码：

<%--TabContainer Control--%>
    <ajaxToolkit:TabContainer ID="LibraryTabs" runat="server" CssClass="ajax__myTab" OnDemand="true" AutoPostBack="false" 
                                TabStripPlacement="Top" ScrollBars="None" UseVerticalStripPlacement="false">
        <ajaxToolkit:TabPanel ID="ImagesGallery" runat="server" HeaderText="Images Gallery">
        <HeaderTemplate><img src="images/New/image.png" style="height: 21px; width: 23px" /> Images Gallery</HeaderTemplate>
        <ContentTemplate>
            <p>
                <strong><img src="images/New/image.png" style="height: 21px; width: 23px" /> Images Gallery: </strong> <br />
                Here's a list of some images of safety events that take place inside the company. Besides that, there are some images of 
                some safety equipments or signs. If the image is not obvious to you, please save it on your PC and then open it to see it in its
                original size. 
            </p>
            <!-- Images Gallery -->
            <div id="gallery" class="ad-gallery">

                <div class="ad-image-wrapper">
                </div>

                <div class="ad-controls">
                </div>

                <div class="ad-nav">
                    <div class="ad-thumbs">
                        <ul class="ad-thumb-list">
                            <li>
                                <a href="images/safety images/fire protection.jpg">
                                    <img src="images/safety images/thumbs/fire protection.jpg" title="Fire Protection Training Course" class="image0">
                                </a>
                            </li>

                            <li>
                                <a href="images/safety images/safety equipment.jpg">
                                    <img src="images/safety images/thumbs/safety equipment.jpg" title="One of the safety equipments" class="image0">
                                </a>
                            </li>

                            <li>
                                <a href="images/safety images/lp poster.jpg">
                                    <img src="images/safety images/thumbs/lp poster.jpg" title="Safety Poster" class="image0">
                                </a>
                            </li>

                            <li>
                                <a href="images/safety images/lp poster 2.jpg">
                                    <img src="images/safety images/thumbs/lp poster 2.jpg" title="Safety Poster" class="image0">
                                </a>
                            </li>

                            <li>
                                <a href="images/safety images/lp poster 3.jpg">
                                    <img src="images/safety images/thumbs/lp poster 3.jpg" title="Safety Poster" class="image0">
                                </a>
                            </li>

                            <li>
                                <a href="images/safety images/lp poster 4.jpg">
                                    <img src="images/safety images/thumbs/lp poster 4.jpg" title="Safety Poster" class="image0">
                                </a>
                            </li>

                            <li>
                                <a href="images/safety images/worker.jpg">
                                    <img src="images/safety images/thumbs/worker.jpg" title="Safety at workplace" class="image0">
                                </a>
                            </li>

                            <li>
                                <a href="images/safety images/safety sign.jpg">
                                    <img src="images/safety images/thumbs/safety sign.jpg" title="One of the safety signs" class="image0">
                                </a>
                            </li>

                        </ul>
                    </div>
                </div>
            </div>
            <!-- End of Images Gallery -->
            </ContentTemplate>
        </ajaxToolkit:TabPanel>

        <ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="Images Gallery">
        <HeaderTemplate>Video Gallery</HeaderTemplate>
        <ContentTemplate>
            <p>
            <strong><img src="images/New/video.png" style="height: 21px; width: 23px" /> Video Gallery: </strong> <br />
            Here's a list of safety videos that show you the effects of driving out of the speed limit and so on.
            <center><b> Coming Soon </b></center>
            </p>
        </ContentTemplate>
        </ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>

更新 2： 另外，我尝试在 AjaxToolkit:TabPanel 中包含高度和宽度，但它对我不起作用。这真的很奇怪，我无法理解。

4

4 回答 4

3

我实际上遇到了同样的问题并找到了这个解决方案，它需要将以下代码放在 stylesheet.css 中。

.ajax__tab_xp .ajax__tab_header .ajax__tab_tab 
{
    height: 24px !important;
}

所以显然该属性需要标记为重要，这样我就能够增加标题高度，但是选项卡的主体会跳下来很多。这意味着标签面板的标题和正文之间存在明显的中断。

因此，如果选项卡标题的高度会发生变化，我不确定选项卡控件是否始终是最佳解决方案。

于 2012-10-02T14:39:50.367 回答
1

您是否尝试过以下方式：

      <ajaxToolkit:TabContainer ID="mytabs" runat="server" >
            <ajaxToolkit:TabPanel runat="server" ID="tab1">
                <HeaderTemplate>
                    <div style="float: left;">
                        <img src="images/accept.png" /></div>
                    <div style="float: right; padding-left: 5px;">Accept</div>
                </HeaderTemplate>
                <ContentTemplate>some content for tab1</ContentTemplate>
            </ajaxToolkit:TabPanel>
            <ajaxToolkit:TabPanel runat="server" ID="tab2">
                <HeaderTemplate>
                    <div style="float: left;">
                        <img src="images/add.png" /></div>
                    <div style="float: right; padding-left: 5px;">Add</div>
                </HeaderTemplate>
                <ContentTemplate>some content for tab2</ContentTemplate>
            </ajaxToolkit:TabPanel>
        </ajaxToolkit:TabContainer>

上面的代码很好地呈现：

v

祝你好运！

于 2012-11-01T14:16:12.640 回答
0

像这样写<ajaxtoolkit:tabcontainer runat="server" xmlns:ajaxtoolkit="#unknown"> OnClientActiveTabChanged="ClientFunction" Height="150px" Width="400px" ActiveTabIndex="1"
OnDemand="true"
AutoPostBack="false" TabStripPlacement="Top" CssClass="ajax__tab_xp" ScrollBars="None" UseVerticalStripPlacement="true" VerticalStripWidth="120px" > <ajaxtoolkit:tabpanel runat="server"> HeaderText="Signature and Bio" Enabled="true" ScrollBars="Auto"
OnDemandMode="Once" <contenttemplate> ... </contenttemplate> /> </ajaxtoolkit:tabpanel></ajaxtoolkit:tabcontainer>

于 2012-07-24T08:02:36.233 回答
0

在此处输入图像描述

这将改变 Ajax 选项卡背景颜色。您可以根据需要进行更改，通过将属性添加到“.divTab”

    .divTab
    {
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        padding: 3px 10px 2px 10px;
    }

    .divTab:hover
    {
        color: #c8ccd0;
    }

    .MyTabStyle .ajax__tab_header
    {
        cursor: pointer;
        font-weight: bold;
        display: block;
    }
    .MyTabStyle .ajax__tab_header .ajax__tab_outer
    {
        border-color: #4597d1;
        color: #ffffff;
        margin-left: 1px;
        border: 1px solid black;
        background-color: #4597d1;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
    }

    .MyTabStyle .ajax__tab_header .ajax__tab_outer1
    {
        border-color: #4597d1;
        color: #ffffff;
        padding-left: 2px;
        margin-right: 3px;
        border: 1px solid black;
        background-color: white;
    }
    .MyTabStyle .ajax__tab_header .ajax__tab_inner
    {
        border-color: #666;
        color: #ffffff;
    }
    .MyTabStyle .ajax__tab_hover .ajax__tab_outer
    {
        background-color: #2158a0;
    }
    .MyTabStyle .ajax__tab_hover .ajax__tab_inner
    {
        color: #ffffff;
    }
    .MyTabStyle .ajax__tab_active .ajax__tab_outer
    {
        border-bottom-color: #2b5f9a;
        background-color: #2158a0;
        color: #2158a0;
    }
    .MyTabStyle .ajax__tab_active .ajax__tab_inner
    {
        color: #ffffff;
        border-color: #333;
    }
    .MyTabStyle .ajax__tab_body
    {
        font-family: verdana,tahoma,helvetica;
        font-size: 10pt;
        background-color: #fff;
        border-top-width: 0;
        border: solid 1px #d7d7d7;
        border-top-color: #ffffff;
    }

    -------------------------------------------------------------------
     <asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" CssClass="MyTabStyle">
        <asp:TabPanel ID="TabPricing" runat="server" HeaderText="Pricing">
            <HeaderTemplate>
                <div class="divTab" style="background-color: #2b5f9a;">
                    <asp:Label ID="lblPricing" runat="server" Text="Pricing"></asp:Label></div>
            </HeaderTemplate>
            <ContentTemplate>
            </ContentTemplate>
        </asp:TabPanel>
        <asp:TabPanel ID="TabDesign" runat="server" HeaderText="Design Specs">
            <HeaderTemplate>
                <div class="divTab" style="background-color: #ac416c;">
                    <asp:Label ID="lblDesignSpecs" runat="server" Text="Design Specs"></asp:Label></div>
            </HeaderTemplate>
            <ContentTemplate>
            </ContentTemplate>
        </asp:TabPanel>
        <asp:TabPanel ID="Tab_Fab" runat="server" HeaderText="Fab Specs">
            <HeaderTemplate>
                <div class="divTab" style="background-color: #979444;">
                    <asp:Label ID="Label1" runat="server" Text="Fab Specs"></asp:Label></div>
            </HeaderTemplate>
            <ContentTemplate>
            </ContentTemplate>
        </asp:TabPanel>
    </asp:TabContainer>


  [1]: http://i.stack.imgur.com/04quM.png
于 2013-06-18T17:49:47.557 回答