Тип: Компонент, плагин, модуль
Версия Joomla!: Joomla! 2,5; 3 и выше
Лицензия: Бесплатные и урезанные версии

Tabs Joomla!

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

Придется тогда или искать замену (а сколько работы придется выполнить при переходе от одного разработчика к другому) или если вы большой программист самому все исправлять. Поэтому я сам стараюсь использовать или бесплатные компоненты или их урезанные версии (имеется в виду когда разработчик предлагает платный вариант определенного продукта, а также бесплатный). Иногда, даже и возможностей бесплатного компонента для обычного сайта может быть достаточно. И в таком случае компонент, плагин или модуль скорее всего будет развиваться вместе со своим бесплатным аналогом. Это все благодаря тому платному варианту, который все-таки кто-то себе купил. Извините за отступление от статьи…

Задача такая: нужно найти и выбрать на сайт плагин или компонент (можно на крайний случай и модуль) для оформления вкладок и помещения в них контента. Нашел 2 версии урезанных бесплатных продуктов и полностью бесплатные. Начнем тестирование (только что установленная CSM Joomla! версии 3.7.2). Для всех компонентов, плагинов или модулей использую одинаковую статью.

Плагин Tabs

Первым в тестирование попадает Tabs. Устанавливаем как обычно (видео как устанавливать компоненты, плагины и модули в CSM Joomla!) и переходим в менеджер плагинов. Введя в поиск tabs видим два плагины: Button – Regular – Labs – Tabs и System – Regular – Labs – Tabs. Для настройки нам нужен второй плагин.

Tabs Joomla!

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

Tabs Joomla!

Идем дальше на вкладку «Описание», в которой можно посмотреть теги, с помощью которых можно добавлять вкладки в редакторе при добавлении новостей.

Tabs Joomla!

«Дополнительные параметры» позволяют задать теги для вызова плагина и еще много чего, только после оплаты.

Tabs Joomla!

Последняя вкладка «Настройки кнопки редактора» позволяет отобразить свой текст на кнопке, задать максимальное количество вкладок и др.

Tabs Joomla!

Пример использования:

Заголовок первой вкладки


Содержание первой вкладки ...

Заголовок второй вкладки


Содержание второй вкладки ...

Скриншот из визуального редактора в административной панели:

Tabs Joomla!

Скриншот вкладок на сайте:

Tabs Joomla!

Добавить вкладки можно и другим способом. Создаем новый материал: Материалы Менеджер материалов Создать материал. Находим вверху или внизу визуального редактора надпись (кнопку) «Вкладка» и щелкаем на ней. Откроется окно плагина Tabs. Даем названия для нужного количества вкладок и вставляем в статью. Остается только добавить текст с заголовками.

Tabs Joomla!

Tabs Joomla!

Результат в визуальном редакторе:

Tabs Joomla!

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

Сайт плагина Tabs
Страница на extensions.joomla.org
Демонстрация плагина Tabs

Плагин Tabs and Sliders

Следующим мне попался плагин Tabs and Sliders. Устанавливаем и можем перейти в менеджер плагинов. Настроек он практически не имеет. Можно изменить тему отображения вкладок.

Tabs Joomla!

Для добавления информации во вкладках (в виде аккордеона) используем теги:

Tabs Joomla!

Как видим, нужно для каждой вкладки и вкладок между ними и открывать и закрывать тег. Используя такие теги мы выведем контент в виде аккордеона.

Скриншот из визуального редактора в административной панели:

Tabs Joomla!

Скриншот вкладок на сайте:

Tabs Joomla!

Пример из другой темой (выбирается в менеджере плагинов):

Tabs Joomla!

А используя теги:

Tabs Joomla!

мы выведем контент в виде вкладок, как и в предыдущем варианте. Смотрим скриншот (сверху в виде аккордеона, а снизу в виде вкладок):

Tabs Joomla!

Сайт плагина Tabs and Sliders
Страница на extensions.joomla.org
Демонстрация плагина Tabs and Sliders

Модуль SJ Module Tabs

Следующий супер-пупер вкладочный модуль SJ Module Tabs. Сразу после установки несколько минут смотрел на него и не понимал то ли модуль кривой или со мной что-то не так :). На самом деле данный модуль отображает во вкладках не материалы, а другие модули. Как это работает? Сначала задаем одну позицию для модулей, которые хотим затем поместить во вкладки (например, position-8). Это может быть меню (одно или несколько), форма входа, любой модуль.

Tabs Joomla!

Далее заходим в настройки модуля Sj Module Tabs и выбираем ему позицию вывода на сайте (я к примеру выбрал footer). Далее в настройках модуля, вкладка «Модуль» напротив Select a position задаем позицию модулей, которые будут выводиться во вкладках. В моем случае это позиция: position-8.

Tabs Joomla!

Сохраняем и видим все наши модули, которые имеют позицию «position-8» во вкладках.

Tabs Joomla!

Сайт модуля SJ Module Tabs
Страница на extensions.joomla.org
Демонстрация модуля SJ Module Tabs

Модуль JE Tabs

Модуль JE Tabs — интересные задумка (правда последнее обновление 2015 года). После установки в диспетчере модулей переходим в настройки JE Tabs.

Вкладка «Модуль» позволяет задать цвет текста, анимацию, включить jQuery, выбрать стиль текста.

Tabs Joomla!

Не забываем сделать привязку к пунктам меню:

Tabs Joomla!

Вкладка «>>> Manage Tabs <<<» служит для добавления вкладок. Напротив «Tab Title» пишем название вкладки, а напротив «Tab Text» текст, который должен содержаться во вкладке.

Tabs Joomla!

В пункте меню «Дополнительные параметры» можно задать HTML-тег модуля, Размер Bootstrap, HTML-тег заголовка, CSS-класс заголовка, Стиль модуля.

Tabs Joomla!

Чтобы добавить модуль в статью нужно: Материалы → Менеджер материалов → Создать материал. Далее щелкаем по кнопке (тексте) модуль и выбираем «JE Tabs». Код в редакторе Joomla! будет примерно выглядеть так: "loadmodule mod_je_tabs, JE Tabs". Сохраняем материал и получаем свои вкладки:

Tabs Joomla!

Tabs Joomla!

Tabs Joomla!

Сайт модуля JE Tabs
Демонстрация JE Tabs

Плагин Crazy Tab Slider Embeding

Плагин Crazy Tab Slider Embeding полностью бесплатный и имеет большое количество настроек. Вкладки можно выводить в верхней и нижней позициях, а также левой и правой.

Вкладка «Плагин». На данной вкладке можно удалить шорткоды из всплывающих окон, RSS, форм, работающих на Ajax. Можно скрыть на домашней странице (Skip Home page). Опция «Select Menu(s)» позволяет выбрать меню или отдельные категории на которых будет включен данный плагин.

Tabs Joomla!

Вкладка «Com_Content Component Setting» отвечает за параметры включения/выключения плагина в контенте. Обратите внимание на опцию «Exclude Categories». В ней задаются категории, где данный плагин работать не будет (то есть они исключаются).

Tabs Joomla!

У кого установлен компонент K2, то для настройки используйте вкладку «Com_K2 Component Setting»  

Tabs Joomla!

И завершает настройки плагина вкладка «== Tab Slider Default Setting ==». Именно в ней задается позиция вывода вкладок (Tabs Position), ширина контента и др.

Tabs Joomla!

Пример вызова плагина для вставки в контент:
{cbtabslider behavior=Tabs}
{cbtabslide title=”Вкладка 1″}Контент вкладки 1{/cbtabslide}
{cbtabslide title=”Вкладка 2″}Контент вкладки 2{/cbtabslide}
{/cbtabslider}

Пример административная часть:

Tabs Joomla!

Пример фронтальная часть:

Tabs Joomla!

Сайт плагина Crazy Tab Slider Embeding
Страница на extensions.joomla.org
Демонстрация плагина Crazy Tab Slider Embeding

Модуль SP Tab

Модуль «SP Tab» выполняет такую же функцию как и SJ Module Tabs. То есть выводит во вкладках различные модули. Достаточно хорошо настраивается, имеет встроенные стили, а также дает возможность использовать свои.

После установки не забудьте привязать модуль на всех (или выбранных вами) страницах.

Рассмотрим основные вкладки. Вкладка «Параметры» позволяет выбрать модули для отображения во вкладках. «Navigation position» определяет размещение вкладок (сверху или снизу). «Navigation Height» задает высоту вкладок в пикселях. Остальные можно поэкспериментировать самому.

Tabs Joomla!

Вкладка «Preset Styles» позволяет выбрать один из предустановленных стилей или настроить самому.

Tabs Joomla!

«Animation Options» — управления анимацией. Можно выбрать как будет показываться контент во вкладках (с анимацией или без). Например, опция «Activator» позволяет выбрать способ перехода между вкладками: по наведении курсора мыши или при щелчке по вкладке.

Tabs Joomla!

Во вкладке «Дополнительные параметры» можно настроить кэширование и др.  

Tabs Joomla!

Скриншот из фронтальной части сайта.

Tabs Joomla!

Сайт модуля SP Tab
Страница на extensions.joomla.org
Демонстрация модуля SP Tab

Модуль JM Simple Tabs

JM Simple Tabs — привязываем на нужных (или всех) пунктах меню и переходим в настройки.

Tabs Joomla!

На вкладке «Модуль» нажимаем на кнопку «Add new» и заполняем заголовок (Title), подзаголовок (Subtitle при необходимости) и вставляем контент (Content). Можно выбрать иконку или изображения (Icon (image)) и иконку или изображение при наведении на вкладку курсора мыши (Image (on hover and active)). После этого нажимаем «Save item». Для других вкладок повторяем действия. Опция «Tabs align» определяет положение вкладок.

Tabs Joomla!

На вкладке «Дополнительные параметры» включаем или выключаем кэширования, размер Bootstrap, добавляем Суффикс CSS-класса модуля и др.

Скриншот из фронтальной части сайта:

Tabs Joomla!

Сайт модуля JM Simple Tabs
Страница на extensions.joomla.org
Демонстрация модуля JM Simple Tabs

Модуль BM Articles Tab

BM Articles Tab — модуль для вывода из категорий материалов и показ их в виде вкладок. Устанавливаем и переходим в менеджер модулей, где находим BM Articles Tab. Делаем привязку на страницах и переходим в основную вкладку настроек — «Модуль».

Tabs Joomla!

Основные настройки:

  • Категория — выбор одной, нескольких или всех категорий для вывода из них материалов.
  • Featured Articles — рекомендуемые статьи показать/скрыть;
  • Count — ввести числом количество материалов (по умолчанию 5);
  • Order — сортировать по;
  • Authors — указывать авторство или нет;
  • Image's link — активная ссылка по изображению: да/нет;
  • mage's width —ширина изображений;
  • Image's height — высота изображений;
  • Show image — показать изображения: да/нет;
  • Select Resize Type — тип изменения размера изображения;
  • Select effect — выберите эффект;
  • Title limit — лимит заголовка;
  • Show title — показать заголовок;
  • Readmore Limit — лимит вступительного текста;
  • Show description — показать описание;
  • Kept Html — (точно не знаю, но похоже на: сохранять ли описание в Html);
  • Show readmore — показать «читать далее…»;
  • Readmore label —название кнопки «читать далее…»;
  • Tab color — цвет вкладки.

Настроили, выбрали позицию, опубликовали и нажимаем сохранить.

Скриншот фронтальной части сайта:

Tabs Joomla!

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

Сайт модуля BM Articles Tab
Страница на extensions.joomla.org
Демонстрация модуля BM Articles Tab

Модуль Webhaus Responsive Tabs

Рассмотрим еще один модуль «Webhaus Responsive Tabs». На вкладке «Модуль» задаются размеры в пикселях. Но это, по словам автора, нужно только для правильного отображения в браузере IE8.

В модуле доступно пять вкладок. Каждая имеет заголовок (Tab title) и поле для вставки текста (Tab content). Мне понравилось то, что контент можно редактировать с помощью визуального редактора. Таким образом можно отдельно задать стили отображения текста для каждой вкладки.

Tabs Joomla!

Скриншот фронтальной части:

Tabs Joomla!

Сайт модуля Webhaus Responsive Tabs
Страница на extensions.joomla.org
Демонстрация модуля Webhaus Responsive Tabs

Модуль RokSprocket

RokSprocket — устанавливаем и переходим в менеджер модулей. Нажимаем на кнопку «Создать» и щелкаем на «RokSprocket Module». Напротив «Заголовок» пишем название для нашего модуля. Процесс создания разбит на 3 части.

  • 1. Выбираем нужный элемент (данный модуль, кроме вкладок позволяет добавлять и другие элементы смотрим скриншоты).
  • 2. Pick a Content Provider — выбираем Joomla.
  • 3. Create Module — нажимаем Continue.

Tabs Joomla!

Основная вкладка «Options». Нажимаем «Add Specific Articles» и выбираем модули, которые будут показываться во вкладках. Повторяем действие для других модулей.

Tabs Joomla!

Tabs Joomla!

Сохраняем и смотрим как все работает на фронтальной части сайта.

Tabs Joomla!

Модуль имеет очень много настроек. Описывать их не вижу смысла. Здесь все сугубо индивидуально. А если учесть, что кроме вкладок модуль может работать и с другими элементами, то он заслуживает внимания. Сама студия RocketTheme делает качественные продукты.

Опишу некоторые параметры:

Tabs Joomla!

  1. Theme — позволяет задать тему для отображения вкладок в модуле. Все зависит от шаблона.

  2. Display Limit — устанавливает количество элементов, которые будут отображаться при визуализации: 0 или ∞ (неограниченно);

  3. Tabs Position — значение устанавливает где в модуле будут появляться вкладки;

  4. Animation — позволяет установить тип анимации, которая будет воспроизведена при переходе от одной вкладки к другой;

  5. Autoplay — указывает, нужно ли, чтобы модуль автоматически начал перемещение с помощью вкладок при загрузке страницы или ожидал команды от посетителя;

  6. Autoplay Delay — меняет время между циклическими вкладками в модуле. Чем длиннее эта задержка (в секундах), тем дольше одна статья будет отображаться в модуле;

  7. Image Resize — эта опция позволяет установить максимальную ширину/высоту эскиза;

  8. Preview Length — параметр, который устанавливает длину (в словах) предварительного просмотра содержимого каждого элемента;

  9. Strip HTML Tags — параметр, который позволяет удалить или сохранить теги HTML в описании статьи;

  10. Default Title — установка названия по умолчанию или указать другое/вообще отказаться от названия;

  11. Default Icon — выбор иконки для вкладки;

  12. Default Link — определяет ссылки по умолчанию;

  13. Default Article Text — позволяет задать текст статьи по умолчанию из всех вкладок в модуле. Если значения не изменено, то используется вступительный текс статьи.

Сайт модуля RokSprocket
Страница на extensions.joomla.org
Демонстрация модуля RokSprocket

Модуль SP Accordion module

SP Accordion module — простой модуль аккордеона для вывода материалов из указанных категорий. После инсталляции переходим в настройки модуля и во вкладке «Модуль» напротив опции «Category» выбираем категории из которых будут выводиться материалы. Если нужно вставить «Читать далее ...», то ставим так напротив «Show Readmore». Опция «Article Field to Order By» позволяет сортировать по дате, заголовкам, хитам и др. Остальное настраивается уже из ваших предпочтений.

Tabs Joomla!

Далее выбираем позицию, публикуем и видим результат:

Tabs Joomla!

Сайт модуля SP Accordion module
Страница на extensions.joomla.org

Демонстрация модуля SP Accordion module

Модуль Tabs GK5

Модуль вкладок «Tabs GK5» имеет немного другую панель управления. Настроек даже больше чем достаточно. Публикуем модуль и выбираем позицию отображения на сайте, например, «footer». Не забываем включить привязку к пунктам меню.

Переходим на вкладку «Tabs» и нажимаем «Add new tab». Заполняем заголовок (Title:) и контент (Content:). Сохраняем (Save) и повторяем действия для добавления нужного количества вкладок.
Анимацию, позицию и другие параметры подбирайте под свой дизайн сайта.

Tabs Joomla!

Скриншот фронтальной части сайта:

Tabs Joomla!

Сайт модуля SP Accordion module
Страница на extensions.joomla.org

Кстати, можно воспользоваться плагином для вставки шорткодов от разработчика bdthemes. Он имеет две версии. Бесплатная имеет меньшее количество шорткодов, но и того количества что есть, достаточно практически всем.

 

Из вышеперечисленного обязательно найдется то, что вам необходимо, а если нет платный вариант :). Я для своих целей выбрал плагин Tabs and Sliders. Он имеет небольшой размер и обновляется при внесении изменений в CMS Joomla !, а также исправляются ошибки и вносится дополнительный функционал. 

 

Если вы в поисках хостинга, могу порекомендовать Beget, которым сам пользуюсь (кстати, тестирование компонентов, модулей и плагинов происходят именно на нем).
Также могу порекомендовать дешевый
украинский хостинг, на котором есть один из моих проектов.