JQUERY UI Accordion redimensionner sur la fenêtre Redimensionner?

Question

J'utilise le module d'accordéon JQuery UI:

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

En utilisant l'option fillSpace, l'accordéon prend toute la hauteur de la fenêtre que je veux. Problème est-il calculer la hauteur au chargement de la page, et si l'utilisateur redimensionne leur navigateur, il ne s'ajuste pas ...

Y a-t-il un moyen pour que l'accordéon recalcule la taille/taille lorsque la fenêtre du navigateur est redimensionnée?

Merci

Answer 1

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

Dans jQuery UI 1.9 la méthode de modification de taille a été supprimée. La méthode de rafraîchissement a été ajoutée, qui est plus robuste et fonctionnera dans ce cas également.

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

Answer 2

On dirait que cela a été mis à jour pour "rafraîchir"

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

Answer 3

Set autoHeight: 'contenu' dans le decalaration accordéon. Cela fera la div utiliser la hauteur native du contenu:

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

Voir ici pour plus d'informations: http://jqueryui.com/accordion/#no-auto-height

Answer 4

Les autres solutions ne fonctionnent pas affichées pour moi, mais ils étaient proches.

votre accordéon en utilisant Define heightStyle: remplir, comme ceci:

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

Créer une fonction pour calculer et régler la hauteur. Notez que je devais faire les deux, régler la hauteur et ensuite appeler rafraîchir sur l'accordéon. L'un ne fonctionnera pas sans l'autre.

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

Appelez cette fonction à la fois sur le chargement de la page et sur le redimensionnement de la fenêtre.

calculateHeight(); 

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