Обзоры расширений Joomla

 

 

 

DJ-Tabs – это расширение Joomla для отображения контента сайта во вкладках или аккордеоне. Есть возможность отображения содержимого во вкладках или аккордеоне на отдельной странице, в модуле или внутри материала. Под контентом (содержимым) понимается: отдельный материал Joomla или K2; категория материалов Joomla или K2; позиция модуля; видео с YouTube или Vimeo. Пример работы компонента Вы можете посмотреть на демонстрационном сайте разработчика. Обратите внимание, что на данный момент расширение не позволяет выводить, например, обычные фрагменты текста\изображения внутри материала или модуля.

DJ-Tabs прекрасно подойдёт для оформления вывода материалов (новостей), например, на главной странице сайта. Таким образом можно существенно сократить занимаемое материалами место на странице и при этом представить больше информации.

В обзоре будет участвовать последняя, на момент написания статьи (24.02.2016), русскоязычная версия DJ-Tabs 1.3.1 в Joomla 3.4.8. Обзор будет проходить на сайте с «быстрым стартом» шаблона JM University 1.1.1 с англоязычными демонстрационными данными.

Описание DJ-Tabs

Рассмотрим основные особенности DJ-Tabs.

  • Поддержка отображения во вкладках и аккордеоне материалов и категорий Joomla/K2; модулей; видео с YouTube или Vimeo.
  • 12 готовых тем оформления вкладок и аккордеонов. 4 – не редактируются, 8 – редактируются из административной части сайта (более двадцати опций). Можно создавать свои.
  • Возможность создания групп табов и аккордеонов для Joomla 3.
  • Возможность вывода различных групп в каждом модуле.
  • Гибкая настройка отображения табов и аккордеона: длина заголовка, отображение\скрытие изображений, добавление произвольного HTML и так далее.
  • Настройка «поведения» содержимого и самих вкладок и аккордеона. Например, автоматическое воспроизведение видео.
  • Генерация оптимизированных миниатюр для изображений материалов Joomla. Поддержка сжатия без потерь при помощи сервиса reSmush.it.
  • Поддержка Joomla 2.5-3.
  • Русскоязычный интерфейс с русскоязычными всплывающими подсказками к настройкам.
  • Удобная административная часть (рисунок ниже).
  • Наличие справки (на англ.).
  • Оперативная техническая поддержка (на англ.)
DJ-Tabs
DJ-Tabs

Элементы

DJ-Tabs предоставляет возможность легко ориентироваться в табах и аккордеонах при помощи поиска, фильтрации и сортировки (рисунок ниже).

Управление вкладками и аккордеонами
Управление вкладками и аккордеонами

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

Новый\Изменить

На данной вкладке (рисунок ниже) Вы сможете создать или изменить элемент DJ-Tabs. Под элементом понимаются вкладки и аккордеоны.

Настройка вкладок Joomla 3
Настройка вкладок Joomla 3

Группа может быть создана в одноимённом разделе DJ-Tabs и служит для предоставления возможности отображения нескольких элементов на странице, в модуле или в материале Joomla. Например, можно создать элемент «Вкладка» с отображением видео с YouTube, элемент «Вкладка» с выводом категорий материала Joomla, элемент «Вкладка» с отображением позиций модуля, указать для этих элементов одну группу и вывести эту группу в виде табов на странице.

В настройках элемента наиболее интересной, на мой взгляд, опцией является Тип.

  1. Отдельный материал. Можно указать один материал Joomla (он уже должен быть создан).
  2. Категория материала. Можно выбрать одну из уже существующих категорий материалов для отображения в виде табов (рисунок ниже) или аккордеона. Обратите внимание, что внешний вид очень сильно зависит от Ваших настроек и шаблона сайта. При этом тип элемента (вкладка или аккордеон) зависит от настроек «способа вывода»: пункт меню, модуль, код в материале Joomla. Об этом мы поговорим немного ниже в статье.
  3. Позиция модуля. Позволяет отображать модули из позиции шаблона. Причём модулям можно назначить произвольную позицию (не существующую в Вашем шаблоне по умолчанию), например, «moya-pozitsiya» (без кавычек) и эту же позицию указать в поле Позиция в настройках вкладки DJ-Tabs. Подробнее о том, как можно определить существующие позиции шаблона, Вы можете узнать в статье «Ответы на вопросы по шаблонам для Joomla. Установка, настройка, удаление».
  4. Ссылка на видео. Позволяет отображать видео с YouTube или Vimeo. Ссылку нужно задавать в таком формате: «https://www.youtube.com/watch?v=D6Y3foF5pjI» (без кавычек).
Вкладки Joomla 3
Вкладки Joomla 3

Настройки вкладок

Тут Вы сможете добавить иконку на вкладку и любой произвольный HTML-код (рисунок ниже). При этом не обязательно добавлять именно HTML-код, можно воспользоваться привычным редактором материалов Joomla, разместив текст, ссылку, изображение и так далее (не всё уместно).

Настройки вкладок
Настройки вкладок

При помощи одноимённой опции можно задать одну из иконок, доступных в «библиотеке». Иконка, на рисунке ниже обведена жёлтым, показана сразу слева от надписи: «Вкладки Joomla 3», а Настраиваемый HTML (обведён красным) слева от иконки логотипа Joomla – надпись «ПРИМЕР, ПРИМЕР».

Табы для Joomla 3
Табы для Joomla 3

Опции материала

Данные настройки (рисунок ниже) доступны только для типа содержимого вкладки Категория материала и Отдельный материал.

Опции материала
Опции материала

Все опции понятны из их названия или оснащены дополнительными подсказками. Отмечу, что так же, как и в DJ-MediaTools, в DJ-Tabs можно задавать «глобальные» настройки и применять их к «локальным» элементам при помощи параметров Использовать глобальные, а также задавать свои собственные параметры для каждой настройки каждого элемента. Например, в общих настройках DJ-Tabs можно указать значение для позиции даты. Это будет влиять на все элементы, для которых выбрано Использовать глобальные для Позиция даты. Поменяв это значение в общих настройках DJ-Tabs, Вы автоматически поменяете их для всех элементов.

На рисунке ниже показаны элементы отдельно взятой вкладки фронтальной части сайта и их соответствие некоторым из опций в списке ниже. Номер в списке совпадает с номером на изображении.

  1. Показывать дату.
  2. Показывать заголовок.
  3. Показывать изображение.
  4. Показывать описание.
  5. Показывать кнопку Подробнее.
  6. Показывать категорию.
  7. Показывать автора.
Настройки материала во вкладке
Настройки материала во вкладке

Настройки категории материала

Данные настройки (рисунок ниже) доступны только для типа содержимого вкладки Категория материала.

Настройки категории материала
Настройки категории материала

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

  1. Аккордеон - Первые раскрыты (изначально). При переходе посетителя на вкладку с материалами категории первый материал будет показан в открытом состоянии.
  2. Аккордеон - Все свёрнуты (изначально). При переходе посетителя на вкладку с материалами категории все материалы будут показаны в открытом состоянии.
  3. Без аккордеона - Материалы в столбцах. Позволяет разместить материалы внутри таба в столбцы. Можно указать количество столбцов (опция Столбцы материалов) и расстояние между материалами в процентах (опция Расстояние между материалами).
Вкладки Joomla 3
Вкладки Joomla 3

На рисунке ниже показан пример отображения материалов категории внутри таба в два столбца.

Материалы внутри таба в столбцах
Материалы внутри таба в столбцах

DJ-Tabs позволяет ограничить количество выводимых материалов (опция Лимит материалов), их «свежесть» (опции Минимальная дата материала, Максимальная дата материала и Материалы за последние Х дней) и задать порядок сортировки (опция Порядок следования материалов).

Также можно задать ограничение на вложенность подкатегорий выбранной Вами категории материалов Joomla (опция Максимальный уровень категории). Например, в менеджере категорий Joomla у Вас есть такая структура категорий.

 

  • Joomla
    • Расширения
    • Русификаторы
    • Шаблоны
      • Адаптивные
      • Русские
      • Универсальные
      • Специализированные
    • Защита сайта
  • Создание сайтов
    • Artisteer
    • Incomedia Website X5
    • TemplateToaster

 

Задав в опции Категория/Категории на вкладке Изменить варианты «Joomla» и «Создание сайтов», а также выбрав для опции Максимальный уровень категории (на вкладке Настройки категории материала) значение «1» в табе во фронтальной части сайта будут выводиться только материалы из категорий «Joomla» и «Создание сайтов» (без материалов вложенных категорий).

Задав в опции Категория/Категории на вкладке Изменить варианты «Joomla» и «Создание сайтов», а также выбрав для опции Максимальный уровень категории (на вкладке Настройки категории материала) значение «2» в табе во фронтальной части сайта будут выводиться только материалы из категорий «Joomla», «Создание сайтов», «Расширения», «Русификаторы», «Шаблоны», «Защита сайта», «Artisteer», «Incomedia Website X5», «TemplateToaster». А материалы из категорий «Адаптивные», «Русские», «Универсальные», «Специализированные» выводиться не будут.

Группы

Как уже упоминалось ранее в статье, группы (рисунок ниже) служат для предоставления возможности отображения нескольких элементов на странице в модуле или в материале Joomla. Например, можно создать элемент «Вкладка» с отображением видео с YouTube, элемент «Вкладка» с выводом категорий материала Joomla, элемент «Вкладка» с отображением позицией модуля, указать для этих элементов одну группу и вывести эту группу в виде табов на странице.

Группы
Группы

Темы

Если Вы используете один из шаблонов от Joomla-Monster, например, JM Job ListingsJM University или JM Joomads, то в них наверняка заложены стили для вкладок и аккордеонов DJ-Tabs. В этом случае сможете в настройках пункта меню или модуля выбрать соответствующий стиль шаблона, и вкладки\аккордеоны будут оформлены в едином целом с остальным сайтом. Но при необходимости Вы сможете создать и применить собственные стиль или выбрать стили, доступные в самом DJ-Tabs (рисунок ниже).

Темы
Темы

При создании\изменении темы (рисунок ниже) Вы сможете включить её в список «случайных» тем (опция Случайно). В настройках пункта меню, модуля или при вставке табов в материал Joomla можно выбрать тему «Случайно» – это значит, что для разных посетителей сайта может быть показана разная (случайна) тема из списка тем, у которых для опции Случайно выбрано Да.

Создание\изменение темы
Создание\изменение темы

Стилизация (рисунок ниже) позволяет Вам задать настройки оформления вкладок и аккордеона Joomla 3 без правки CSS-кода.

Стилизация
Стилизация
  1. Tab's height. Высота вкладки (в пикселях).
  2. Tab's width. Ширина вкладки в пикселях. Можно указать «auto» (без кавычек) для того, чтобы ширина вкладки подстраивалась под ширину содержимого вкладки. В данном случае под вкладкой понимается сам элемент вкладки с её названием, а не содержимое вкладки.
  3. Tab color. Цвет вкладки.
  4. Active tab color. Цвет активной вкладки.
  5. Tab title color. Цвет заголовка вкладки.
  6. Active tab title color. Цвет заголовка активной вкладки.
  7. Panel color. Цвет панелей аккордеона. Актуально для типа содержимого вкладок Категория материала.
  8. Active panel color. Цвет активной панели аккордеона. Актуально для типа содержимого вкладок Категория материала.
  9. Panel title color. Цвет заголовка панелей аккордеона. Актуально для типа содержимого вкладок Категория материала.
  10. Active panel title color. Цвет заголовка активной панели аккордеона. Актуально для типа содержимого вкладок Категория материала.
  11. Date color. Цвет даты. Актуально для типа содержимого вкладок Отдельный материал.
  12. Panel borders style. Стиль (тип) границ панелей аккордеона. Актуально для типа содержимого вкладок Категория материала.
  13. Active panel brdrs style. Стиль (тип) границ активной панели аккордеона. Актуально для типа содержимого вкладок Категория материала.
  14. Panel borders color. Цвет границ панелей аккордеона. Актуально для типа содержимого вкладок Категория материала.
  15. Active panel brdrs color. Цвет границ активной панелей аккордеона. Актуально для типа содержимого вкладок Категория материала.
  16. Toggler color. Цвет «раскрывающего (пассивного)» маркера панели аккордеона. Актуально для типа содержимого вкладок Категория материала.
  17. Active toggler color. Цвет «закрывающего (активного)» маркера панели аккордеона. Актуально для типа содержимого вкладок Категория материала.
  18. Tab border radius. Радиус скругления углов вкладок. Актуально для типа содержимого вкладок Категория материала.
  19. Panel border radius. Радиус скругления углов панелей аккордеона. Актуально для типа содержимого вкладок Категория материала.
  20. Toggler border radius. Радиус скругления углов «раскрывающего (активного)» и «закрывающего (пассивного)» маркера панели аккордеона. Актуально для типа содержимого вкладок Категория материала.
  21. Image border radius. Радиус скругления углов границы изображения.
  22. Article content color. Цвет шрифта материалов. Актуально для типа содержимого вкладок Категория материала и Отдельный материал.

На рисунке ниже показаны элементы, для которых можно менять настройки стиля. Номера на рисунке совпадают с номерами в списке выше.

Элементы стилизации
Элементы стилизации

Настройка DJ-Tabs

Почти все настройки DJ-Tabs понятны из названия, оснащены всплывающими подсказками на русском языке или аналогичны одноимённым опциям, рассмотренным выше в статье. На первой вкладке Опции материала (рисунок ниже), на мой взгляд, стоит пояснить лишь опции Заголовок как ссылка и Показывать изображение.

  • Заголовок как ссылка. Если для опции выбрано Да, то по нажатию на заголовок посетитель перейдёт к полной версии материала Joomla. Это касается подобных опций Изображение как ссылка и Описание как ссылка.
  • Показывать изображение. Вы можете указать, какое из изображений материала нужно отображать во вкладке. Доступны такие варианты:
    • Изображение для вступительного текста материала. Данное изображение задаётся в настройках материала, в менеджере материалов Joomla, на вкладке Изображение и ссылки, опция Изображение для вступительного текста материала.
    • Изображение полного текста материала. Данное изображение задаётся в настройках материала, в менеджере материалов Joomla, на вкладке Изображение и ссылки, опция Изображение полного текста материала.
    • Первое изображение из содержимого материала. Это первое изображение, размещённое в самом материале.
    • Ничего.
Настройка DJ-Tabs
Настройка DJ-Tabs

На вкладке Настройки Вкладок/Аккордеона (рисунок ниже) Вы можете сконфигурировать опции «действий» элементов.

Настройки Вкладок/Аккордеона
Настройки Вкладок/Аккордеона
  • Автоматическое Воспроизведение/Пауза для видео. Выберите, нужно ли воспроизвести или приостановить видео автоматически, после переключения на или с вкладки, содержащей видео.
  • Количество строк. Можно задать, во сколько строк необходимо отображать вкладки (рисунок ниже). Если строк меньше, чем вкладок, то они будут отображаться в одну строку.
  • Триггер вкладок. Можно задать, элементы вкладок должны отображаться по нажатию или при наведении курсора мыши.
  • Скорость перехода. Можно выбрать продолжительность анимации переключения вкладок/аккордеона.
  • Перейти к элементу аккордеона. Активируйте данную опцию, если необходимо прокрутить страницу к верху активного элемента аккордеона.
Вкладки в три строки
Вкладки в три строки

Вывод вкладок и аккордеонов на сайте

Табы и аккордеоны можно выводить на сайте при помощи:

  • Пунктов меню Joomla.
  • Модулей.
  • Путём вставки в материал Joomla.

Общие этапы (предполагается, что у Вас уже установлен, активирован и настроен DJ-Tabs (включая плагины), а также есть контент, который нужно выводить в табах и\или аккордеонах):

  1. Создайте группу (в компоненте DJ-Tabs).
  2. Настройте элементы (в компоненте DJ-Tabs).
  3. При необходимости, настройте\создайте темы (в компоненте DJ-Tabs).
  4. Для вывода вкладок и аккордеонов на отдельной странице сайта перейдите в менеджер меню Joomla, зайдите в нужное меню и создайте там один из двух типов меню: Вид аккордеона (рисунок ниже) или Вид вкладок. Все опции, доступные Вам для редактирования, или идентичные тем, что уже были рассмотрены для компонента DJ-Tabs, или это опции общие для всех пунктов меню Joomla.
  5. Для вывода вкладок и аккордеонов в модуле перейдите в менеджер модулей Joomla и создайте модуль «DJ-Tabs». Все опции, доступные Вам для редактирования, или идентичные тем, что уже были рассмотрены для компонента DJ-Tabs, или это опции общие для всех модулей Joomla. За исключением опции Исправление видео для IE11/Win10, которая принудительно отключает опцию Автоматическое Воспроизведение/Пауза для видео в Internet Explorer 11 в Windows 10, для модуля с целью улучшения совместимости.
  6. Для вывода вкладок и аккордеонов в материале перейдите в менеджер материалов Joomla, поставьте курсор мыши в материале там, где нужно вставить вкладку или аккордеон, и нажмите на кнопку «DJ-Tabs» в нижней части редактора материалов Joomla. Все опции, доступные Вам для редактирования, уже были рассмотрены для компонента DJ-Tabs (Группа, Тема, Макет).
Аккордеон Joomla 3
Аккордеон Joomla 3

Русификатор DJ-Tabs

Скачать русификатор DJ-Tabs.

 

Как видите, опции предоставляют широкий спектр возможностей. Единственное, чего не хватает лично мне, так это возможности отображения в табах и аккордеоне произвольных фрагментов текста и HTML для выведения информации внутри материалов в удобном виде.

 

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