7

ネストされた ajax asp.net タブが 2 つあります。親タブ (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 で実行されます。

4

1 に答える 1