it-swarm.com.de

Wie können Sie die Höhe eines jQuery-UI-Akkordeons einstellen?

In meiner Benutzeroberfläche habe ich ein Akkordeon-Setup wie folgt:

<div id="object_list">
    <h3>Section 1</h3>
    <div>...content...</div>

    // More sections
</div>

Das Akkordeon funktioniert einwandfrei, wenn es zum ersten Mal gebildet wird, und es scheint sich für den Inhalt in jedem der Abschnitte gut einzustellen. Wenn ich jedoch nach dem Aufruf von .accordion () (über Ajax) mehr Inhalt zum Akkordeon hinzufüge, endet der innere Bereich für den Abschnitt überfüllt.

Da das Akkordeon fast ohne Inhalt gebildet wird, sind alle inneren Divs extrem klein, und daher läuft der Inhalt über, und Sie erhalten Akkordeons mit Bildlaufleisten und fast ohne Sichtbereich. 

Ich habe versucht, min-height-Stile zum object_list div hinzuzufügen, und der Inhalt divs vergebens. Das Hinzufügen der Min-Höhe zu den inneren divs funktionierte zwar, aber die Animationen des Akkordeons wurden durcheinandergebracht, und das Hinzufügen zu object_list div tat absolut nichts.

Wie kann ich aus den Inhaltsabschnitten eine angemessene Größe erhalten, auch wenn nicht genügend Inhalt vorhanden ist, um diese Abschnitte zu füllen?

37
KallDrexx

Wenn Sie das Akkordeon-Steuerelement div deklarieren, können Sie dem style-Tag für das div eine Höhe hinzufügen. Dann können Sie die fillSpace: true - Eigenschaft festlegen, um das Akkordeon-Steuerelement zu zwingen, diesen Div-Bereich auf jeden Fall zu füllen. Dies bedeutet, dass Sie die Höhe auf die für Sie optimale Seite einstellen können. Sie können dann die Höhe des div ändern, wenn Sie Ihren Code hinzufügen

Wenn Sie möchten, dass das Akkordeon bei Bedarf dynamisch an den Inhalt angepasst wird, können Sie den folgenden Trick ausführen: auf der jQuery-Benutzeroberfläche veröffentlicht .

//getter
var autoHeight = $( ".selector" ).accordion( "option", "autoHeight" );
//setter
$( ".selector" ).accordion( "option", "autoHeight", false );

Das heißt, wenn Sie einen Bereich mit viel Text auswählen, wird er vom Akkordeon neu berechnet.

34
ICodeForCoffee

autoHeight wurde in 1.9 veraltet und in 1.10 entfernt.

Benutzen:

$('#id').accordion({heightStyle: 'content'});

um Ihre innere Größe automatisch zu bestimmen.

UPDATE:

Ich sehe, dass dies immer noch ein aktiver Beitrag ist, und ich entschied mich dafür zu sorgen, dass meine Antwort noch gültig ist. Es sieht so aus, als könnte dies in jQuery UI 1.11 nicht mehr funktionieren. Es stellt fest, dass die [content] -Eigenschaft veraltet ist und stattdessen [panel] verwendet wird. Das Code-Snippet sieht nun etwa wie folgt aus:

$('#id').accordion({heightStyle: 'panel'});

Ich habe das noch nicht getestet, nur gefunden und werde diesen Kommentar zurückgeben und entfernen, wenn ich Zeit zum Testen habe

66
Keerigan

Aus den Dokumenten es klingt, als müssten Sie einstellen

clearStyle: true

...und auch

autoHeight: false

Ich glaube, dass Sie mit clearStyle Inhalte dynamisch hinzufügen können, ohne dass Accordion im Weg ist.

Also probier das aus ...

$( ".selector" ).accordion({ clearStyle: true, autoHeight: false });
18
Ben Coppock

Es sieht so aus, als würden jetzt alle Antworten veraltete Optionen verwenden.

Mit der neuesten Version von jQuery UI (1.10.x) sollten Sie Ihr Akkordeon mit heightStyle: "fill" initialisieren, um die gewünschte Wirkung zu erzielen.

$(".selector").accordion({ heightStyle: "fill" });

Weitere Informationen finden Sie in den jQuery-UI-API-Dokumenten: http://api.jqueryui.com/accordion/#option-heightStyle

Wenn sich Ihre Seitendimensionen dynamisch ändern und Sie Ihre Akkordeongröße neu berechnen müssen, sollten Sie Ihr Akkordeon mit der refresh-Methode aktualisieren:

$(".selector").accordion("refresh");

Dies wird bevorzugt, da die resize-Methode jetzt veraltet ist.

15
nullability

Das Einstellen der Höhe des DIV macht den Trick. 

$(document).ready(function() {

    $("#accordion").show().accordion({
        autoHeight: false
    });

    $("#accordion div").css({ 'height': 'auto' });
});      
4
Arun Banik

Das Ausschalten von Auto funktioniert ... (mit einer beliebigen Zeichenfolge außer Auto oder Fill), z. B. die Lösung, die "Panel" verwendet. Aber...

Das ist das Gleiche wie das Einfügen einer beliebigen Zeichenfolge für "heightStyle". Der "heightStyle", den Sie suchen, ist "content".

(Werte für die Option "heightStyle" in der jQuery-Benutzeroberfläche 1.12)

  • "auto": Alle Panels werden auf die Höhe des höchsten Panels gesetzt.
  • "fill": Erweitern Sie sich auf die verfügbare Höhe basierend auf der übergeordneten Höhe des Akkordeons.
  • "content": Jedes Panel ist nur so groß wie sein Inhalt.

Beispiel: https://jsfiddle.net/qkxyodpq/5/

Hoffentlich hilft das.

1
phyatt

Suchen Sie in Ihrem jquery-ui.js nach dem folgenden Abschnitt und ändern Sie heightstyle: "auto" in heightstyle: "content", damit die aktualisierte Datei so aussieht.

var accordion = $.widget( "ui.accordion", {
  version: "1.11.4",
  options: {
    active: 0,
    animate: {},
    collapsible: false,
    event: "click",
    header: "> li > :first-child,> :not(li):even",
    heightStyle: "content",
    icons: {
        activeHeader: "ui-icon-triangle-1-s",
        header: "ui-icon-triangle-1-e"
    },

    // callbacks
    activate: null,
    beforeActivate: null
},
1
Munish Kumar

Ich habe vor kurzem ein Akkordeon eingerichtet, das über ajax Inhalte abruft, wenn ein Tab aktiviert ist und das gleiche Problem auftritt. Ich habe versucht, einige der hier veröffentlichten Vorschläge zu verwenden, aber sie haben das Panel nie richtig erweitert, bis ich den heightStyle auf Inhalt gesetzt habe.

$("#myaccordion").accordion({
  heightStyle: "content",
  activate: function(event ui) {
    //use ajax to retrieve content here.
  }
});

Ich verwende jQuery-UI Version 1.10.4.

0
Robbert

Rufen Sie einfach die Akkordeons .resize()-Methode auf, um die Größe neu zu berechnen. http://docs.jquery.com/UI/Accordion#method-resize

0
Sean Kinsey

für mich funktionierte das Folgende genau.

$( "#accordion" ).accordion({
    autoHeight: false,

});

0
R T