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.6/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
tabs.toggle(selector,params,direction)	Переключает вкладки в направлении 'prev'\|'next'	-

В качестве аргументов для настройки вкладок передаются параметры:

Параметр	Описание	Тип	Значение по-умолчанию
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.click	Переключение вкладок по клику	boolean	true
params.hover	Переключение вкладок по наведению	boolean	false
params.swipe	Переключение вкладок по свайпу	boolean	false
params.hash	Сохранение активной вкладки при перезагрузке	boolean	false
params.filter	Фильтрация вложенных элементов	boolean	true
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.onchange	Пользовательская функция при смене вкладки	function	-
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>

Пример: Табы с автолэйаутом

Вкладки со слайдером

Если внутри вкладок необходимо разместить один или несколько слайдеров, достаточно инициализировать вкладки по классу, а слайдеры – по ID.

<!--slider.js Слайдер внутри Zero-вкладок. https://postnikovmd.com/mods/slider-->
<script>slider.init("#rec000000001")</script>
<script>slider.init("#rec000000002")</script>
<script>slider.init("#rec000000003")</script>
<script>tabs.init(".uc-tabs")</script>

Пример: Слайдер внутри Zero-вкладок

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

Классические табы, у которых кнопки #tab располагаются непосредственно в переключаемых блоках .uc-tabs. Так как в исходном примере переключается 3 блока, то суммарное количество вкладок должно равняться 9. По инструкции располагаем их в правильном порядке и убираем плавность перехода с помощью параметра transition: 0.

<script>tabs.init(".uc-tabs", { transition: 0 })</script>

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

Переключатель с сохранением активной вкладки

Если при попадании на страницу нужно открыть конкретную вкладку, можно воспользоваться параметром hash: true. При переключении вкладок он добавляет к ссылке в адресной строке хэш вида #tab1234567890-1, где 1234567890 – идентификатор первого блока в группе, -1 – номер активной вкладки.

<script>tabs.init(".uc-tabs", { hash: true, transition: 200, style: { active: { backgroundColor: "#FFFFFF" }, elems: { opacity: 0.4 } } })</script>

Ссылку на страницу с хэшем можно скопировать из адресной строки браузера и в дальнейшем использовать в кнопках, например: https://example.com/page#tab1234567890-2

Пример: Классические табы с сохранением активной вкладки

Пример: Переключатель Zero-блоков с сохранением активной вкладки

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

Если всё содержимое должно переключаться в рамках одного блока, добавляем вкладки #tab, как группы Object или отдельные элементы, таким же образом создаём переключаемые элементы с классом .tab-elem и при необходимости – вкладки в активном состоянии .tab-active . По инструкции располагаем их в правильном порядке и добавляем параметр hover: true для переключения по наведению.

<script>tabs.init(".uc-tabs", { hover: true })</script>

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

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

Вкладки во всплывающем окне можно реализовать двумя способами: с помощью блока T1093 или модификации кастомных поп-апов в Zero-блоке. Для стандартного поп-апа вкладки запускаются как обычно:

<script>tabs.init(".uc-tabs", { hover: true })</script>

При использовании отдельной модификации для поп-апа, в блок T123 со слайдером добавляется ещё один код с его инициализацией:

<script>tabs.init(".uc-tabs", { hover: true })</script>
<script>popup.init(".uc-tabs", { animation: "zoom", style: { blur: 4 } })</script>

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

Выполнение стороннего кода при смене вкладки

Пользовательскую функцию, которая будет выполняться при переключении вкладок, можно задать через параметр onchange. На входе она принимает slide в качестве аргумента – индекс вкладки, на которую произошло переключение.

<script>tabs.init(".uc-tabs", { onchange: function(slide){ /*...*/ } })</script>

Распространенные проблемы

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

Распространенная проблема, возникающая по следующим причинам:

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

Количество вкладок не совпадает с количеством контента
Так как вкладки и контент привязываются по принципу «1 к 1», лишние элементы могут нарушить их порядок. При возникновении такой проблемы, убедитесь, что ссылки #tab и классы .tab-elem заданы у одинакового количества элементов.

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

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

При переключении вкладок контент сдвигается вниз

Проблема связана с наличием внутренних отступов (padding) в настройках раскрывающихся блоков. Когда блоки скрываются, их высота становится равной нулю, а установленные отступы создают дополнительное пространство, которое сдвигает каждый следующий блок вниз.

Для решения проблемы убедитесь, что у скрывающихся/раскрывающихся блоков отсутствуют отступы в настройках блока.

Не меняется цвет текста активной вкладки

Параметр style.active.color перекрашивает вкладку в активном состоянии, если она является кнопкой Button. Если вкладка сделана текстовый элемент с классом .tab-elem, её цвет можно изменить через дополнительный css по классу .tab-elem.selected.

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

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

Попробовать

Zero-вкладки