Вкладки пользовательского интерфейса jQuery: установите вкладки на полный размер страницы

Question

Я думал, что это будет простой проект, но, похоже, он намного сложнее. Поиска бо я пытаюсь создать вкладки jQuery UI, которые занимают всю страницу. Поэтому ширина и высота вкладок должны быть установлены в размере браузера.

Кто-нибудь может предложить какие-либо примеры или учебное пособие по этому вопросу с помощью вкладок пользовательского интерфейса jQuery?

Answer 1

Используя вкладки http://jqueryui.com/demos/tabs/, существует блок верхнего уровня <div>, включающий в себя список, который определяет вкладки, и <div> для каждой вкладки, например:

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
    </ul>
    <div id="tabs-1">Tab 1 Content HERE</div>
    <div id="tabs-2">Tab 2 Content HERE</div>
</div>

Чтобы установить размер виджета со вкладкой, добавьте стиль (атрибут или CSS) вверху <div>:

<div id="tabs" style="width:100%; height:100%">

Какой стиль вы будете применять, будет зависеть от вашего макета страницы.