Question

我正在使用jQuery的ui-tabs。如果我打开一个在页面加载时关闭的选项卡，则此选项卡中的子控件将不具有选项卡的完整宽度。那是因为关闭的标签获取了类ui-tabs-hide，并且显示设置为无。

有一种简单的方法可以解决这个问题吗？我已经尝试使用隐藏可见性而不是显示无，但这会将我的标签内容包装在彼此之下。

Answer 1

首次显示时，尝试渲染选项卡的内容（或初始化其中的控件）。您可以使用“show”事件。

Answer 2

我没有足够的代表发表评论，但这里有两个想法。

1）将每个div的宽度设置为相同的宽度。

2）您是否尝试使用ajaxOptions动态加载每个标签？

我能够使用选项1使我的页面正常工作。

Answer 3

我无法在jsfiddle.net/zTBMG/1/上重现上述行为。最初隐藏的标签位于问题中，class设置为ui-tabs-hide。

隐藏选项卡中的进度条和按钮小部件都可以正常渲染。

就解决方案而言，请确保使用仅 CSS设置元素的宽度。如果宽度设置为width:100%，则浏览器将确保正确重排。如果您使用的是JavaScript执行结果的固定值，您需要手动对回流做出反应。

如果问题仍然存在，请禁用标签初始化并暂时删除ui-tabs-hide课程并验证您的布局是否正确。使用Firebug之类的工具并检查元素的布局/指标，确实从您期望的位置获取它们的值。确认没有设置额外的边距或填充。

注意：问题中的示例代码确实增加了获得有用答案的可能性。

Answer 4

我经常使用jqueryui标签。为了确保选项卡以相同的宽度呈现并且所有子控件都以正确的宽度呈现，我只需将'ui-widget-content'类添加到组成选项卡的div或包含子项的div中控制。示例如下：

<div class="tabs ui-widget-content ui-corner-all">
    <ul>
        <li><a href="#divTools">Tools</a></li>
        <li><a href="#divNotices">Notices</a></li>
    </ul>
    <div id="divTools">
        <div id="divStatus" class="ui-widget-content ui-corner-all">
        </div>
        <div id="divUpdateStatusDialog" class="dialog">
        </div>
    </div>
    <div id="divNotices">
        <div class="ui-widget-content ui-corner-all">
        </div>
    </div>
</div>

此外，如果您指的是在初始化时呈现的动态控件，则需要将屏幕偏移到屏幕左侧而不是使用display: none。有关详细信息，请参阅http://jqueryui.com/demos/tabs/。

希望这有帮助，

皮特

Answer 5

我的隐藏div有同样的宽度问题。在隐藏之前尝试在css中设置尺寸。然后在同一个css文件中立即隐藏它。因此，在隐藏项目或稍后显示项目之前，项目已经过大小调整。它奏效了。

控件将无法在jQuery选项卡中获得适当的维度

5 个答案: