mas*_*2k1 7 css asp.net jquery tabs ajaxcontroltoolkit
我有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');
找到父选项卡控件的body元素（子选项卡控件所在的位置）；
var myparentbody = $('#<%= TabContainerMain.ClientID %> > .ajax__tab_body');
将子选项卡控件的主体高度设置为父选项卡控件的主体高度（减去子选项卡的标题高度和顶部位置 - 顶部位置包括任何父级填充和任何元素边距）。
mybody.height(myparentbody.height() - myheader.outerHeight(true) - myheader.position().top);
该解决方案适用于：
编辑：更改offset()为position(). 根据position()文档：
当将一个新元素定位在另一个元素附近且位于同一包含 DOM 元素内时，.position() 更有用。
编辑 2：这是您的标记要点，这是我的标记和代码，这是显示差异的修订版。
我引用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"。
| 归档时间： |
|
| 查看次数： |
1104 次 |
| 最近记录： |
