Question

我been trying创建了一组可折叠且可调整大小的标签。我遇到的问题是，在单击活动选项卡以关闭它后调整大小（在演示中拖动顶部边缘）后，内容会消失但是标签容器保持相同的大小而不是收缩以适合标签栏。 / p>

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

Answer 1

我使用Firefox的Web开发人员工具栏跟踪了这一点。我在调整大小之前和之后做了“查看生成的源”并在输出上运行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"));
        }
    }
}

可折叠，可调整大小的jQuery-ui Tabs小部件

1 个答案: