JQuery UI аккордеон с панелью, которая содержит прокрутку содержимого и фиксированный заголовок - PullRequest
Новая
       9

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

1 голос
/ 18 июля 2010

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

1 Ответ

1 голос
/ 18 июля 2010

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

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

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

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

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

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

...