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

Question

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

调整标签容器大小后缩小的诀窍是什么？

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")); 
     } 
    } 
}