Обзор Regular Labs Tabs Free. Вкладки Joomla

• Видео урок.
• Основные возможности и особенности.
• Сравнение плагинов.
• Настройки.
• Вставка вкладок в Joomla.

Regular Labs Tabs Free – бесплатный русскоязычный системный плагин Joomla для создания вкладок в любом месте, где можно ввести текст.

Видео урок

• Настройки плагина – 00:01:06.
• Вставка вкладок – 00:04:20.
• Цвета вкладок – 00:06:37.
• Вкладка по умолчанию – 00:07:09.
• Вложенные вкладки – 00:07:38.

Ссылки из видео:

• «Обзор DJ-Tabs. Табы для Joomla 3».
• Документация плагина Regular Labs Tabs.

Видео лучше просматривать с качеством 720 HD. Этот и другие видео уроки можете найти на каналах сайта Aleksius.com в YouTube и Mail.ru.

Плагин достаточно прост в использовании, оснащён рядом настроек для более гибкой конфигурации, поддерживает адаптивный дизайн и позволяет создавать якоря для перехода по ссылкам прямо к вкладке. Вкладки ещё называют «табами», от английского «tabs».

В предыдущей статье «Обзор DJ-Tabs. Табы для Joomla 3» мы уже рассматривали аналогичное расширение. Но оно служит немного для других целей. В отличие от DJ-Tabs, Regular Labs Tabs Free позволяет размещать вкладки внутри материалов, модуйлей и везде, где в текстовом редакторе обрабатыватся системные плагины. Также в самой Джумла есть плагин, который позволяет создавать вкладки и аккордеон в материалах.

Пример вкладок, созданных при помощи платной и бесплатной версии плагина, можно посмотреть на официальном сайте разработчика.

В обзоре участвует последняя, на момент написания статьи (17.10.2019), русскоязычная версия Regular Labs Tabs Free 7.5.10 в Joomla 3.9.12. Демонстрационный сайт на английском языке с шаблоном JM Services.

На официальном сайте расширений Joomla 137 отзывов, расширение добавлено 18 ноября 2008 года.

• Общий рейтинг – 5 из 5.
• Функциональность – 5 из 5.
• Простота использования – 5 из 5.
• Поддержка – 5 из 5.
• Документация – 5 из 5.

Также есть платные версии Regular Labs Tabs Pro – €19. Она обладает более расширенным набором опций. Об их отличиях платной и бесплатной версий можно прочесть ниже в статье.

Основные возможности и особенности

• Вставка вкладок в материал.
• Вставка вкладок при помощи кнопки редактора.
• Вставка вкладок везде, где обрабатываются плагины Joomla (в модули и компоненты).
• Стилизация заголовка вкладок (без применения CSS).
• Простое изменение внешнего вида любого элемента вкладок при помощи CSS.
• Настройки выравнивания заголовков вкладок. На рисунке ниже показаны разные варианты выравнивания заголовков вкладок.

• Есть возможность задавать настройки отдельным вкладкам (наборам вкладок), отличающиеся от настроек плагина.
• Возможность создания якорей, для указания их в URL адресе. Так можно прокручивать страницу сразу к вкладке.
• Возможность смены уровня заголовков табов (H1-H6).
• Возможность настройки тега для вставки табов.
• Переведён на русский, английский, польский, итальянский и другие языки.
• Поддержка актуальной версии Joomla.
• Наличие документации на английском языке.

Сравнение плагинов

В Joomla есть свой собственный встроенный плагин контента «Разрыв страницы». Он тоже позволяет вставлять вкладки в материал. На рисунке ниже показан пример таких вкладок. Стиль оформления зависит от шаблона сайта.

Настройки

Все настройки плагина разделены на шесть вкладок (рисунок ниже). Опции переведены на русский язык и оснащены русскоязычными всплывающими подсказками. Рассмотрим только наиболее интересные, на мой взгляд, параметры.

1. Плагин. Содержит краткое описание плагина и синтаксиса вставки вкладок, а также другие опции, присущие всем плагинам Joomla.
2. Оформление.
3. Поведение. Опции доступны только в платной версии плагина.
4. Настройки кнопки редактора.
5. Синтаксис тегов.
6. Дополнительные параметры.

Вкладка Оформление (рисунок ниже). Позволяет активировать применение встроенных в плагин стилей (опция Загружать стили), задать собственный CSS класс для написания индивидуальных стилей табов (опция Основной класс), а также позволяет изменить цвет неактивных вкладок (опция Цвет неактивного блока вкладок) и включить/отключить обводку для заголовков и содержимого (опции Обрамление вкладок и Обрамление содержимого вкладок соответственно). Плюс, можно изменить выравнивание заголовков вкладок (рисунок выше).

Вкладка Настройки кнопки редактора (рисунок ниже). Тут Вы можете сконфигурировать кнопку вставки табов, расположенной в текстовом редакторе. Немного подробнее о ней мы поговорим ниже в статье. Плюс, в видео-обзоре показан пример вставки вкладок в материал при помощи этой кнопки.

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

Вкладка Дополнительные параметры (рисунок ниже). Содержит дополнительные опции, позволяющее более тонко настроить табы Joomla.

• Тег заголовка. Позволяет изменить тег заголовка вкладки (H1-H6). Может быть полезно для SEO.
• Использовать #-нотацию. Позволяет создавать якоря для перехода к нужной вкладке. Например, можно создать ссылку вида «https://site.com/vkladki#vkladka-3». По её нажатию пользователь перейдёт на страницу с вкладками и перед ним сразу откроется нужная вкладка.
• Задержка инициализации. Установите задержку в миллисекундах для инициализации скрипта плагина Tabs после загрузки страницы. Вы можете использовать это для инициализации вкладок после других скриптов, для которых это нужно, чтобы корректно работать.
• Загрузить Bootstrap Framework. Для нормального функционирования вкладок Joomla необходим фреймворк Bootstrap. Если Ваш шаблон, или другое расширение, уже загружает данный фреймворк, то можно отключить эту опцию.

Вставка вкладок в Joomla

Рассмотрим добавление табов на примере материала Joomla. Но процесс аналогичен и для вставки вкладок в модули и другие компоненты. Предполагается, что плагин Вы уже установили и настроили.

Шаг 1. В редакторе материалов нажмите на кнопку Tabs.

Шаг 2. В появившемся окне укажите заголовок для вкладки и измените её настройки, если это нужно. Если Вам нужно три вкладки, то укажите заголовки для трёх вкладок. Если пять, то для пяти. Если Вам нужно 11 и более вкладок, то это можно сделать на следующем шаге. Обратите внимание, что опции, которые Вы задаёте для каждой вкладки отдельно, переопределяют аналогично опции, заданные в плагине.

Нажмите кнопку Вставить для вставки тегов вкладок.

Шаг 3. После вставки тегов вкладок замените текст «Ваш текст...» на содержимое для каждой вкладки.

Если нужно добавить больше вкладок, то скопируйте тег вкладки, в моём примере это «{tab Вкладка 5}» и вставьте его перед тегом «{/tabs}». Замените заголовок вкладки «Вкладка 5» на другой и поместите содержимое вкладки после тега так же, как Вы делали для других вкладок.

Рассмотрим несколько вариантов настроек вкладок Joomla.

Цвета вкладок. Можно задавать разные цвета всем или отдельным вкладкам. Пример тегов:

{tab Вкладка 1}
Ваш текст...
{tab title="Вкладка 2" class="blue"}
Ваш текст...
{tab title="Вкладка 3" class="green"}
Ваш текст...
{tab title="Вкладка 4" class="orange"}
Ваш текст...
{tab title="Вкладка 5" class="red"}
Ваш текст...
{tab title="Вкладка 6" class="grey"}
Ваш текст...
{/tabs}

Пример тегов в редакторе (рисунок ниже).

В результате будет так, как показано на рисунке ниже. Как видите, во вкладках можно размещать форматированный текст и изображения. По большому счёту, там можно размещать всё, что можно размещать в текстовом редакторе.

Вкладки с форматированием заголовка и с изображением в заголовке. Можно задавать форматирование заголовкам и вставлять изображения в них. Пример тегов:

{tab Вкладка 1}
Ваш текст...
{tab Вкладка 2}
Ваш текст...
{tab title="Вкладка 3" class="green"}
Ваш текст...
{tab title="Вкладка 4" class="orange"}
Ваш текст...
{/tabs}

Пример тегов в редакторе (рисунок ниже).

В результате будет так, как показано на рисунке ниже.

Вкладка, открытая по умолчанию. Можно сделать так, что по умолчанию будет открыта определённая вкладка. Например, третья. Достаточно добавить «open="true"». Пример тегов:

{tab Вкладка 1}
Ваш текст...
{tab Вкладка 2}
Ваш текст...
{tab title="Вкладка 3" class="green" open="true"}
Ваш текст...
{tab title="Вкладка 4" class="orange"}
Ваш текст...
{/tabs}

Вложенные вкладки. Можно вкладывать вкладки внутрь других вкладок. Пример тегов:

{tab Пример}
Ваш текст...
{tab-ex Вкладка 1}
Ваш текст...
{tab-ex_sub1 Вкладка 1.1}
{tab-ex_sub1_sub1 Вкладка 1.1.1}
Ваш текст...
{tab-ex_sub1_sub1 Вкладка 1.1.2}
Ваш текст...
{tab-ex_sub1_sub1 Вкладка 1.1.3}
Ваш текст...
{/tabs-ex_sub1_sub1}
{tab-ex_sub1 Вкладка 1.2}
Ваш текст...
{/tabs-ex_sub1}
{tab-ex Вкладка 2}
Ваш текст...
{tab-ex_sub2 Вкладка 2.1}
Ваш текст...
{tab-ex_sub2 Вкладка 2.2}
Ваш текст...
{/tabs-ex_sub2}
Ваш текст...
{/tabs-ex}
{/tabs}

Пример тегов в редакторе (рисунок ниже).

В результате будет так, как показано на рисунке ниже.

Больше информации и примеров настройки вкладок можно найти в документации разработчика (на английском).

Как видите, данный плагин достаточно прост в использовании и позволяет буквально в несколько нажатий создать табы на Вашем сайте. Обладая базовыми навыками CSS можно изменить стили табов под дизайн своего сайта. Если у Вас есть вопросы, задавайте их в комментариях.

В следующей статье «Обзор Regular Labs Sliders Free. Слайдер/аккордеон для Joomla» мы познакомимся с аналогичным плагином, но для создания слайдеров .

Автор статьи – Хорошевский Алексей

Кандидат технических наук, преподаватель Харьковского национального университета радиоэлектроники, веб-мастер и SEO-оптимизатор с опытом более 15 лет. Специалист по созданию сайтов на Joomla и WebSite X5. Автор научных публикаций, видеокурсов и обучающего контента по веб-разработке и SEO. Ведёт блог и YouTube-канал, где делится своими знаниями и практическим опытом. Предоставляет услуги по созданию, доработке, сопровождению и продвижению сайтов. Подробнее об авторе… Контакты: +38 095 840 24 29 +38 095 840 24 29 +38 095 840 24 29 email@aleksius.com Социальные сети: LinkedIn Facebook YouTube (Twitter) Публикации и работа: Google Академия Scopus Upwork Freelance.ua

Полезные ссылки:

• Официальный сайт.