JQuery UI Tabs - автоматическая высота

В предыдущих версиях jQuery tabs появилась возможность автоматически устанавливать высоту вкладки на вкладку самой высокой вкладки в группе, используя:

$('#container').tabs({ fxAutoHeight: true });

Однако это не работает в jQuery UI 1.5.3.

Удалена ли эта опция? Если это так, есть другой способ получить ту же функциональность?

Ответы

Ответ 1

Похоже, что его больше нет, посмотрите этот плагин для той же функциональности

Плагин равных высот

Ответ 2

Все, что вам нужно сделать, это установить минимальную высоту. (Мне потребовалось время, чтобы найти ответ на этот вопрос. Надеюсь, это поможет!).

Вот мой код, который действительно работает:

$("#tabs").tabs().css({
   'min-height': '400px',
   'overflow': 'auto'
});

Ответ 3

В jQuery 1.9 используйте атрибут heightStyle (docs здесь)

$( ".selector" ).tabs({ heightStyle: "auto" });

Ответ 4

После чтения документации кажется, что опция больше недоступна. Однако очень просто реплицировать эту функциональность.

Предполагая, что ваши вкладки расположены горизонтально:

$("ul.tabs a").css('height', $("ul.tabs").height());

Ответ 5

Пример от gabriel дал мне правильный результат, но я не мог заставить его работать именно так. Если вы посмотрите на пример исходного кода документации jQuery, вы увидите, что код HTML должен выглядеть следующим образом:

<div id="tabs">
   <ul>
       <li><a href="#fragment-1"><span>One</span></a></li>
       <li><a href="#fragment-2"><span>Two</span></a></li>
       <li><a href="#fragment-3"><span>Three</span></a></li>
   </ul>
   <div id="fragment-1">
       <p>First tab is active by default:</p>
       <pre><code>$('#example').tabs();</code></pre>
   </div>
   ...
</div>

Поскольку у меня есть 3 вкладки, у которых есть довольно статичный контент, для меня было достаточно установить высоту всех вкладок на высоту самой высокой, которая в моем случае является # фрагментом-1.

Это код, который делает это:

$("#tabs div.ui-tabs-panel").css('height', $("#fragment-1").height());

Ответ 6

Ответ Джанниса верен для получения самой высокой высоты среди вкладок, но отсутствует код для фактического применения этого решения. Вам нужно добавить способ перепрограммировать первую вкладку (которая будет исчезать кодом) и способ установить высоту каждой из областей содержимого.

var height = 0;
//Get the highest height.
$("#tables .ui-widget-content").each(function(){
    $(this).removeClass('ui-tabs-hide');
    var oheight = height; //used to identify tab 0
    if(height < $(this).height())
    {
        height = $(this).height();
    }
    if(oheight != 0)
    {
        $(this).addClass('ui-tabs-hide');
    }
});
//Apply it to each one...
$("#tables .ui-widget-content").height(height);

Ответ 7

var biggestHeight = 0;
jQuery.each($(this).find(".ui-tabs-panel"),
            function (index, element) {      
                var needAppend = false;
                if ($(element).hasClass('ui-tabs-hide')) {
                    $(element).removeClass('ui-tabs-hide');
                    needAppend = true;
                }

                if ($(element).height() > biggestHeight)
                    biggestHeight = $(element).height();

                if (needAppend)
                    $(element).addClass('ui-tabs-hide');
            });

Ответ 8

Установить минимальную высоту вкладки и изменить ее размер на none...

Пример:

$("#tab").tabs().css({'resize':'none','min-height':'300px'});

Ответ 9

Я просто искал это решение, и установка минимальной высоты - это только хорошо, если вы знаете, насколько высока минимальная высота должна быть заранее.

Вместо этого я пошел в css и изменил класс ui-tabs, чтобы добавить "overflow: auto;" как ниже

.ui-tabs { overflow: auto; position: relative; padding: .2em; zoom: 1; }

Это работает для меня в FF12... Я не пробовал это в других. Если это работает, вы можете создать отдельный класс для сохранения функциональности запаса и взаимозаменяемости между ними и т.д.

BTW - причина, по которой вам может понадобиться динамическая калибровка, - это если вы загружаете из Ajax, но не используете метод загрузчика табуляции, а скорее другую функцию (их метод предполагает, что контент все исходит из одного ресурса url, который может не быть достаточно в зависимости от того, насколько продвинута ваша динамическая популяция).

НТН

Ответ 10

var height = 0;

$("#tabs .ui-widget-content").each(function(){
    $(this).removeClass('ui-tabs-hide');
        if(height < $(this).height())
            height = $(this).height();
    $(this).addClass('ui-tabs-hide');
});