vertical - Pestañas jQuery UI-Altura automática

que es jquery ui

Question

En las versiones anteriores de las jQuery tabs existía una opción para establecer automáticamente el alto de la pestaña a la de la pestaña más alta del grupo usando:

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

Sin embargo, esto no parece funcionar en jQuery UI 1.5.3 .

¿Se ha eliminado esta opción? Si es así, ¿hay otra forma de obtener la misma funcionalidad?

Answer 1

Después de leer la documentación , parece que esa opción ya no está disponible. Sin embargo, es muy fácil replicar esta funcionalidad.

Suponiendo que tus pestañas están dispuestas horizontalmente:

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

Answer 2

Parece que ya no está allí, mira este complemento para la misma funcionalidad

Plugin Equal Heights

Answer 3

El ejemplo de Gabriel me dio la pista correcta, pero no pude lograr que funcionara exactamente así. Al mirar el ejemplo del código fuente de la documentación de jQuery, verá que se supone que el código HTML debe verse así:

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

Como tengo 3 pestañas que tienen un contenido bastante estático, para mí fue suficiente para establecer la altura de todas las pestañas a la altura de la más alta, que es # fragment-1 en mi caso.

Este es el código que hace esto:

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

Answer 4

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 5

La respuesta de Giannis es correcta para obtener la altura más alta entre las pestañas, pero falta el código para aplicar realmente esa solución. Debe agregar una forma de volver a mostrar la primera pestaña (que desaparecerá con el código) y una forma de establecer la altura de cada una de las áreas de contenido.

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 6

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 7

Solo estaba buscando esta solución, y establecer una altura mínima solo es bueno si sabes qué tan alta debe ser la altura mínima por adelantado.

En cambio, entré al css y cambié la clase ui-tabs para agregar "overflow: auto;" como a continuación

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

Esto funciona para mí en FF12 ... No lo he probado en otros. Si esto funciona, es posible que desee crear una clase separada para preservar la funcionalidad de stock y intercambiabilidad de tematización, etc.

Por cierto, la razón por la que podrías necesitar un tamaño dinámico es si estás cargando desde Ajax, pero no usando el método de cargador de pestañas, sino más bien otra función (su método supone que tu contenido proviene de un recurso de url que puede no ser suficiente dependiendo de cuán avanzada es tu población dinámica).

HTH

Answer 8

En jQuery 1.9, use el atributo heightStyle ( documentos aquí )

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

Answer 9

Establezca la altura mínima de tabulación y la propiedad de cambio de tamaño en ninguna ...

ejemplo:

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

Answer 10

Todo lo que tienes que hacer es establecer una altura mínima. (Me ha llevado años encontrar la respuesta a esto ... ¡Espero que ayude!).

Aquí está mi código que realmente funciona:

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

Answer 11

Verifique la url:

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

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