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

Question

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

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

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

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

Answer 1

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

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

Answer 2

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

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

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

Answer 3

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

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

Answer 4

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

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

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

Answer 5

Пример Габриэля дал мне правильное направление, но я не смог заставить его работать именно так.Когда смотришь на пример исходного кода документации 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 вкладки с довольно статичным содержимым, мне было достаточно установить высоту всех вкладок на высоту самой высокой из них, в моем случае это #fragment-1.

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

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

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

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

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

Вместо этого я вошел в CSS и изменил класс UI-Tabs, чтобы добавить «переполнение: auto»; как ниже

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

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

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

ХТХ

Answer 9

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

пример:

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

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

Answer 11

Проверьте URL-адрес:

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

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