Публикации

Регистрация

 

Skin48 1

SP Tab – модуль вкладок от студии JoomShaper. С его помощью в каждой вкладке («табе») выводят различные заранее созданные модули joomla. SP Tab высоко оценён веб-мастерами: 4 балла из пяти на официальном портале джумла, по критериям функциональность, простота использования, поддержка и документация.

Другие его отличительные особенности:

  • 10 встроенных стилей оформления, в каждом 3 цветовые схемы, плюс пользовательский стиль (можно настраивать),
  • 4 типа анимации и множество эффектов перехода.

 

 

Меню статьи

 
 

Установка и настройка

Информация о разработчике и версии модуля. Способ установки и первые настройки.

Как создавать структурированный контент

Размещаем во вкладках сложноструктурированное содержимое, компонуем картинки, текст, другие модули.

Выводы о модуле SP Tab

В каких случаях пригождается модуль, насколько он доработан.

 

Установка и настройка

Распространяется бесплатно, можно скачать на сайте разработчика (JoomShaper.com). Последнее обновление создано для joomla3.х (версия SPTab 2.0).

Установка стандартная (через «Менеджер расширений» - «Установка»).

Skin48 2

Находим новый модуль среди других.

Skin48 3

Откроем и увидим несколько вкладок с настройками.

На первой – стандартный набор: название, позиция, опубликовано/не опубликовано, дата публикации и т.п. По умолчанию модуль не опубликован, поэтому обязательно активируем его, скроем английское название или переименуем, зададим позицию, например, banner 2.

Skin48 4

На второй – выбор страниц, на которых будет выводиться SP Tab.

Основные параметры

На третьей – «Параметры» – произведем основные настройки:

  • выберем модули для отображения в табах,
  • выберем способ сортировки (по названию, по порядку, т.е. в том порядке, в котором вы только что выбирали модули),
  • далее указываем направление (по возрастанию, нисходящий),
  • в следующем поле можно указать высоту вкладки (по умолчанию стоит 30),
  • укажем положение табов (вверху, внизу),
  • и последнее – зададим в пикселях отступы от границ вкладок до контента, например, 5, 10, 10 и 10 px.

Skin48 5

Настройки стиля

На четвертой вкладке - Preset Styles – настраиваем оформление. Выбираем стиль, настраиваем цвета.

Если выберем один из предустановленных стилей, то сможем выбрать одну из трех цветовых схем – красный, синий или зеленый. Но есть и другие варианты:

  • raw– необработанный, сырой,
  • custom– пользовательский, настраиваемый.

Skin48 6

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

Skin48 7

Настройки анимации

На пятой вкладке - Animation Option– настраиваем анимационные эффекты.

  • активировать по клику или при наведении,
  • скорость анимационных эффектов (по умолчанию 400),
  • выбираем тип (один из четырех: Fade– «увядать», HorizontalScroll– «горизонтальная прокрутка», Vertical– вертикальная или вариант без анимации), а затем
  • эффект перехода (один из множества: линейный, плавающий и др.).

Skin48 8

Например, если выбрать горизонтальную прокрутку, при переходе (клике) на другую вкладку её содержимое будет сдвигаться от правого края экрана к левому.

На этом действия по настройке SP Tab можно завершить, не открывая оставшиеся две вкладки: «Дополнительные настройки» и «Права доступа», с привычными для модулей джумла параметрами (альтернативный макет, суффикс CSS, кеширование, теги и настройки прав доступа для разных групп пользователей).

Сохраним результат, проверим, как выглядят табы на сайте, насколько уместно оформление и анимация.

Как создавать структурированный контент

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

Так, тип модуля «html-код» позволяет выводить пользовательский контент в виде текста, картинок, таблиц, видео, других модулей, меню, материалов, контактов и всего того, что можно вставить с помощью текстового редактора джумла TinyMCE.

В нашем примере на скриншотах на первом табе выведен список в формате аккордеона. Но между ним (списком) и заглавием таба не хватает нескольких наводящих фраз с наглядной иллюстрацией того, о чем идёт речь. Попробуем создать логично структурированный контент с помощью SP Tab и стандартного модуля joomla– «html-кода». Добавим недостающее описание, картинку, а затем уже вставим аккордеон. А под списком можно разместить отзывы довольных клиентов, видеообращение сотрудников компании, ленту с логотипами партнеров и т.д.

Skin48 9

Skin48 10

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

Вывод

Благодаря встроенным стилям, цветовым схемам, типам анимации и множеству эффектов перехода модуль SP Tab становится отличным инструментом вывода контента. С его помощью можно сортировать списки с услугами компании или с товарами разных категорий. Пригодится приложение и на информационных ресурсах, для сортировки видео, аудио, фото контента и новостных статей.

Единственное, чего не хватает в разработке, нескольких полезных функций:

  • первое – возможности увеличивать шрифт текста на вкладках
  • второе, быстро переписывать заголовки (не через замену названий выводимых модулей, а прямо в настройках SPTab),
  • и, третье, ограничивать высоту содержимого (если оно разного размера, то при переходе с вкладки на вкладку контент будет «прыгать».