Вкладки пользовательского интерфейса jQuery - Автоматическая высота

Question

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

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

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

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

Answer 1

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

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

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

Answer 2

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

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

Answer 3

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

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

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

Answer 4

Похоже, его больше нет, проверьте этот плагин на ту же функциональность

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

Answer 5

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

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

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

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

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

НТН

Answer 6

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

пример:

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

Answer 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');
            });

Answer 8

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

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

Answer 9

Пример Габриэля дал мне правильное руководство, но я не мог заставить его работать именно так. Если вы посмотрите на пример исходного кода документации 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();

...

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

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

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

Answer 10

Проверьте URL:

http://api.jqueryui.com/tabs/#option-heightStyle

$("#tabs").tabs({ heightStyle: "fill" });