Бібліотека jQuery UI. Віджет Tabs

Від автора: вітаю вас, друзі. У цій статті ми з вами продовжимо знайомитися з бібліотекою jQuery UI. У статті ми дізнаємося, як за допомогою плагіна Tabs швидко організувати вкладки на сторінці.

Вкладки (таби, tabs) – це досить поширена штука на сучасних сайтах. Особливо часто вкладки можна побачити на сторінках інтернет-магазинів, де картки для товарів можна компактно розмістити великий обсяг інформації: опис товару, його характеристики, фотографії, відгуки і т. п.

Вкладки як би групують великі обсяги даних, роблячи сторінку компактною і зручною для відвідувачів. Давайте спробуємо створити такі вкладки, використовуючи віджет Tabs бібліотеки jQuery UI.

Для роботи з плагіном Tabs нам потрібно створити певну структуру даних, певну розмітку. Назви вкладок повинні представляти із себе списку ul. Кожен елемент списку – це посилання, яка за якоря буде пов’язана з вмістом тієї чи іншої вкладки. Ну а вміст вкладки – це блок div id, відповідним якорів посилань. Загалом, нижче необхідна нам розмітка:

При цьому в браузері ми зараз побачимо ось таку непоказну картину:

Але варто нам звернутися до методу tabs() однойменного плагіна, як картина чудесним чином зміниться.

$(function(){
$(‘#tabs’).tabs();
});

Тепер дані компактно згруповані по вкладках, між якими можна перемикатися, отримуючи вміст вибраної вкладки. Дуже зручно.

В API документації ми можемо знайти додаткові налаштування віджета Tabs. Наприклад, не завадило б додати ефекти анімації при перемиканні вкладок. Це можна зробити наступним чином:

$(function(){
$(‘#tabs’).tabs({
show: { effect: “fade”, duration: 300 },
hide: { effect: “fade”, duration: 300 },
});
});

Тепер перемикання між вкладками відбувається плавно і виглядає привабливо. На цьому сьогодні все. Вихідні коди до статті ви можете завантажити за посиланням. Більше про jQuery і бібліотеці jQuery UI ви можете дізнатися з наших уроків або курсу. Удачі!