自动调整 TabContainer 大小

引言

在动态加载 TabPanel 到 TabContainer 时，我注意到 TabContainer 的边框不会自动调整大小。 我也没有在网上找到任何相关信息。 最终，我将其设置为某个高度，并希望没有人会注意到，但他们注意到了。 内容向下延伸，TabContainer 边框高度卡在 400。 我使用这段代码解决了这个问题。

希望对您有帮助！

在撰写本文之后，我还发现创建一个面板（相当于一个 div 标签，而不是选项卡面板），将其高度设置为 100%，并将选项卡中的所有控件用该面板包装起来，效果也一样好 - 使用这种方法不需要 JavaScript。

我将保留这篇文章，以防有人需要弄清楚如何使用 JavaScript 调整选项卡的大小。

使用代码

使用 OnClientActiveTabChanged 属性来调用一些 JavaScript。

<ajaxToolkit:TabContainer ID="tabContainer" runat="server" 
                          OnClientActiveTabChanged="doSizeUp" />

然后使用这个 JavaScript 函数来调整大小

function doSizeUp(){
    //get the tabContainer for later reference
    var tc = document.getElementById("<%=tabContainer.ClientId%>");
    
    //get the index of the tab you just clicked.
    var tabIndex = 
     parseInt($find("<%=tabContainer.ClientId%>").get_activeTabIndex(), 10);
    
    //set the tabcontainer height to the tab panel height.
    tc.childNodes[1].style.height = 
     tc.childNodes[1].childNodes[tabIndex].clientHeight;
}

别忘了在页面加载时调用 doSizeUp。 这里有一些可以做到这一点的方法

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(PageLoadedHandler);
function PageLoadedHandler(sender, args) {
    setTimeout('doSizeUp()', 1);
}

关注点

请注意，我只在 IE6 和 IE7 中检查过这个，因为这是在我们的内网工作所需的全部，但我相信它可以在大多数主流浏览器中工作。

历史

• 提交日期 - 2008/4/25。
• 修订日期 - 2008/4/25 - 发现另一种方法... 也许更容易 - 在介绍中说明。