2

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

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

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

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

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

1 回答 1

2

您可以限制包含“内容”的每个 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/

于 2011-09-11T00:19:38.860 回答