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

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

От автора: приветствую вас, друзья. В этой статье мы с вами продолжим знакомиться с библиотекой jQuery UI. В статье мы узнаем, как с помощью плагина Tabs быстро организовать вкладки на странице.

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

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

Для работы с плагином Tabs нам потребуется создать определенную структуру данных, определенную разметку. Названия вкладок должны представлять из себя список ul. Каждый элемент списка – это ссылка, которая по якорю будет связана с содержимым той или иной вкладки. Ну а контент вкладки – это блок div с идентификатором, соответствующим якорям ссылок. В общем, ниже необходимая нам разметка:

<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>

При этом в браузере мы сейчас увидим вот такую невзрачную картину:

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее

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

Но стоит нам обратиться к методу tabs() одноименного плагина, как картина чудесным образом преобразится.

$(function(){
 $('#tabs').tabs();
});

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

Теперь данные компактно сгруппированы по вкладкам, между которыми мы можем переключаться, получая содержимое выбранной вкладки. Очень удобно.

В API документации мы можем найти дополнительные настройки виджета Tabs. Например, не помешало бы добавить эффектов анимации при переключении вкладок. Это можно сделать следующим образом:

$(function(){
 $('#tabs').tabs({
  show: { effect: "fade", duration: 300 },
  hide: { effect: "fade", duration: 300 },
 });
});

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

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree