Модификация позволяет создавать кастомные табы из 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-вкладки. Они задаются и настраиваются в интерфейсе Тильды.
Классические табы со вкладками и стрелками:
* – обязательные элементы
Переключатель 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>Пример: Табы с автолэйаутом
Вкладки со слайдером
Если внутри вкладок необходимо разместить один или несколько слайдеров, достаточно инициализировать вкладки по классу, а слайдеры – по 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>Переключатель с сохранением активной вкладки
Если при попадании на страницу нужно открыть конкретную вкладку, можно воспользоваться параметром 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-блоке
Если всё содержимое должно переключаться в рамках одного блока, добавляем вкладки #tab, как группы Object или отдельные элементы, таким же образом создаём переключаемые элементы с классом .tab-elem и при необходимости – вкладки в активном состоянии .tab-active . По инструкции располагаем их в правильном порядке и добавляем параметр hover: true для переключения по наведению.
<script>tabs.init(".uc-tabs", { hover: true })</script>Переключатель контента в поп-апе
Вкладки во всплывающем окне можно реализовать двумя способами: с помощью блока 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 заданы у одинакового количества элементов.
Так как вкладки и контент привязываются по принципу «1 к 1», лишние элементы могут нарушить их порядок. При возникновении такой проблемы, убедитесь, что ссылки #tab и классы .tab-elem заданы у одинакового количества элементов.
Вкладки не переключаются совсем
Данная проблема может возникать из-за того, что вкладки перекрывают другие элементы, и взаимодействие с ними становится невозможным. Для решения проблемы убедитесь, что вкладки не перекрываются другими элементами/блоками.
При переключении вкладок контент сдвигается вниз
Проблема связана с наличием внутренних отступов (padding) в настройках раскрывающихся блоков. Когда блоки скрываются, их высота становится равной нулю, а установленные отступы создают дополнительное пространство, которое сдвигает каждый следующий блок вниз.
Для решения проблемы убедитесь, что у скрывающихся/раскрывающихся блоков отсутствуют отступы в настройках блока.
Не меняется цвет текста активной вкладки
Параметр style.active.color перекрашивает вкладку в активном состоянии, если она является кнопкой Button. Если вкладка сделана текстовый элемент с классом .tab-elem, её цвет можно изменить через дополнительный css по классу .tab-elem.selected.
Если модификация все равно не работает
Добавьте параметр ?showerrors в конец ссылки, чтобы увидеть ошибки и рекомендации по их исправлению. Данная функция работает на любом сайте с установленной библиотекой.
