7

我有 2 个嵌套的 ajax asp.net 选项卡。如果我将父选项卡（TabContainerMain）的初始高度设置为 300，如何在 css 或 jquery 中设置子选项卡（SubTabContainerUg）的高度？标记如下所示：

<!DOCTYPE html>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<html lang="en">
<head runat="server">
    <title></title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <script src="../js/jquery-1.6.2.js" type="text/javascript"></script>
    <script src="../js/modernizr-latest.js" type="text/javascript"></script>
    <script src="../js/admin.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </cc1:ToolkitScriptManager>
    <section>
        <cc1:TabContainer ID="TabContainerMain" runat="server" Height="300px">
            <cc1:TabPanel ID="tp2" runat="server" HeaderText="test 2">
                <ContentTemplate>
                <section>
                    <div style="height: 100%; width: 30%; float: left;">
                        <div>
                            <asp:Label ID="Label5" runat="server" Text="Search:"></asp:Label>
                            <br />
                            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                            <input id="Button1" type="button" value="Search" onclick="SearchClick(this)" />
                        </div>
                    </div>
                    <div style="width: 70%; float: left;">
                        <cc1:TabContainer ID="SubTabContainerUg" runat="server" ActiveTabIndex="0">
                            <cc1:TabPanel ID="subTab1" runat="server" HeaderText="Cubes">
                                <ContentTemplate>
                                <div style="height: 100%;">
                                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                                </div>
                                </ContentTemplate>
                            </cc1:TabPanel>
                            <cc1:TabPanel ID="subTab2" runat="server" HeaderText="Reports">
                                <ContentTemplate>
                                    <div>
                                        <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
                                    </div>
                                </ContentTemplate>
                            </cc1:TabPanel>
                        </cc1:TabContainer>
                    </div>
                </section>
                </ContentTemplate>
            </cc1:TabPanel>
            <cc1:TabPanel ID="tp3" runat="server" HeaderText="test 3">
                <ContentTemplate>
                </ContentTemplate>
            </cc1:TabPanel>
        </cc1:TabContainer>
    </section>
    <footer> This is footer. </footer>
    </form>
</body>
</html>

注意：1）我最初的不可维护的解决方案是在服务器后面的代码中设置这个高度，如下所示：

SubTabContainerUg.Height = new Unit(TabContainerMain.Height.Value - 43);

请注意，此代码适用于 IE7/8/9，即调整子选项卡的大小并将容器保持在相同的高度（= 300 像素），但上面的代码不好，因为如果我更改样式（边距/边框）的子选项卡容器，那么上面的代码（准确地说是硬编码常量）也必须改变。

2）为了简洁起见，我简化了标记。主选项卡和子选项卡都将包含文本框和列表框等控件。

3) 此页面用作对话框，在FF 和IE7/8/9 中运行。

4

1 回答 1

4

回答

使用 jQuery 实现您的问题的解决方案相对简单。对于每个TabContainer要调整为其父级大小的对象，您必须：

// SubTabContainerUg is the TagContainer's ID property.
var myheader = $('#<%= SubTabContainerUg.ClientID %> > .ajax__tab_header');
var mybody = $('#<%= SubTabContainerUg.ClientID %> > .ajax__tab_body');
var myparentbody = $('#<%= TabContainerMain.ClientID %> > .ajax__tab_body');
mybody.height(myparentbody.height() - myheader.outerHeight(true) - myheader.position().top);

细节

  1. 找到子选项卡控件的标题元素（包含选项卡按钮）；

    var myheader = $('#<%= SubTabContainerUg.ClientID %> > .ajax__tab_header');

  2. 找到子选项卡控件的主体元素（选定选项卡的主体）；

    var mybody = $('#<%= SubTabContainerUg.ClientID %> > .ajax__tab_body');

  3. 找到父选项卡控件的body元素（子选项卡控件所在的位置）；

    var myparentbody = $('#<%= TabContainerMain.ClientID %> > .ajax__tab_body');

  4. 将子选项卡控件的主体高度设置为父选项卡控件的主体高度（减去子选项卡的标题高度和顶部位置 - 顶部位置包括任何父填充和任何元素边距）。

    mybody.height(myparentbody.height() - myheader.outerHeight(true) - myheader.position().top);

该解决方案适用于：

编辑：更改offset()为position(). 根据position()文档：

当将新元素定位在另一个元素附近并在同一个包含 DOM 元素内时，.position() 更有用。

编辑 2：这是您的标记的要点，这是我的标记和代码，这是显示差异的修订版。

  1. 我参考http://code.jquery.com/jquery-1.6.2.min.js- 希望您在代码中引用它的原始且未经修改的副本。

  2. height: 100%;从第一个 div 里面去掉cc1:TabPanel ID="tp2"。

  3. 将第二个 div 从更改float: left;为float: right;（此 div 包含cc1:TabContainer ID="SubTabContainerUg"）。

  4. style="height: 100%;"从 div 里面去掉cc1:TabPanel ID="subTab1"。

于 2013-04-09T19:12:20.997 回答