JQUERY UI Akkordeon Größe bei Fenstergröße ändern?

Question

ich das jQuery UI Akkordeon-Modul:

<script type="text/javascript"> 
$(function() { 
    $("#sidebar_column_accordion").accordion({ 
     fillSpace: true, 
     icons: { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' } 
    }); 
}); 
</script> 

Durch die fillSpace Option nimmt das Akkordeon über die gesamte Höhe des Fensters nach oben, die ich will. Problem ist es, die Höhe beim Laden der Seite zu berechnen, und wenn der Benutzer die Größe des Browsers ändert, wird nicht angepasst ...

Gibt es eine Möglichkeit, das Akkordeon die Höhe/Größe neu berechnen, wenn das Browserfenster die Größe ändert?

Dank

Answer 1

$(window).resize(function(){ 
    $("#sidebar_column_accordion").accordion("resize"); 
}); 

In jQuery UI 1.9 die Resize-Methode entfernt wurde. Die Refresh-Methode wurde hinzugefügt, die robuster ist und auch in diesem Fall funktioniert.

$(window).resize(function(){ 
    $("#sidebar_column_accordion").accordion("refresh"); 
}); 

Answer 2

Es sieht wie folgt aus wurde aktualisiert, um "refresh"

$(function() { 
$("#accordion").accordion({ 
heightStyle: "fill" 
}); 
}); 
$(function() { 
$("#accordion-resizer").resizable({ 
minHeight: 140, 
minWidth: 200, 
resize: function() { 
$("#accordion").accordion("refresh"); 
} 
}); 
}); 

Answer 3

Set Autoheight: 'Inhalt' im Akkordeon decalaration.

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

Sehen Sie hier für weitere Informationen: Das wird die div die native Höhe des Inhalts verwenden, machen http://jqueryui.com/accordion/#no-auto-height

Answer 4

Die anderen Lösungen gepostet hat bei mir nicht funktioniert, obwohl sie in der Nähe waren.

Definieren Sie Ihr Akkordeon mit heightStyle: füllen, etwa so:

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

Erstellen Sie eine Funktion zu berechnen und die Höhe einzustellen. Beachte, dass ich beides machen musste, stelle die Höhe ein und rufe dann das Akkordeon auf. Ohne den anderen geht es nicht.

function calculateHeight(){ 
    var height = $('#maincontent').height(); // Or whatever height you want 
    $('#sidebar_column_accordion').height(height); 
    $('#sidebar_column_accordion').accordion("refresh"); 
} 

Rufen Sie diese Funktion sowohl beim Laden der Seite als auch beim Ändern der Fenstergröße auf.

calculateHeight(); 

$(window).resize(function() { 
    calculateHeight(); 
});