Как прокрутить вкладки jQuery ui?

Question

У меня есть div с 600px X 150px, и мне нужно вставить туда вкладки jQuery ui.Там будет только 2 вкладки, но каждая вкладка будет содержать много текста и изображений, но я не хочу изменять размер div.Если я вставлю опцию переполнения в css в div или .ui-tabs, появятся 2 прокрутки - 1 от div и еще один во вкладке, и он прокручивает все панели вкладок.Вопрос: как вставить вертикальную прокрутку в содержимое вкладки?

Заранее спасибо.

Answer 1

Я думаю, у меня есть решение для вас, если я правильно понимаю ваш вопрос. Вот живой пример на jsFiddle.

Я добавил два класса, один из которых применяется к общему элементу вкладки, а другой - к каждой панели вкладок.

.container{
    width: 600px;
}
.panel{
    height: 150px;
    overflow: auto;
}

(Класс container также можно переименовать в ui-tabs, чтобы вы добавили в класс jQuery UI ui-tabs, а класс panel можно переименовать в ui-tabs-panel, чтобы вы добавили в jQuery UI ui-tabs-panel класс.)

Вот наценка, которую я использовал ...

<div class='main'>
    <div id="tabs" class='container'>
        <ul>
            <li><a href="#tabs-1">Tab 1</a></li>
            <li><a href="#tabs-2">Tab 2</a></li>
        </ul>
        <div id="tabs-1" class='panel'>
            <p>tab1 text...</p>
        </div>
        <div id="tabs-2" class='panel'>
            <p>tab2 text...</p>
        </div>
    </div>
</div>

Когда я соединяю это с волшебством вкладки jQuery UI:

$(document).ready(function() {
    $("#tabs").tabs();
});

Я получаю одну полосу прокрутки во вкладке.

Надеюсь, это поможет!

Answer 2

просто используйте css для класса ui-tab-content. Это похоже на добавление кода css в любое место в ваших таблицах стилей, где вы надеетесь, что все будет готово.

.ui-tab-content, .ui-tabs-panel{overflow: auto;}

Спасибо