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

Question

折りたたみ可能でサイズ変更可能な一連のタブを作成しようとしています。私が抱えている問題は、アクティブなタブをクリックして閉じるときにサイズ変更 (デモで上端をドラッグ) した後、コンテンツは消えますが、タブ コンテナーはタブ バーに合わせて縮小するのではなく、同じサイズのままです。

サイズ変更後にタブ コンテナを縮小する秘訣は何ですか?

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