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

我有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),但上面的代码不好,因为如果我更改样式(边距/边框)对于子选项卡容器,上面的代码(确切地说是硬编码常量)也必须改变.

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

3)该页面用作对话框并在FF和IE7 / 8/9中运行.

解决方法

回答

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

>找到子选项卡控件的body元素(所选选项卡的主体);

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

>找到父标签控件的主体元素(子标签控件所在的位置);

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

>将子选项卡控件的主体高度设置为父选项卡控件的主体高度(减去子选项卡的标题高度和顶部位置 – 顶部位置包括任何父填充,以及任何元素边距).

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()文档：

When positioning a new element near another one and within the same containing DOM element,.position() is the more useful.

编辑2：这是一个 Gist of your markup,here’s my markup and code,这是一个 revision showing the differences.

>我参考了http://code.jquery.com/jquery-1.6.2.min.js – 希望您在代码中引用它的原始和未经修改的副本.>移除高度：100％;从cc1中的第一个div：TabPanel ID =“tp2”.>改变浮动的第二个div：left;漂浮：对; (此div包含cc1：TabContainer ID =“SubTabContainerUg”).>删除样式=“身高：100％;”来自cc1里面的div：TabPanel ID =“subTab1”.

原文地址：https://www.jb51.cc/jquery/177183.html

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

解决方法

相关推荐