Как прокрутить jQuery ui вкладки?
У меня есть отделение с 600 пкс X 150 пкс, и я должен вставить там jQuery ui вкладки. Будет только 2 вкладки, но каждая вкладка будет содержать много текста и изображений, но я не хочу изменять размер отделения. Если я вставляю водосливную опцию в CSS отделению, или .ui-вкладки там появляются 2 прокрутки - 1 от отделения и другого на вкладке, и это прокручивает всю панель вкладки. Вопрос: как вставить вертикальную прокрутку в содержание вкладки?
Заранее спасибо.
2 ответа
Думаю, у меня есть решение для вас, если я правильно понял ваш вопрос. Вот живой пример на 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();
});
в итоге я получаю одну полосу прокрутки внутри вкладки.
Надеюсь, это поможет!
просто используйте css для класса ui-tab-content, это как добавить код css в любое место в ваших таблицах стилей, надеюсь, вы закончите.
.ui-tab-content, .ui-tabs-panel{overflow: auto;}
Спасибо