Складной виджет jQuery-ui Tabs с изменяемыми размерами - PullRequest
Новая
       31

Складной виджет jQuery-ui Tabs с изменяемыми размерами

0 голосов
/ 30 июня 2011

Я пытался создать набор вкладок, который можно свернуть и изменить его размер.У меня проблема в том, что после изменения размера (перетаскивания верхнего края в демонстрационной версии), когда вы щелкаете активную вкладку, чтобы закрыть ее, содержимое исчезает, но в контейнере вкладок остается тот же размер, а не уменьшается, чтобы уместиться только на панель вкладок.

Что за хитрость заключается в уменьшении контейнера вкладок после изменения его размера?

1 Ответ

1 голос
/ 30 июня 2011

Я нашел это с помощью панели инструментов Firefox для веб-разработчиков. Я сделал «Просмотр сгенерированного источника» до и после изменения размера и запустил 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"));
        }
    }
}
...