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

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

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

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

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

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

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

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

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

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

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

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

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree