JQUERY UI Accordion Resize при изменении размера окна?

Я использую модуль 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, аккордеон занимает всю высоту окна, которую я хочу. Проблема в том, что он вычисляет высоту при загрузке страницы, и если пользователь изменяет размер своего браузера, он не настраивается...

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

Спасибо


jquery accordion jquery-ui jquery-plugins
person AnApprentice    schedule 11.03.2010    source источник

Ответы (4)


arrow_upward
21
arrow_downward 

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

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

$(window).resize(function(){
    $("#sidebar_column_accordion").accordion("refresh");
});
person PetersenDidIt    schedule 11.03.2010
comment
Это кажется легким! Я попробую это сегодня вечером и вернусь. спасибо - person AnApprentice; 11.03.2010
comment
Вы нашли это где-то в документе? Я не могу найти это нигде? - person AnApprentice; 11.03.2010
comment
Не похоже, что в документах это показано, но демо-источник показывает пользователю метод изменения размера для аккордеона. jqueryui.com/demos/accordion/#fillspace - person PetersenDidIt; 11.03.2010
comment
Спасибо, это сработало невероятно. Плохо, что у них нет этого в документах! - person AnApprentice; 12.03.2010
comment
Начинаю немного раздражать, что jQuery всегда осуждает все, но в любом случае это работает только при увеличении окна, а не меньшем. - person Vincent; 17.06.2016

arrow_upward
4
arrow_downward

Похоже, это было обновлено до «обновить».

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

arrow_upward
0
arrow_downward

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

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

Подробнее см. здесь: http://jqueryui.com/accordion/#no-auto-height

person jonnow    schedule 18.07.2013

arrow_upward
0
arrow_downward

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

Определите свой аккордеон, используя 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();
});
person Vincent    schedule 17.06.2016