的应答

Question

我有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）我最初的非maintanable解决方案是在服务器后面的代码中设置此高度，如下所示：

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

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

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

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

Answer 1

的应答

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

的详情

找到 子标签控件 的标题元素（包含标签按钮）;

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

找到 子标签控件 的正文元素（所选标签的正文）;

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

找到 父标签控件 的body元素（子标签控件所在的位置）;

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

将 子标签控件 的正文高度设置为 父标签控件 ' s身高（减去 子选项卡 的标题高度和顶部位置 - 顶部位置包括任何父填充和任何元素边距）。

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()。根据{{3}}文档：

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

编辑2：以下是position()，Gist of your markup，此处为here's my markup and code。

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

从height: 100%;内的第一个div中删除了cc1:TabPanel ID="tp2"。

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

从style="height: 100%;"内的div中删除了cc1:TabPanel ID="subTab1"。

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

1 个答案:

的应答

的详情