Пользовательский интерфейс JQUERY UI Accordion Resize при изменении размера окна?

Question

Я использую модуль Jquery UI Accordion:

<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

Set autoHeight: 'содержание' в аккордеоне decalaration. Это позволит сделать ДИВ использовать нативную высоту содержимого: для получения дополнительной информации

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

Смотрите здесь: http://jqueryui.com/accordion/#no-auto-height

Answer 4

других решений, размещенных не работаем для меня, хотя они были близки.

Определите аккордеон с помощью heightStyle: заполнить, например, так:

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