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

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

Спасибо заранее.

ОТВЕТЫ

Ответ 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();
});

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

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

Ответ 2

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

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

Спасибо