可摺疊，可調整大小的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")); 
     } 
    } 
}