jQuery UI Tabs - Automatische Höhe

Question

In früheren Versionen von jQuery tabs gibt es eine Option, um automatisch die Höhe der Lasche, dass der höchsten Registerkarte in der Gruppe gesetzt werden:

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

Doch dies scheint nicht in jQuery UI 1.5.3 zu arbeiten.

Ist diese Option entfernt worden? Wenn dies der Fall ist, gibt es eine weitere Möglichkeit, die gleiche Funktionalität zu erhalten?

Answer 1

Es sieht aus wie es nicht mehr da ist, dieses Plugin Check-out für die gleiche Funktionalität

Equal Heights Plugin

Answer 2

Alles, was Sie tun müssen, ist eine min-height einzustellen. (Es ist mir genommen Alter die Antwort auf diese zu finden .. Ich hoffe, es hilft!).

Hier ist mein Code, das wirklich funktioniert:

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

Answer 3

In jQuery 1.9, verwenden Sie das Attribut heightStyle ( docs hier )

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

Answer 4

Nach der Lektüre über die Dokumentation , scheint es, dass Option ist nicht mehr verfügbar. Es ist jedoch sehr leicht, diese Funktionalität zu replizieren.

Ihre Laschen angeordnet sind, horizontal Angenommen:

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

Answer 5

Das Beispiel von gabriel gab mir die richtige Führung, aber ich konnte es nicht genau so zu arbeiten. Wenn bei der Quellcode Beispiel der jQuery-Dokumentation suchen Sie feststellen, dass der HTML-Code soll wie folgt aussehen:

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

Wie ich habe 3 Registerkarten, die Inhalte, die eher statisch sind, für mich war es genug, um die Höhe aller Registerkarten auf die Höhe der höchsten eins zu setzen, die # Fragment-1 in meinem Fall ist.

Dies ist der Code, der tut dies:

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

Answer 6

Die Antwort von Giannis ist korrekt für die unter den Registerkarten, um die höchste Höhe bekommen, aber den Code fehlt, um tatsächlich diese Lösung anzuwenden. Sie müssen einen Weg hinzufügen, um die ersten Reiter erneut anzuzeigen (die durch den Code verschwunden sein wird) und eine Möglichkeit, die Höhe jedes der Inhaltsbereiche eingestellt werden.

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

Ich war gerade für diese Lösung suchen, und eine min-Höheneinstellung ist nur dann gut, wenn Sie wissen, wie hoch die Mindesthöhe im Voraus sein sollte.

Stattdessen ging ich in die CSS und verändern die ui-tabs Klasse hinzufügen „overflow: auto;“ wie unten

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

Das in FF12 funktioniert für mich ... Ich habe versucht, es in anderen nicht. Wenn dies funktioniert, können Sie möchten eine eigene Klasse erstellen Aktien Funktionalität und Thematisierung Austauschbarkeit usw.

zu erhalten

BTW - der Grund, warum Sie dynamische Dimensionierung benötigen könnte, ist, wenn Sie von Ajax einlegen, aber die Registerkarte Loader-Methode nicht verwenden, sondern eine andere Funktion (ihre Methode geht davon aus Sie Inhalte aus einer URL-Ressource kommt, die nicht sein kann ausreichend, je nachdem wie fortgeschritten Sie dynamische Bevölkerung ist).

HTH

Answer 9

Tab Mindesthöhe und die Größe Eigenschaft auf keine ...

Beispiel:

$("#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

Überprüfen Sie die URL:

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

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