Модификация находится в бета-версии. Если нашли ошибку, сообщите о ней здесь
Вкладки из Zero-блоков
Позволяет создавать кастомные табы из Zero-блоков — с активными вкладками, управлением кнопками и настраиваемой анимацией
Табы с вкладками и управлением стрелками
Инструкция по установке
- 1Cкопируйте код ниже и вставьте его внутрь <head> в настройках сайтаЭтот код устанавливается только один раз. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг.
<script src="https://cdn.jsdelivr.net/gh/postnikovmd/tilda@1.0.5/tabs.min.js"></script>- 1
- 2Создайте Zero-блок со вкладками и присвойте ему класс .uc-tabs-headerЕсли вы планируете использовать несколько табов на странице, задайте им разные названия классов, оканчивающиеся на -header, например, .uc-tabs1-header, uc-tabs2-header и т. д.
- 3Задайте каждой вкладке ссылку #tabЕсли у вкладок есть дополнительные элементы (шейпы, иконки и др.), присвойте им класс .tab-elem. Они будут исчезать для неактивных вкладок и появляться, когда вкладка станет активной
- 4Создайте блоки, которые будут отображаться при нажатии на вкладки и присвойте им класс .uc-tabsЕсли вы планируете использовать несколько табов на странице, задайте им разные названия классов, например, .uc-tabs1, .uc-tabs2 и т. д.
Первой созданной вкладке будет соответствовать первый Zero-блок. Если вкладки перемешались, попробуйте их скопировать, удалить и вставить заново — в том порядке, в котором стоят соответствующие им Zero-блоки.
Чтобы при нажатии на вкладку отображалось сразу несколько блоков, их количество должно быть кратным количеству вкладок - 5Создайте Zero-блок с кнопками управления и присвойте ему класс .uc-tabs-footer. Для кнопки «вперёд» поставьте ссылку #next, для кнопки «назад» — #prevЕсли вы планируете использовать используете несколько табов на странице, задайте им разные названия классов, оканчивающиеся на -footer, например, .uc-tabs1-footer, .uc-tabs2-footer и т. д.
- 6Задайте в настройках модификации поведение вкладок и их анимацию
- 7Скопируйте код и вставьте его в блок T123 в конец страницы
Видео скоро появится…
Настройки модификации
Настройки модификации
Скорость и тип переходов:
Класс блоков со вкладками:
<script>tabs.init(".uc-tabs")</script>Документация
Параметры
© 2024 Максим Постников. Все права защищены.
Обо мне
Проекты
Блог
Связаться
Модификации
Максим Постников
Столкнулись с ошибкой?
Расскажите подробнее о проблеме, при которой модификация не работает или работает неправильно
Расскажите подробнее о проблеме, при которой модификация работает неправильно
Сообщение отправлено
Спасибо за обращение! Мы провалидируем ошибку и исправим её в ближайшее время
Нравятся модификации?
Поделитесь впечатлениями от работы с библиотекой — обратная связь поможет нам стать лучше
Поделитесь впечатлениями о сервисе — обратная связь поможет нам стать лучше
Сообщение отправлено
Спасибо, что делитесь с нами! Это помогает нам развиваться и улучшать сервис