Question

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

默认情况下，对话框面板会显示自己的滚动条 - 这不是我想要的。此滚动条使导航选项卡本身向上移动并退出视图。我更喜欢的是每个选项卡面板在必要时显示自己的滚动条，但保持导航选项卡可见。我已经尝试为对话框面板设置“overflow：hidden”，然后为各个选项卡面板设置“overflow：auto”（见下文）。但是，即使内容需要，选项卡面板也不会获得滚动条。

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

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

<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>

Answer 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/

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

1 个答案: