如何在嵌套的Ajax Asp.net选项卡中设置子选项卡高度？

Question

如何在嵌套的Ajax Asp.net选项卡中设置子选项卡高度？

7

我有两个嵌套的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 px），但是上面的代码不好，因为如果我更改子选项卡容器的样式（边距/边框），那么以上代码（确切地说是硬编码常量）也必须相应更改。

2）我简化了标记以缩短长度。主选项卡和子选项卡都将包含文本框和列表框等控件。

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

- mas_oz2k1

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jesse · Accepted Answer

答案

使用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);

详情

Find the child tab control's header element (which holds the tab buttons);

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

Find the child tab control's body element (the body of the selected tab);

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

Find the parent tab control's body element (where the child tab control is located);
```
var myparentbody = $('#<%= TabContainerMain.ClientID %> > .ajax__tab_body');
```
Set the child tab control's body height to be the parent tab control's body height (minus the child tab's header height and top position - the top position includes any parent padding, and any element margin).
```
mybody.height(myparentbody.height() - myheader.outerHeight(true) - myheader.position().top);
```

以下浏览器支持该解决方案：

Firefox 20.0
Chrome 26.0.1410.64
Internet Explorer 6 / 7 / 8 / 9 / 10

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

当在相同的包含DOM元素附近放置新元素时，.position()更有用。

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

我引用了http://code.jquery.com/jquery-1.6.2.min.js - 希望您在代码中引用原始且未修改的副本。
从cc1:TabPanel ID="tp2"中的第一个div中删除height: 100%;。
将第二个div从float: left;更改为float: right;（该div包含cc1:TabContainer ID="SubTabContainerUg"）。
从cc1:TabPanel ID="subTab1"中的div中删除style="height: 100%;"。