Від автора: вітаю вас, друзі. У цій статті ми з вами продовжимо знайомитися з бібліотекою jQuery UI. У статті ми дізнаємося, як за допомогою плагіна Tabs швидко організувати вкладки на сторінці.
Вкладки (таби, tabs) – це досить поширена штука на сучасних сайтах. Особливо часто вкладки можна побачити на сторінках інтернет-магазинів, де картки для товарів можна компактно розмістити великий обсяг інформації: опис товару, його характеристики, фотографії, відгуки і т. п.
Вкладки як би групують великі обсяги даних, роблячи сторінку компактною і зручною для відвідувачів. Давайте спробуємо створити такі вкладки, використовуючи віджет Tabs бібліотеки jQuery UI.
Для роботи з плагіном Tabs нам потрібно створити певну структуру даних, певну розмітку. Назви вкладок повинні представляти із себе списку ul. Кожен елемент списку – це посилання, яка за якоря буде пов’язана з вмістом тієї чи іншої вкладки. Ну а вміст вкладки – це блок div id, відповідним якорів посилань. Загалом, нижче необхідна нам розмітка:
- Вкладка 1
- Вкладка 2
- Вкладка 3
Вміст вкладки 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex,
labore!
Вміст вкладки 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex,
labore!
Вміст вкладки 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex,
labore!
При цьому в браузері ми зараз побачимо ось таку непоказну картину:
Але варто нам звернутися до методу tabs() однойменного плагіна, як картина чудесним чином зміниться.
$(function(){
$(‘#tabs’).tabs();
});
Тепер дані компактно згруповані по вкладках, між якими можна перемикатися, отримуючи вміст вибраної вкладки. Дуже зручно.
В API документації ми можемо знайти додаткові налаштування віджета Tabs. Наприклад, не завадило б додати ефекти анімації при перемиканні вкладок. Це можна зробити наступним чином:
$(function(){
$(‘#tabs’).tabs({
show: { effect: “fade”, duration: 300 },
hide: { effect: “fade”, duration: 300 },
});
});
Тепер перемикання між вкладками відбувається плавно і виглядає привабливо. На цьому сьогодні все. Вихідні коди до статті ви можете завантажити за посиланням. Більше про jQuery і бібліотеці jQuery UI ви можете дізнатися з наших уроків або курсу. Удачі!