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

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

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

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

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

Спасибо

Ответы

Ответ 1

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

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

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

Ответ 2

Похоже, что это было обновлено до "refresh" 

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

Ответ 3

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

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

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

Ответ 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();
});