jQueryUI在另一个选项卡中有两个选项卡-高度是't在隐藏时设置

jQueryUI 2 tabs inside another tab - height isn't set when hidden

本文关键字：选项设置高度隐藏另一个两个 jQueryUI 更新时间：2023-09-26

我正在开发的应用程序有许多主页，我正在使用带有heightStyle:"fill"的jQueryUI选项卡来实现这些主页，因此它们都可以扩展到网页上容器的整个高度。其中一个页面包含另外两个选项卡元素，它们也是用heightStyle:"fill"创建的。我希望它们并排出现，所以我用height:100% width:50% position:absolute top:0将每个包裹在<div>中，然后一个有left:0，另一个有right:0，使它们粘在容器的右边缘。JSfiddle在这里。

我看到的问题是，如果页面加载时选择了选项卡"1"，然后单击选项卡"2"，则两个内部选项卡元素显示的高度错误。

只有当"1"是默认选项卡时，我才会遇到问题。如果我通过将tabs()调用中的active选项更改为1将其设置为"2"，则当页面加载时，元素是可见的，并且它们的高度设置正确。

如果在内部选项卡上运行"refresh"方法，问题就会消失，因为这会导致它们重新计算高度，因此解决此问题的一种方法是从外部选项卡元素上的"tabsactivate"事件处理程序运行"刷新"。问题是，这个事件处理程序是为所有选项卡触发的，而不仅仅是我们感兴趣的选项卡。那么我如何使用回调来有效地处理这个问题呢。

另一种解决方法是更改CSS，因为我怀疑问题是由用"position:absolute"将内部选项卡包装在div中引起的。

收到建议，不胜感激！！

破解了！首先将一个自定义的my-activate事件处理程序绑定到包含内部"tabs"元素的面板，然后从那里向它们发送一个refresh事件。其次，将一个activate事件处理程序添加到外部的'tabs'元素，并从那里将my-activate事件传递到激活的子面板。http://jsfiddle.net/kmbro/a92rg8cy/.这种方法的巧妙之处在于，您可以将不同的处理程序绑定到每个子面板。

另一种可能性是，您可以向被取消选择的面板发送自定义my-deactivate事件（使用ui.oldPanel），这样它就可以关闭激活时设置的任何后台更新处理。

请注意，activate事件在首次出现在屏幕上时不会发送到"tabs"元素，只有当所选面板发生更改时才会收到它。如果您第一次需要做某事，请处理create事件http://api.jqueryui.com/tabs/#event-创建。享受