От автора: приветствую вас, друзья. В этой статье мы с вами продолжим знакомиться с библиотекой jQuery UI. В статье мы узнаем, как с помощью плагина Tabs быстро организовать вкладки на странице.
Вкладки (табы, tabs) – это достаточно распространенная штука на современных сайтах. Особенно часто вкладки можно увидеть на страницах интернет-магазинов, где для карточки товаров можно компактно разместить большой объем информации: описание товара, его характеристики, фотографии, отзывы и т.п.
Вкладки как бы группируют большие объемы данных, делая страницу компактной и удобной для посетителей. Давайте попробуем создать такие вкладки, используя виджет Tabs библиотеки jQuery UI.
Для работы с плагином Tabs нам потребуется создать определенную структуру данных, определенную разметку. Названия вкладок должны представлять из себя список ul. Каждый элемент списка – это ссылка, которая по якорю будет связана с содержимым той или иной вкладки. Ну а контент вкладки – это блок div с идентификатором, соответствующим якорям ссылок. В общем, ниже необходимая нам разметка:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div id="tabs"> <ul> <li><a href="#tabs-1">Вкладка 1</a></li> <li><a href="#tabs-2">Вкладка 2</a></li> <li><a href="#tabs-3">Вкладка 3</a></li> </ul> <div id="tabs-1"> <h2>Контент вкладки 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, labore!</p> </div> <div id="tabs-2"> <h2>Контент вкладки 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, labore!</p> </div> <div id="tabs-3"> <h2>Контент вкладки 3</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, labore!</p> </div> </div> |
При этом в браузере мы сейчас увидим вот такую невзрачную картину:
Но стоит нам обратиться к методу tabs() одноименного плагина, как картина чудесным образом преобразится.
|
1 2 3 |
$(function(){ $('#tabs').tabs(); }); |
Теперь данные компактно сгруппированы по вкладкам, между которыми мы можем переключаться, получая содержимое выбранной вкладки. Очень удобно.
В API документации мы можем найти дополнительные настройки виджета Tabs. Например, не помешало бы добавить эффектов анимации при переключении вкладок. Это можно сделать следующим образом:
|
1 2 3 4 5 6 |
$(function(){ $('#tabs').tabs({ show: { effect: "fade", duration: 300 }, hide: { effect: "fade", duration: 300 }, }); }); |
Теперь переключение между вкладками происходит плавно и смотрится привлекательно. На этом сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!
