jquery-ui-tabs - 可折叠、可调整大小的 jQuery-ui 选项卡小部件

Question

我一直在尝试创建一组可折叠且可调整大小的选项卡。我遇到的问题是，在调整大小（在演示中拖动顶部边缘）后，当您单击活动选项卡以关闭它时，内容会消失，但选项卡容器保持相同大小，而不是缩小以仅适合选项卡栏。

在调整大小后使标签容器缩小的技巧是什么？

Answer 1

我使用 Firefox 的 Web Developer Toolbar 跟踪了这一点。我在调整大小之前和之后做了“查看生成的源”并在diff输出上运行。调整大小会为受影响的元素添加样式属性：

style="top: 226px; left: 0px; width: 1272.87px; height: 591.867px;"

为了解决这个问题，我为该tabsselect事件添加了一个处理程序。它在折叠 div 时将其存储top并height放入数据属性中，然后将其删除。显示选项卡时，它会从数据属性中恢复设置。

select: function(event, ui) {
    if ($tabs.tabs("option", "selected") == ui.index) {
        // we're collapsing the visible tab
        if ($tabs.css("top")) {
            $tabs.data("top", $tabs.css("top"));
            $tabs.data("height", $tabs.css("height"));
            $tabs.css("top", "");
            $tabs.css("height", "");
        }
    }
    else if (ui.index == -1) {
        // we're about to show a tab
        if ($tabs.data("top")) {
            $tabs.css("top", $tabs.data("top"));
            $tabs.css("height", $tabs.data("height"));
        }
    }
}