Создание адаптивных виджетов с вкладками с помощью GridTab

Создавать сайты всегда проще инструменты с открытым исходным кодом а не изобретать велосипед. Эти инструменты варьируются от библиотек до небольших плагинов, но вы можете найти решение практически для всего.

Феноменальный плагин jQuery GridTab один прекрасный пример. Это позволяет вам настроить пользовательскую сетку, определить точки останова, а также создать отзывчивый виджет с вкладками подходит для любого сайта.

Вы можете добавить свои собственные классы CSS или работать с существующими, чтобы создать функцию вкладки, которая соответствует вашему дизайну. Этот плагин также поддерживает элементы навигации для элементов управления next / prev а также переключение между вкладками.

Установка очень проста и требует только Библиотека jQuery как зависимость. После установки вы можете получить GridTab с npm или загрузить его прямо с GitHub..

Имейте в виду, что этот плагин виджетов с вкладками имеет стиль по умолчанию, так что у него есть отдельная таблица стилей CSS поверх файла плагина JS. Но вы всегда можете объединить этот CSS с вашим собственным, чтобы уменьшить количество HTTP-запросов..

Чтобы инициализировать плагин, вы просто передаете общий размер сетки вместе с любой необязательный параметр (все перечисленные на GitHub).

Вот простой скрипт инициализации:

 $ (document) .ready (function () $ ('# gridtab-1'). gridtab (grid: 3);); 

Настройки включают пользовательские селекторы, отзывчивые стили, границы / отступы / настройки цвета, и, конечно же, функция обратного вызова.

Возможно, вам будет интересно посмотреть, как все это работает и как это выглядит в вашем браузере. Проверьте “демос” раздел, чтобы увидеть несколько примеров, в том числе необработанный исходный код вы можете скопировать.

Большинство людей считают вкладки функциями для небольших виджетов профиля. тем не мение, портфолио сайтов также может использовать сетки с вкладками и плагин GridTab является лучшим ресурсом для закрепления этого эффекта.

Все, что вам нужно знать, в том числе полная документация, можно найти на главной странице GridTab. Сюда также входит ссылка на репозиторий GitHub, чтобы вы могли просматривать исходный код и начинать настраивать свои собственные адаптивные сетки с вкладками.