JQUERY UI Аккордеон Изменение размера окна Изменение размера?

Question

Я использую Аккордеонный модуль JQUERY UI:

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

Используя опцию fillSpace, аккордеон занимает всю высоту окна, которое я хочу. Проблема в том, что он вычисляет высоту при загрузке страницы, и если пользователь изменяет размер своего браузера, он не корректирует ...

Есть ли способ заставить аккордеон пересчитать высоту / размер при изменении размера окна браузера?

Спасибо

Answer 1

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

В jQuery UI 1.9 метод изменения размера был удален. Был добавлен метод обновления, который является более надежным и в этом случае будет работать.

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

Answer 2

Похоже, что это было обновлено, чтобы "обновить"

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

Answer 3

Другие опубликованные решения не работают для меня, хотя они были близки.

Определите свой аккордеон, используя heightStyle: fill, вот так:

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

Создайте функцию для расчета и установки высоты. Обратите внимание, что я должен был сделать и то и другое, установить высоту и затем вызвать обновление на гармошке. Один не будет работать без другого.

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

Вызовите эту функцию как при загрузке страницы, так и при изменении размера окна.

calculateHeight();

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

Answer 4

Установить autoHeight: «содержание» в декальерации аккордеона. Это заставит div использовать собственную высоту содержимого:

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

Смотрите здесь для получения дополнительной информации: http://jqueryui.com/accordion/#no-auto-height