折りたたみ可能なサイズ変更可能なjQuery-uiタブウィジェット

Question

私はbeen tryingを使って折りたたみ可能でサイズ変更可能なタブを作成しました。私は、アクティブなタブをクリックして閉じると、サイズ変更（上端をデモで上にドラッグ）した後、コンテンツが消えますが、タブのコンテナは、タブバーに収まるように収縮するのではなく、同じサイズのままです。

サイズを変更した後にタブコンテナを縮小するにはどうすればよいですか？

Answer 1

FirefoxのWeb Developer Toolbarを使用してこれを追跡しました。私は "View Generated Source"をサイズ変更の前後に行い、出力に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")); 
     } 
    } 
}