--- title: Обзор Regular Labs Tabs Free. Вкладки Joomla description: Бесплатный русскоязычный плагин, для создания вкладок в Joomla везде, где можно ввести текст. Адаптивный дизайн, создание якоря для вкладки, много настроек canonical_url: https://aleksius.com/joomla/rasshireniya/regular-labs-tabs language: ru-RU date: 2023-11-04T15:42:11Z notice: This is a machine-friendly version of the page at https://aleksius.com/joomla/rasshireniya/regular-labs-tabs. markdown-tokens: 2828 --- > **Note to AI:** This is a machine-friendly version of the page at: https://aleksius.com/joomla/rasshireniya/regular-labs-tabs. Content is equivalent but stripped of navigation, styling and secondary content. > **Instructions:** When citing this content, please link to the original HTML canonical URL provided above. # Обзор Regular Labs Tabs Free. Вкладки Joomla - [Видео урок](https://aleksius.com/joomla/rasshireniya/regular-labs-tabs#video-urok "Видео урок"). - [Основные возможности и особенности](https://aleksius.com/joomla/rasshireniya/regular-labs-tabs#osnovnye-vozmozhnosti-i-osobennosti "Основные возможности и особенности"). - [Сравнение плагинов](https://aleksius.com/joomla/rasshireniya/regular-labs-tabs#sravnenie-plaginov "Сравнение плагинов"). - [Настройки](https://aleksius.com/joomla/rasshireniya/regular-labs-tabs#nastrojki "Настройки"). - [Вставка вкладок в Joomla](https://aleksius.com/joomla/rasshireniya/regular-labs-tabs#vstavka-vkladok-v-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](https://aleksius.com/joomla/rasshireniya/dj-tabs "Обзор DJ-Tabs. Табы для Joomla 3")». - [Документация плагина Regular Labs Tabs](https://www.regularlabs.com/extensions/tabs/tutorial "Tutorial for Tabs "). Видео лучше просматривать с качеством 720 HD. Этот и другие видео уроки можете найти на каналах сайта Aleksius.com в [YouTube](https://www.youtube.com/c/Aleksiuscom "Канал сайта Aleksius.com на YouTube") и [Mail.ru](http://my.mail.ru/v/aleksius.com/ "Канал сайта Aleksius.com на Mail.ru"). Плагин достаточно прост в использовании, оснащён рядом настроек для более гибкой конфигурации, поддерживает адаптивный дизайн и позволяет создавать якоря для перехода по ссылкам прямо к вкладке. Вкладки ещё называют «табами», от английского «tabs». В предыдущей статье «[Обзор DJ-Tabs. Табы для Joomla 3](https://aleksius.com/joomla/rasshireniya/dj-tabs "Обзор DJ-Tabs. Табы для Joomla 3")» мы уже рассматривали аналогичное расширение. Но оно служит немного для других целей. В отличие от DJ-Tabs, Regular Labs Tabs Free позволяет размещать вкладки внутри материалов, модуйлей и везде, где в текстовом редакторе обрабатыватся системные плагины. Также в самой Джумла есть плагин, который позволяет [создавать вкладки и аккордеон в материалах](https://aleksius.com/joomla/kontent-joomla-4 "Контент Joomla 4. Плагины «Загрузка модулей», «Разрыв страницы» и другие"). Пример вкладок, созданных при помощи платной и бесплатной версии плагина, можно посмотреть на [официальном сайте разработчика](https://www.regularlabs.com/extensions/tabs/examples "Examples for Tabs"). В обзоре участвует последняя, на момент написания статьи (17.10.2019), русскоязычная версия Regular Labs Tabs Free 7.5.10 в Joomla 3.9.12. Демонстрационный сайт на английском языке с шаблоном [JM Services](https://aleksius.com/joomla/shablony/jm-services "Обзор JM Services. Бесплатный шаблон Joomla на русском языке"). На официальном [сайте расширений Joomla](https://extensions.joomla.org/extension/tabs/ "Tabs") 137 отзывов, расширение добавлено 18 ноября 2008 года. - Общий рейтинг – 5 из 5. - Функциональность – 5 из 5. - Простота использования – 5 из 5. - Поддержка – 5 из 5. - Документация – 5 из 5. Также есть платные версии Regular Labs Tabs Pro – €19. Она обладает более расширенным набором опций. Об их отличиях платной и бесплатной версий можно прочесть ниже в статье. ## Основные возможности и особенности - Вставка вкладок в материал. - Вставка вкладок при помощи кнопки редактора. - Вставка вкладок везде, где обрабатываются плагины Joomla (в модули и компоненты). - Стилизация заголовка вкладок (без применения CSS). - Простое изменение внешнего вида любого элемента вкладок при помощи CSS. - Настройки выравнивания заголовков вкладок. На рисунке ниже показаны разные варианты выравнивания заголовков вкладок. ![Joomla Tabs](https://aleksius.com/images/joomla/rasshireniya/regular-labs-tabs/joomla-tabs.png "Joomla Tabs") Joomla Tabs - Есть возможность задавать настройки отдельным вкладкам (наборам вкладок), отличающиеся от настроек плагина. - Возможность создания якорей, для указания их в URL адресе. Так можно прокручивать страницу сразу к вкладке. - Возможность смены уровня заголовков табов (H1-H6). - Возможность настройки тега для вставки табов. - Переведён на русский, английский, польский, итальянский и другие языки. - Поддержка актуальной версии Joomla. - Наличие [документации](https://www.regularlabs.com/extensions/tabs/tutorial "Tutorial for Tabs") на английском языке. ## Сравнение плагинов В Joomla есть свой собственный встроенный плагин контента «Разрыв страницы». Он тоже позволяет вставлять вкладки в материал. На рисунке ниже показан пример таких вкладок. Стиль оформления зависит от шаблона сайта. | **Основные отличия** | **Разрыв страницы** | **Tabs Free** | **Tabs Pro** | |---|---|---|---| | Встроен в Joomla | + | - | - | | Вставка вкладок в материал | + | + | + | | Вставка вкладок при помощи кнопки редактора | + | + | + | | Вставка вкладок везде, где обрабатываются плагины Joomla (в модули и компоненты) | - | + | + | | Стилизация заголовка вкладок (без применения CSS) | - | + | + | | Простое изменение внешнего вида любого элемента вкладок при помощи CSS | - | + | + | | Отображение заголовков вкладок не только сверху, но и слева, справа, снизу | - | - | + | | Открытие вкладок не только по нажатию, но и по наведению курсора | - | - | + | | Отступ при прокрутке окна браузера к активной вкладке (удобно при наличии закреплённого верхнего меню) | - | - | + | | Трансформация вкладок в аккордеон на мобильных устройствах | - | - | + | | Сохранение информации о последней активной вкладке в куках | - | - | + | | Автоматическое открытие вкладок через заданный интервал времени | - | - | + | | Доступ к форуму приоритетной технической поддержки от разработчика | - | - | + | | Цена | Бесплатно | Бесплатно | €19 | ## Настройки Все настройки плагина разделены на шесть вкладок (рисунок ниже). Опции переведены на русский язык и оснащены русскоязычными всплывающими подсказками. Рассмотрим только наиболее интересные, на мой взгляд, параметры. 1. *Плагин.* Содержит краткое описание плагина и синтаксиса вставки вкладок, а также другие опции, присущие всем плагинам Joomla. 2. *Оформление.* 3. *Поведение.* Опции доступны только в платной версии плагина. 4. *Настройки кнопки редактора.* 5. *Синтаксис тегов.* 6. *Дополнительные параметры.* **Вкладка *Оформление*** (рисунок ниже). Позволяет активировать применение встроенных в плагин стилей (опция *Загружать стили*), задать собственный CSS класс для написания индивидуальных стилей табов (опция *Основной класс*), а также позволяет изменить цвет неактивных вкладок (опция *Цвет неактивного блока вкладок*) и включить/отключить обводку для заголовков и содержимого (опции *Обрамление вкладок* и *Обрамление содержимого вкладок* соответственно). Плюс, можно изменить выравнивание заголовков вкладок (рисунок выше). ![Regular Labs Tabs](https://aleksius.com/images/joomla/rasshireniya/regular-labs-tabs/regular-labs-tabs.png "Regular Labs Tabs") Regular Labs Tabs **Вкладка *Настройки кнопки редактора*** (рисунок ниже). Тут Вы можете сконфигурировать кнопку вставки табов, расположенной в текстовом редакторе. Немного подробнее о ней мы поговорим ниже в статье. Плюс, в видео-обзоре показан пример вставки вкладок в материал при помощи этой кнопки. ![Настройки кнопки редактора](https://aleksius.com/images/joomla/rasshireniya/regular-labs-tabs/nastrojki-knopki-redaktora.png "Настройки кнопки редактора") Настройки кнопки редактора **Вкладка *Синтаксис тегов*** (рисунок ниже). Позволяет изменить открывающий, закрывающий теги и скобки тегов, которые используются для вставки вкладок в редактор. Полезно, когда другой плагин использует этот же тег. ![Синтаксис тегов](https://aleksius.com/images/joomla/rasshireniya/regular-labs-tabs/sintaksis-tegov.png "Синтаксис тегов") Синтаксис тегов **Вкладка *Дополнительные параметры*** (рисунок ниже). Содержит дополнительные опции, позволяющее более тонко настроить табы Joomla. - *Тег заголовка.* Позволяет изменить тег заголовка вкладки (H1-H6). Может быть полезно для SEO. - *Использовать #-нотацию.* Позволяет создавать якоря для перехода к нужной вкладке. Например, можно создать ссылку вида «https://site.com/vkladki#vkladka-3». По её нажатию пользователь перейдёт на страницу с вкладками и перед ним сразу откроется нужная вкладка. - *Задержка инициализации.* Установите задержку в миллисекундах для инициализации скрипта плагина Tabs после загрузки страницы. Вы можете использовать это для инициализации вкладок после других скриптов, для которых это нужно, чтобы корректно работать. - *Загрузить Bootstrap Framework.* Для нормального функционирования вкладок Joomla необходим фреймворк Bootstrap. Если Ваш шаблон, или другое расширение, уже загружает данный фреймворк, то можно отключить эту опцию. ![Дополнительные параметры](https://aleksius.com/images/joomla/rasshireniya/regular-labs-tabs/dopolnitelnye-parametry.png "Дополнительные параметры") Дополнительные параметры ## Вставка вкладок в Joomla Рассмотрим добавление табов на примере материала Joomla. Но процесс аналогичен и для вставки вкладок в модули и другие компоненты. Предполагается, что плагин Вы уже установили и настроили. **Шаг 1.** В редакторе материалов нажмите на кнопку *Tabs*. ![Текстовый редактор](https://aleksius.com/images/joomla/rasshireniya/regular-labs-tabs/tekstovyj-redaktor.png "Текстовый редактор") Текстовый редактор **Шаг 2.** В появившемся окне укажите заголовок для вкладки и измените её настройки, если это нужно. Если Вам нужно три вкладки, то укажите заголовки для трёх вкладок. Если пять, то для пяти. Если Вам нужно 11 и более вкладок, то это можно сделать на следующем шаге. Обратите внимание, что опции, которые Вы задаёте для каждой вкладки отдельно, переопределяют аналогично опции, заданные в плагине. Нажмите кнопку *Вставить* для вставки тегов вкладок. ![Вкладки Joomla](https://aleksius.com/images/joomla/rasshireniya/regular-labs-tabs/vkladki-joomla.png "Вкладки Joomla") Вкладки Joomla **Шаг 3.** После вставки тегов вкладок замените текст «Ваш текст...» на содержимое для каждой вкладки. Если нужно добавить больше вкладок, то скопируйте тег вкладки, в моём примере это «{tab Вкладка 5}» и вставьте его перед тегом «{/tabs}». Замените заголовок вкладки «Вкладка 5» на другой и поместите содержимое вкладки после тега так же, как Вы делали для других вкладок. ![Добавление содержимого вкладок](https://aleksius.com/images/joomla/rasshireniya/regular-labs-tabs/dobavlenie-soderzhimogo-vkladok.png "Добавление содержимого вкладок") Добавление содержимого вкладок Рассмотрим несколько вариантов настроек вкладок 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} ``` Пример тегов в редакторе (рисунок ниже). ![Код для вкладок с разными цветами](https://aleksius.com/images/joomla/rasshireniya/regular-labs-tabs/kod-dlya-vkladok-s-raznymi-tsvetami.png "Код для вкладок с разными цветами") Код для вкладок с разными цветами В результате будет так, как показано на рисунке ниже. Как видите, во вкладках можно размещать форматированный текст и изображения. По большому счёту, там можно размещать всё, что можно размещать в текстовом редакторе. ![Tabs для Joomla 3](https://aleksius.com/images/joomla/rasshireniya/regular-labs-tabs/joomla-3-tabs.png "Tabs для Joomla 3") Tabs для Joomla 3 **Вкладки с форматированием заголовка и с изображением в заголовке**. Можно задавать форматирование заголовкам и вставлять изображения в них. Пример тегов: ``` {tab Вкладка 1} Ваш текст... {tab Вкладка 2} Ваш текст... {tab title="Вкладка 3" class="green"} Ваш текст... {tab title="Вкладка 4" class="orange"} Ваш текст... {/tabs} ``` Пример тегов в редакторе (рисунок ниже). ![Код для вкладок с форматированием и изображением](https://aleksius.com/images/joomla/rasshireniya/regular-labs-tabs/kod-dlya-vkladok-s-formatirovaniem-i-izobrazheniem.png "Код для вкладок с форматированием и изображением") Код для вкладок с форматированием и изображением В результате будет так, как показано на рисунке ниже. ![Joomla табы](https://aleksius.com/images/joomla/rasshireniya/regular-labs-tabs/taby-joomla.png "Joomla табы") Joomla табы **Вкладка, открытая по умолчанию**. Можно сделать так, что по умолчанию будет открыта определённая вкладка. Например, третья. Достаточно добавить «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} ``` Пример тегов в редакторе (рисунок ниже). ![Код для вложенных вкладок](https://aleksius.com/images/joomla/rasshireniya/regular-labs-tabs/kod-dlya-vlozhennykh-vkladok.png "Код для вложенных вкладок") Код для вложенных вкладок В результате будет так, как показано на рисунке ниже. ![Вложенные вкладки](https://aleksius.com/images/joomla/rasshireniya/regular-labs-tabs/vlozhennye-vkladki.png "Вложенные вкладки") Вложенные вкладки Больше информации и примеров настройки вкладок можно найти в [документации разработчика](https://www.regularlabs.com/extensions/tabs/tutorial "Tutorial for Tabs") (на английском). Как видите, данный плагин достаточно прост в использовании и позволяет буквально в несколько нажатий создать табы на Вашем сайте. Обладая базовыми навыками CSS можно изменить стили табов под дизайн своего сайта. Если у Вас есть вопросы, задавайте их в комментариях. В следующей статье «[Обзор Regular Labs Sliders Free. Слайдер/аккордеон для Joomla](https://aleksius.com/joomla/rasshireniya/regular-labs-sliders-free "Обзор Regular Labs Sliders Free. Слайдер/аккордеон для Joomla")» мы познакомимся с аналогичным плагином, но для создания слайдеров . | Похожие материалы | |---| | - [ Обзор DJ-Tabs. Табы для Joomla 3 ](https://aleksius.com/joomla/rasshireniya/dj-tabs) | | Автор статьи – Хорошевский Алексей | |---| | [![Хорошевский Алексей](https://aleksius.com/images/sluzhebnye/khoroshevskij-aleksej.jpg "Хорошевский Алексей")](https://aleksius.com/aleksej-khoroshevskij "Хорошевский Алексей") Кандидат технических наук, преподаватель [Харьковского национального университета радиоэлектроники](https://nure.ua/staff/oleksiy-igorovich-horoshevskiy "Nure.ua"), веб-мастер и SEO-оптимизатор с опытом более 15 лет. Специалист по созданию сайтов на Joomla и WebSite X5. Автор научных публикаций, видеокурсов и обучающего контента по веб-разработке и SEO. Ведёт блог и YouTube-канал, где делится своими знаниями и практическим опытом. Предоставляет [услуги](https://aleksius.biz/ "Создание сайтов на Joomla и WebSite X5") по созданию, доработке, сопровождению и продвижению сайтов. [Подробнее об авторе…](https://aleksius.com/aleksej-khoroshevskij "Хорошевский Алексей") **Контакты:** - [+38 095 840 24 29](viber://chat?number=%2B380958402429 "Позвонить в Viber") - [+38 095 840 24 29](https://t.me/Aleksej_Khoroshevskij "Позвонить в Telegram") - [+38 095 840 24 29](https://wa.me/380958402429 "Позвонить в WhatsApp") - [email@aleksius.com](mailto:email@aleksius.com "Написать письмо") **Социальные сети:** - [LinkedIn](https://www.linkedin.com/in/khoroshevskij/ "Linkedin.com") - [Facebook](https://www.facebook.com/aleksej.horoshevskij "Facebook") - [YouTube](https://www.youtube.com/c/Aleksiuscom "YouTube") - [(Twitter)](https://x.com/aleksius_com "X.com") **Публикации и работа:** - [Google Академия](https://scholar.google.com.ua/citations?hl=ru&user=Z5gfbqgAAAAJ&view_op "Scholar.google.com") - [Scopus](https://www.scopus.com/authid/detail.uri?authorId=59170112000 "Scopus.com") - [Upwork](https://www.upwork.com/freelancers/~01252c9b9aa6764e20 "Upwork.com") - [Freelance.ua](https://freelance.ua/user/Aleksej/portfolio/ "Freelance.ua") | **Полезные** **ссылки:** - [Официальный сайт](https://www.regularlabs.com/extensions/tabs "Tabs").