jQueryUI 对话框中的 jQueryUI 选项卡 - 如何仅获取选项卡内容的滚动条，而不是整个对话框？答案

【问题标题】：jQueryUI Tabs inside jQueryUI Dialog -- how do I get a scrollbar for the tab-content only, rather than the entire dialog box?jQueryUI 对话框中的 jQueryUI 选项卡 - 如何仅获取选项卡内容的滚动条，而不是整个对话框？
【发布时间】：2011-09-11 10:32:08
【问题描述】：

我在 jQueryUI 对话框中使用 jQueryUI 选项卡。每个选项卡面板中的内容可能非常大——例如，每个单独的选项卡面板内可能有一个包含数百行的表格。因此需要滚动条来导航内容。

默认情况下，对话框面板显示它自己的滚动条——这不是我想要的。此滚动条会导致导航选项卡本身向上移动并移出视图。我希望每个选项卡面板在必要时显示自己的滚动条，但保持导航选项卡可见。我尝试为对话框面板设置“溢出：隐藏”，然后为各个选项卡面板设置“溢出：自动”（见下文）。但是，即使内容需要，选项卡面板也没有滚动条。

下面是显示问题的（简化的）测试用例——包括我尝试使用溢出样式来解决问题的尝试。将“Big content...”替换为需要滚动条的内容，您会看到它。

希望这已经足够清楚了。关于如何解决这个问题的任何想法？非常感谢...

<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   $("#dialog").dialog({height:300});
   $("#tabs").tabs();
});
</script>
</head>
<body>
   <div id="dialog" style="overflow:hidden;">
      <div id="tabs">
        <ul>
          <li><a href="#tab-1">tab-1</a></li>
          <li><a href="#tab-2">tab-2</a></li>
        </ul>
        <div id="tab-1" style="overflow:auto;">Big content...</div>
        <div id="tab-2" style="overflow:auto;">Big content...</div>
      </div>
   </div>
</body>
</html>

【问题讨论】：

标签： jquery-ui jquery-ui-dialog jquery-ui-tabs scrollbars

【解决方案1】：

您可以限制包含您的“内容”的每个 div 的高度，即：

height:100px;
overflow:auto;

演示：http://jsfiddle.net/AeXNP/

这让一切变得非常简单。

编辑：当（如您在下面要求的）内容根据用户调整对话框大小调整大小时，困难的部分就来了。涉及更多的css ...要在您的情况下使用溢出，您需要div的高度。由于高度一直在变化，你不知道它会是什么高度。因此，您需要手动设置边距和填充，以便将高度设置为“自动”。所以自扩展标签内容的css是：

.fixedSizedTab {
    overflow:auto;     
    position:absolute; 
    height:auto; 
    bottom:0;
    top:0;
    left:0;
    right:0;
    margin-top:50px; 
    margin-bottom:10px; 
    margin-right:0px; 
    margin-left:0px;
}

演示：http://jsfiddle.net/AeXNP/2/

【讨论】：

这看起来很不错——但是如果标签高度随着包含的对话框一起自动调整大小会更好。
是的，甚至更好。硬编码的 margin-top:50px 确实引入了对特定高度的选项卡的依赖。目前在我的实际应用程序中，它们只有 30px。但我想我可以忍受这一点。也许一些 javascript 可以在页面首次呈现时计算选项卡的“真实”高度..但这可能比它的价值更多。
啊，发现这个解决方案失败的情况——当用户调整对话框大小时，导致标签换行...
啊，没注意到。如果你给对话框一个最小宽度，它会限制标签的换行。我想不出别的办法……
奇怪；它对我不起作用。我将类添加到 div，并将其添加到 css： .fixedSizedTab { height: 120px;溢出：自动； } 并且没有效果。