Документация — модификации для Zero-блоков
2025-09-03 10:32

Вкладки в Zero-блоке

Модификации
Zero-вкладки
Документация
10 минут
Модификация позволяет создавать кастомные табы из 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-вкладки. Они задаются и настраиваются в интерфейсе Тильды.
Классические табы со вкладками и стрелками:
Элемент
Описание
Класс/Ссылка
Вкладки*
Элементы/группы Object, при нажатии на которые переключается контент табов. Принимают класс .selected в активном состоянии и чувствительны к расположению в слоях: первой (нижней) вкладке соответствует первый блок с контентом.
#tab
Контент*
Блоки/группы Object, переключающиеся при нажатии на вкладки. Так же, как и вкладки, принимают класс .selected в активном состоянии и чувствительны к расположению в слоях. В классических табах и переключателе блоков в качестве контента используются стандартные и Zero-блоки с классом, указанным в аргументе selector в коде инициализации. При использовании переключателя контента в одном блоке, группам Object задаётся класс .tab-elem.
.uc-tabs
Кнопки
Элементы, при клике на которые выполняется переключение вкладок. Поддерживают изменение фона, бордера и иконки в активном состоянии, для настройки которого обеим кнопкам задаются одинаковые стили, одна из них поворачивается на 180º, после чего в генераторе кода указываются их новые значения. Активной и неактивной стрелке присваиваются классы .active и .inactive соответственно.
#prev, #next
Хэдер табов
Отдельный блок, в котором располагаются вкладки #tab и/или кнопки #prev и #next. Используется только в классическом варианте и располагается строго перед самими вкладками. Класс футера задаётся как класс вкладок и суффикс -header в конце.
.uc-tabs-header
Футер табов
Отдельный блок, в котором располагаются вкладки #tab и/или кнопки #prev и #next . Используется только в классическом варианте и располагается строго после вкладок. Класс футера задаётся как класс вкладок и суффикс -footer в конце.
.uc-tabs-footer
Доп. элементы
Любые элементы, имеющие привязку ко вкладкам и наследующие их классы. Используются в случае, когда необходимо переключать состояние не только вкладок, но и сопутствующих им элементов. Чувствительны к расположению в слоях и количеству – должны располагаться непосредственно перед каждой вкладкой, а их количество должно быть кратно количеству самих вкладок.
.tab-elem
* – обязательные элементы
Переключатель Zero-блоков по кнопкам:
Элемент
Описание
Класс/Ссылка
Вкладки*
Элементы/группы Object, при нажатии на которые переключается контент табов. Принимают класс .selected в активном состоянии и чувствительны к расположению в слоях: первой (нижней) вкладке соответствует первый элемент/блок с контентом.
#tab
Контент*
Блоки/группы Object, переключающиеся при нажатии на вкладки. Так же, как и вкладки, принимают класс .selected в активном состоянии и чувствительны к расположению в слоях.
.uc-tabs
Кнопки
Элементы, при клике на которые выполняется переключение вкладок. Поддерживают изменение фона, бордера и иконки в активном состоянии, для настройки которого обеим кнопкам задаются одинаковые стили, одна из них поворачивается на 180º, после чего в генераторе кода указываются их новые значения. Активной и неактивной стрелке присваиваются классы .active и .inactive соответственно.
#prev, #next
* – обязательные элементы
Переключатель контента в Zero-блоке:
Элемент
Описание
Класс/Ссылка
Вкладки*
Элементы/группы Object, при нажатии на которые переключается контент табов. Принимают класс .selected в активном состоянии и чувствительны к расположению в слоях: первой (нижней) вкладке соответствует первый (нижний) элемент с контентом.
#tab
Контент*
Группы Object, переключающиеся при нажатии на вкладки. Так же, как и вкладки, принимают класс .selected в активном состоянии и чувствительны к расположению в слоях.
.tab-elem
Кнопки
Элементы, при клике на которые выполняется переключение вкладок. Поддерживают изменение фона, бордера и иконки в активном состоянии, для настройки которого обеим кнопкам задаются одинаковые стили, одна из них поворачивается на 180º, после чего в генераторе кода указываются их новые значения. Активной и неактивной стрелке присваиваются классы .active и .inactive соответственно.
#prev, #next
Активные вкладки
Отдельные элементы/группы Object, работающие так же, как и вкладки, но отображающиеся только при их выборе. Используются в случаях, когда необходимо существенно изменить стиль активной вкладки, не прибегая к коду. Располагаются поверх обычных вкладок, так же чувствительны к расположению в слоях и имеют ссылку #tab.
.tab-active
* – обязательные элементы

Функции и параметры

Методы, с помощью которых можно управлять работой табов. Подгружаются асихнронно как функции объекта tabs.
Функция
Описание
Триггер
tabs.init(selector, params)
Инициализирует Zero-вкладки
DOM Content Loaded
В качестве аргументов для настройки вкладок передаются параметры:
Параметр
Описание
Тип
Значение по-умолчанию
selector
Класс блока с содержимым вкладок
string
-
params.header
Класс блока со вкладками
string
selector + '-header'
params.footer
Класс блока с кнопками управления
string
selector + '-footer'
params.tabs
Ссылка для вкладок
string
'#tab'
params.elems
Класс переключающихся элементов
string
'.tab-elem'
params.active
Класс активных вкладок
string
'.tab-active'
params.prev
Ссылка для кнопки «Назад»
string
'#prev'
params.next
Ссылка для кнопки «Вперёд»
string
'#next'
params.slide
Номер активного слайда
number
0
params.hover
Переключение вкладок по наведению
boolean
false
params.hash
Сохранение активной вкладки при перезагрузке
boolean
false
params.transition
Скорость переключения вкладок (мс)
number
300
params.easing
Функция перехода для анимации
string
'ease-in-out'
params.autoplay
Автоматическое переключение вкладок
boolean
false
params.interval
Интервал переключения вкладок
number
6000
params.event
Пользовательское событие для запуска вкладок
string
-
params.timeout
Задержка после срабатывания события
number
0
params.style
Стили вкладок
object
{}

Стили

В params.style можно также передавать стили табов и их элементов. Они преобразовываются в css-переменные и отображаются при запуске мода.
Параметр
Описание
Тип
Пример
active.backgroundColor
Цвет фона активной вкладки
string
'#FFFFFF'
active.color
Цвет текста активной вкладки
string
'#FFFFFF'
active.borderColor
Цвет бордера активной вкладки
string
'#FFFFFF'
inactive.opacity
Непрозрачность неактивных вкладок
number
0.2
controls.backgroundColor
Цвет текста активной стрелки
string
'#FFFFFF'
controls.borderColor
Цвет бордера активной стрелки
string
'#FFFFFF'
controls.backgroundImage
Иконка активной стрелки
string
'https://,,,'

События

Пользовательские события позволяют управлять последовательностью инициализации модификаций и используются для совмещения нескольких модов или стороннего кода. Их можно использовать, чтобы:
Запустить вкладки по срабатыванию события
Отложить инициализацию табов можно с помощью параметров event и timeout. Например, запустить их через 100ms после срабатывания customEvent можно таким образом:
tabs.init(".uc-tabs", { event: "customEvent", timeout: 100 })
Если модификация должна запуститься после срабатывания сразу нескольких событий, достаточно перечислить их через запятую: event: "customEvent1, customEvent2, customEvent3".
Запустить сторонний код после отрисовки вкладок
Если код нужно выполнить после того, как табы полностью запустятся, добавьте слушатель события tabsinit-id, где tabsinit – событие их отрисовки, id – класс блока со слайдером без префикса uc или rec. Например, если у блока со слайдером класс .uc-tabs1, то слушатель события добавляется следующим образом:
window.addEventListener("tabsinit-tabs1", function(){ ... })
Запустить другую модификацию после отрисовки вкладок
Логика работы пользовательских событий одинакова для всех модификаций и помогает интегрировать их друг с другом. Например, запустить вкладки после отрисовки слайдера можно через событие 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-блоков по кнопкам

Переключатель контента в Zero-блоке

Если всё содержимое должно переключаться в рамках одного блока, добавляем вкладки #tab, как группы Object или отдельные элементы, таким же образом создаём переключаемые элементы с классом .tab-elem и при необходимости – вкладки в активном состоянии .tab-active . По инструкции располагаем их в правильном порядке и добавляем параметр hover: true для переключения по наведению.
<script>tabs.init(".uc-tabs", { hover: true })</script>
Пример: Переключатель контента в Zero-блоке

Переключатель контента в поп-апе

Если вкладки находятся внутри кастомного поп-апа, то запускать их необходимо только после его инициализации. Добавляем пользовательское событие 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 заданы у одинакового количества элементов.

Вкладки не переключаются совсем

Данная проблема может возникать из-за того, что вкладки перекрывают другие элементы, и взаимодействие с ними становится невозможным. Для решения проблемы убедитесь, что вкладки не перекрываются другими элементами/блоками.

Возникает конфликт с другими модами

Zero-вкладки совместимы с большинством модификаций из исходной библиотеки. Исключение: слайдер, поп-ап, и аккордеон, которые необходимо запускать через пользовательские события.
Модификации других авторов или сторонний код, влияющий на отображение элементов при загрузке (например, скрывающий или перемещающий их), необходимо запускать до инициализации табов.

Если модификация все равно не работает

Добавьте параметр ?showerrors в конец ссылки, чтобы увидеть ошибки и рекомендации по их исправлению, или параметр ?showparams=tabs, чтобы посмотреть настройки и переменные модификации. Данные функции работают на любом сайте с установленной библиотекой.
Попробовать