Аккордеон пользовательского интерфейса jQuery с панелью, которая содержит прокручиваемый контент и фиксированный заголовок

Я хотел бы иметь аккордеон с панелью с фиксированным заголовком со средством выбора даты и прокручиваемым содержимым, в то время как для аккордеона значение fillspace равно true. Таким образом, панель аккордеона, называемая panel-hmmm, не должна прокручиваться, а div внутри, называемый scrollable-content, должен.

<div id="accordion-west">
    <h3>
        <a href="#">hmmm</a>
    </h3>
    <div class="panel-hmmm">
        <div class="date-picker">
        </div>
        <div class="scrollable-content">
            <b>Accordion inside a layout-pane</b>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum
                neque a velit laoreet dapibus. Etiam eleifend tempus pharetra.</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
        </div>
    </div>
    <h3>
        <a href="#">chips</a>
    </h3>
    <div>
        <p style="font-weight: bold;">
            Sed Non Urna</p>
        <p>
            Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit,
            dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus
            libero ac justo.</p>
        <p>
            Vivamus non quam. In suscipit faucibus urna.</p>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $('.panel-hmmm .date-picker').datepicker();
        $("#accordion-west").accordion({
            fillSpace: true
        });
    });
</script>

jquery accordion jquery-ui jquery-ui-accordion
person nabbed    schedule 18.07.2010    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я не совсем уверен, что именно вы хотите, но попробуйте добавить этот CSS. Отрегулируйте высоту, чтобы она соответствовала нужной области.

.panel-hmmm {
 overflow: scroll;
 height: 300px;
}

Замените .panel-hmmm на .ui-accordion-content, чтобы применить все панели аккордеона.

Обновление: учитывая, что вы хотите, чтобы средство выбора даты всегда было видно, когда панель открыта, я бы переключил CSS на:

.scrollable-content {
 overflow: scroll;
 height: 300px;
}

Высота этого прокручиваемого содержимого должна быть установлена, иначе он сохранит свою полную высоту. В демо, которое я настроил, панель аккордеона уходила со страницы без какого-либо CSS, поэтому я изначально установите .panel-hmmm на определенную высоту.

person Mottie    schedule 18.07.2010
comment
мне нужен указатель даты, который всегда виден, и панель прокрутки под ним на панели в аккордеоне. Panel-hmmm должна иметь нефиксированную высоту, чтобы она могла заполнить пространство, в котором содержится аккордеон. Поэтому, когда размер окна изменяется, высота аккордеона и, следовательно, панели изменяется. Добавление этого css фиксирует высоту div, который содержит как указатель даты, так и прокручиваемый контент. я просто хочу, чтобы div с прокручиваемым контентом прокручивался - person nabbed; 19.07.2010
comment
Я обновил свой ответ выше. Надеюсь, это будет больше похоже на то, что вы хотите. :) - person Mottie; 19.07.2010
comment
хорошо, это круто. все, что мне нужно сейчас, я думаю, это заставить высоту прокручиваемого содержимого динамически заполнять пространство в .panel-hmmm. Высота .scrollable-content = высота .panel-hmmm - высота .date-picker. Я бы хотел применить эту формулу, но у аккордеона нет события изменения размера, верно? Есть идеи? - person nabbed; 20.07.2010