Модификация позволяет создавать кастомные табы из Zero-блоков — с активными вкладками, управлением кнопками и настраиваемой анимацией
Как работает модификация
Общие механики
Модификация управляет видимостью блоков и отдельных элементов по клику на заданные ссылки. Вкладки и переключаемый контент помещаются в общий контейнер, который содержит параметры и стили модификации и используется для управления табами. В качестве переключаемого контента могут выступать как целые блоки, так и группы Object.
Переключение контента осуществляется за счёт css-свойств display и opacity, плавность которых регулируется параметрами transition и easing.
Если вкладка открыта, ей присваивается класс .selected. Активной и неактивной стрелке присваиваются классы .active и .inactive соответственно. При наличии в блоках базовой или SBS-анимации, она проигрывается при каждом переключении.
Табы со вкладками и стрелками
Классический вариант табов, который переключает вкладки по кнопкам и стрелкам, находящимся в отдельном блоке. Для кнопок используются ссылки #tab, для стрелок #prev и #next.
Подробнее: Табы со вкладками и стрелками
Переключатель Zero-блоков по кнопкам
Вариант классических табов, в котором кнопки #tab находятся внутри переключаемых блоков. Подходит для случаев, когда контент нужно расположить сбоку от вкладок.
Подробнее: Переключатель Zero-блоков по кнопкам
Переключатель контента в Zero-блоке
Переключатель, в котором все вкладки и контент находится в рамках одного Zero-блока. Данный вариант можно использовать не только, как вкладки, но и добавлять эффекты и анимации в Zero-блок. Настраивается и работает так же, как и классические табы.
Подробнее: Переключатель контента в Zero-блоке
Начало работы
Установка библиотеки
Для работы вкладок необходимо подключить библиотеку модификаций в <head> сайта. Скрипт устанавливается только один раз и автоматически загружает нужный мод при вызове функции.
<script src="https://cdn.postnikovmd.com/tilda@1.4/mods.min.js"></script>Альтернативный способ установки предполагает встраивание исполняемого кода непосредственно перед инициализацией вкладок. Подробнее: Синхронизация обновлений в модификациях
Дальнейшая настройка производится по инструкции к каждому из вариантов:
Элементы
Ниже приведены элементы, из которых состоят Zero-вкладки. Они задаются и настраиваются в интерфейсе Тильды.
Классические табы со вкладками и стрелками:
* – обязательные элементы
Переключатель Zero-блоков по кнопкам:
* – обязательные элементы
Переключатель контента в Zero-блоке:
* – обязательные элементы
Функции и параметры
Методы, с помощью которых можно управлять работой табов. Подгружаются асихнронно как функции объекта tabs.
В качестве аргументов для настройки вкладок передаются параметры:
Стили
В params.style можно также передавать стили табов и их элементов. Они преобразовываются в css-переменные и отображаются при запуске мода.
События
Пользовательские события позволяют управлять последовательностью инициализации модификаций и используются для совмещения нескольких модов или стороннего кода. Их можно использовать, чтобы:
Запустить вкладки по срабатыванию события
Отложить инициализацию табов можно с помощью параметров event и timeout. Например, запустить их через 100ms после срабатывания customEvent можно таким образом:
Отложить инициализацию табов можно с помощью параметров event и timeout. Например, запустить их через 100ms после срабатывания customEvent можно таким образом:
tabs.init(".uc-tabs", { event: "customEvent", timeout: 100 })Если модификация должна запуститься после срабатывания сразу нескольких событий, достаточно перечислить их через запятую: event: "customEvent1, customEvent2, customEvent3".
Запустить сторонний код после отрисовки вкладок
Если код нужно выполнить после того, как табы полностью запустятся, добавьте слушатель события tabsinit-id, где tabsinit – событие их отрисовки, id – класс блока со слайдером без префикса uc или rec. Например, если у блока со слайдером класс .uc-tabs1, то слушатель события добавляется следующим образом:
Если код нужно выполнить после того, как табы полностью запустятся, добавьте слушатель события tabsinit-id, где tabsinit – событие их отрисовки, id – класс блока со слайдером без префикса uc или rec. Например, если у блока со слайдером класс .uc-tabs1, то слушатель события добавляется следующим образом:
window.addEventListener("tabsinit-tabs1", function(){ ... })Запустить другую модификацию после отрисовки вкладок
Логика работы пользовательских событий одинакова для всех модификаций и помогает интегрировать их друг с другом. Например, запустить вкладки после отрисовки слайдера можно через событие sliderinit:
Логика работы пользовательских событий одинакова для всех модификаций и помогает интегрировать их друг с другом. Например, запустить вкладки после отрисовки слайдера можно через событие sliderinit:
tabs.init(".uc-slider", { event: "sliderinit-slider" })Инициализация
Код инициализации вкладок вставляется в блок T123 в конец страницы. Его можно скопировать в генераторе кода или добавить на страницу вручную. В исходном виде он выглядит таким образом:
<!--tabs.js Вкладки в Zero-блоке. https://postnikovmd.com/mods/tabs-->
<script>tabs.init(".uc-tabs")</script>Примеры использования
Табы со вкладками и стрелками
Классический вариант табов: вкладки, состоящие из шейпов #tab и текстовых элементов .tab-elem, помещаются в хэдер .uc-tabs-header, а переключаемые блоки .uc-tabs располагаются под ними. Стили состояний для вкладок и элементов настраиваются в генераторе кода:
<script>tabs.init(".uc-tabs", { transition: 200, style: { active: { backgroundColor: "#FFFFFF" }, elems: { opacity: 0.4 } } })</script>Пример: Табы со вкладками и стрелками
Табы с автолэйаутом
Аналог классических табов, свёрстанный с использованием автолэйаута. Такой вариант визуально не отличим от предыдущего, но добавлять вкладки в интерфейсе намного удобнее:
<script>tabs.init(".uc-tabs", { transition: 200, style: { active: { backgroundColor: "#FFFFFF" }, elems: { opacity: 0.4 } } })</script>Пример: Табы с автолэйаутом
Вкладки со слайдером
Если внутри вкладок находится Zero-слайдер, то запускать табы необходимо только после полной его отрисовки. Добавляем пользовательское событие sliderinit в код инициализации табов:
<!--Инициализируем слайдер-->
<script>slider.init(".uc-slider")</script>
<!--Отслеживаем инициализацию слайдера и запускаем вкладки-->
<script>tabs.init(".uc-tabs", { event: "sliderinit-slider" })</script>Пример: Слайдер внутри Zero-вкладок
Если во вкладках находится несколько слайдеров, то запускать табы необходимо только после полной их инициализации. Для этого в параметре event необходимо указать все пользовательские события sliderinit через запятую.
<!--Инициализируем слайдеры-->
<script>slider.init(".uc-slider1")</script>
<script>slider.init(".uc-slider2")</script>
<script>slider.init(".uc-slider3")</script>
<!--Отслеживаем инициализацию всех слайдеров и запускаем вкладки-->
<script>tabs.init(".uc-tabs", { event: "sliderinit-slider1, sliderinit-slider2, sliderinit-slider3" })</script>Переключатель Zero-блоков по кнопкам
Классические табы, у которых кнопки #tab располагаются непосредственно в переключаемых блоках .uc-tabs. Так как в исходном примере переключается 3 блока, то суммарное количество вкладок должно равняться 9. По инструкции располагаем их в правильном порядке и убираем плавность перехода с помощью параметра transition: 0.
<script>tabs.init(".uc-tabs", { transition: 0 })</script>Переключатель контента в Zero-блоке
Если всё содержимое должно переключаться в рамках одного блока, добавляем вкладки #tab, как группы Object или отдельные элементы, таким же образом создаём переключаемые элементы с классом .tab-elem и при необходимости – вкладки в активном состоянии .tab-active . По инструкции располагаем их в правильном порядке и добавляем параметр hover: true для переключения по наведению.
<script>tabs.init(".uc-tabs", { hover: true })</script>Переключатель контента в поп-апе
Если вкладки находятся внутри кастомного поп-апа, то запускать их необходимо только после его инициализации. Добавляем пользовательское событие popupinit в код инициализации вкладок, а в качестве их селектора указываем ID блока с поп-апом:
<!--Инициализируем кастомный поп-ап-->
<script>popup.init(".uc-tabs", { animation: "zoom", style: { blur: 4 } })</script>
<!--Отслеживаем инициализацию поп-апа и запускаем вкладки-->
<script>tabs.init("#rec1013325591", { event: "popupinit-tabs" })</script>Пример: Переключатель контента в поп-апе
Распространенные проблемы
Вкладки переключаются в случайном порядке
Распространенная проблема, возникающая по следующим причинам:
Не соблюден порядок вкладок в слоях
Модификация чувствительна к расположению вкладок в слоях, так как с помощью этого привязывает их к переключаемому контенту. Проверьте, что вкладки заданы в правильном порядке: первой (нижней в слоях) вкладке будет соответствовать первый переключаемый блок или элемент.
Модификация чувствительна к расположению вкладок в слоях, так как с помощью этого привязывает их к переключаемому контенту. Проверьте, что вкладки заданы в правильном порядке: первой (нижней в слоях) вкладке будет соответствовать первый переключаемый блок или элемент.
Количество вкладок не совпадает с количеством контента
Так как вкладки и контент привязываются по принципу «1 к 1», лишние элементы могут нарушить их порядок. При возникновении такой проблемы, убедитесь, что ссылки #tab и классы .tab-elem заданы у одинакового количества элементов.
Так как вкладки и контент привязываются по принципу «1 к 1», лишние элементы могут нарушить их порядок. При возникновении такой проблемы, убедитесь, что ссылки #tab и классы .tab-elem заданы у одинакового количества элементов.
Вкладки не переключаются совсем
Данная проблема может возникать из-за того, что вкладки перекрывают другие элементы, и взаимодействие с ними становится невозможным. Для решения проблемы убедитесь, что вкладки не перекрываются другими элементами/блоками.
Возникает конфликт с другими модами
Zero-вкладки совместимы с большинством модификаций из исходной библиотеки. Исключение: слайдер, поп-ап, и аккордеон, которые необходимо запускать через пользовательские события.
Модификации других авторов или сторонний код, влияющий на отображение элементов при загрузке (например, скрывающий или перемещающий их), необходимо запускать до инициализации табов.
Если модификация все равно не работает
Добавьте параметр ?showerrors в конец ссылки, чтобы увидеть ошибки и рекомендации по их исправлению, или параметр ?showparams=tabs, чтобы посмотреть настройки и переменные модификации. Данные функции работают на любом сайте с установленной библиотекой.