Проблема с заполнением пространства аккордеона пользовательского интерфейса jquery

У меня есть div с эффектом аккордеона в контейнере div, я хочу, чтобы div аккордеона был заполнен контейнером div

Итак, я узнал из загружаемой демонстрации, как сделать fillSpace: true контейнере div, я пишу:

.resizable({
       resize: function () {
       $(".accordion").accordion("resize");
});

а также контейнер добавить некоторый класс jquery ui, например "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"

но проблема возникла, когда я перетаскиваю и изменяю размер контейнера, независимо от того, длиннее или короче внутренний аккордеон только становится длиннее,

Итак, как я могу решить эту проблему? вот онлайн-кейс

Спасибо


user-interface jquery accordion
person hh54188    schedule 11.12.2010    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Есть пара проблем. Как уже упоминалось, размер заголовка не изменяется должным образом при изменении размера портлета. Это потому, что заголовок имеет фиксированную ширину. Используйте 100% ширину следующим образом:

.portlet-header{ width:100%; height:25px;position:relative; }

Основная проблема заключается в том, что при изменении размера размер блока div portlet-content изменяется не, а только у главного портлета. Итак, когда вы просите аккордеон изменить размер контейнера, на самом деле он не больше. Вам нужно сделать так, чтобы содержимое портлета заполнило div портлета. Если вы сделаете это:

.portlet-content { overflow:auto; height: 100%; }

Высота div содержимого будет равна высоте div портала, что неверно (поскольку при этом не учитывается размер заголовка).

Вот решение на JavaScript, которое изменяет размер div portlet-content:

$(".portlet").resizable({
    resize: function () {
        var height = $(".portlet").height() - $(".portlet-header").height();
        $(".portlet-content").height( height );
        $(".accordion").accordion("resize");
    }
});

Вы также можете использовать событие «стоп», а не «изменение размера», если хотите, чтобы автоматическое изменение размера происходило только после завершения операции изменения размера.

person jthompson    schedule 11.12.2010
comment
Спасибо за решение моей проблемы. На самом деле в моем реальном проекте размер заголовка правильный, просто для простоты здесь, чтобы вы его хорошо поняли, поэтому я вырезал много html-кода :) - person hh54188; 12.12.2010

arrow_upward

arrow_downward

person    schedule
comment
e …… возможно, вы не поняли, что я имею в виду …… div-аккордеон не может подключиться к внешнему контейнеру при изменении размера контейнера, а не проблема заголовка - person hh54188; 11.12.2010