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

 

 

 

Думаю, что многие владельцы сайтов сталкиваются с необходимостью представления данных на своём сайте в виде таблицы. В редакторе материалов Joomla есть различные инструменты, которые позволяют создать и оформить таблицу. Но этих средств может не хватать, если Вы хотите красиво оформить таблицу, дать возможность Вашим пользователям сортировать в ней данные по столбцам, адаптировать её под мобильные устройства, добавить график по значениям, красиво оформить прайс лист и др. Безусловно, всё это можно сделать при помощи HTML и CSS, но если Вы в достаточной мере не владеете данными языками, тогда Вам поможет Droptables.

В обзоре будет участвовать последняя на момент написания статьи (07.04.2015) русскоязычная версия Droptables 2.0.1 в Joomla 3.4.1 (редактор TinyMCE 4.1.7), шаблон сайта «Protostar».

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

Рассмотрим основные возможности компонента таблицы Joomla.

  • Создание и управление таблицами отдалённо напоминает редактор таблиц Excel.
  • 6 встроенных тем оформления.
  • Управление таблицами из любого редактора материалов.
  • Автоматическое сохранение и отмена действий на основании AJAX.
  • Возможность сортировки данных таблиц во фронтальной части сайта.
  • Создание графиков на основании данных таблиц. 6 типов графиков (диаграмм) с настройками: гистограмма, круговой, кольцевой, лепестковый и так далее.
  • Изменение размера столбцов и строк перетаскиванием мыши.
  • Копирование ячеек при помощи перетаскивания.
  • Копирование всей таблицы в одно нажатие.
  • Редактор ячейки, столбца, строки (WYSIWYG) с возможностью изменения форматирования её содержимого, добавления изображений и ссылок.
  • Импорт/экспорт данных Excel.
  • Импорт из CSV,
  • Возможность разделения таблиц на категории в Droptables для упрощения работы с ними.
  • Управление таблицами Joomla 3 из административной и фронтальной части сайта.
  • Возможность изменять стили границ.
  • Возможность объединения, вставки\удаления строк и столбцов.
  • Возможность редактирования CSS-кода оформления таблицы прямо в редакторе.
  • Возможность вставки таблиц в модуль Joomla «HTML-код». Достаточно включить опцию Обрабатывать плагинами в модуле на вкладке Основные параметры.
  • Тип отзывчивости, позволяющий отображать на маленьких экранах только наиболее приоритетные столбцы таблицы.
  • Поддержка K2.
  • Поддержка Joomlaх.

Также стоит отметить наличие документации и технической поддержки на английском языке. Сам компонент (по состоянию на 08.04.2015) доступен на русском, украинском, английском, французском, немецком и португальском языках. А также частично переведен на польский и испанский.

Красивые таблицы Joomla

Приведу примеры таблиц и графиков, которые сделаны при помощи Droptables.

Droptables
Droptables
Таблицы Joomla 3
Таблицы Joomla 3
Прайс лист Joomla
Прайс лист Joomla
Красивые таблицы Joomla
Красивые таблицы Joomla
Красивые таблицы Joomla (1)
Красивые таблицы Joomla (1)
Красивые таблицы Joomla (2)
Красивые таблицы Joomla (2)

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

Таблицы Joomla 3

Доступ к компоненту таблиц Joomla можно получить прямо из редактора, нажав на кнопку Таблицы - Droptables (рисунок ниже).

Таблицы - Droptables
Таблицы - Droptables

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

Компонент таблиц Joomla
Компонент таблиц Joomla

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

  1. Удалить. Данный инструмент доступен и для категории таблиц Joomla.
  2. Копировать. Копирует таблицу внутри категории
  3. Переименовать. Данный инструмент доступен и для категории.
Управление таблицами
Управление таблицами

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

Создание таблицы
Создание таблицы

При нажатии правой кнопки мыши на ячейку появится контекстное меню (рисунок ниже).

  • Insert row above. Вставить строку над выделенной ячейкой.
  • Insert row below. Вставить строку под выделенной ячейкой.
  • Insert column on the left. Вставить столбец слева от выделенной ячейки.
  • Insert column on the right. Вставить столбец справа от выделенной ячейки.
  • Remove row. Удалить строку, в которой находится выделенная ячейка.
  • Remove column. Удалить столбец, в которой находится выделенная ячейка.
  • Undo. Отменить предыдущее действие.
  • Marge cells. Объединить выделенные ячейки (для этого необходимо выделить несколько ячеек).

Нажимая на заголовки столбцов (буквы) или на заголовки строк (цифры) можно выделить весь столбец или всю строку соответственно.

Контекстное меню ячейки
Контекстное меню ячейки

Вычисления в таблицах Joomla 3 напоминают Excel. Доступны такие функции:

  • SUM. Суммирует числа. Например: «=SUM(A1:A5)» (без кавычек, разделитель двоеточие) – просуммирует все числа в диапазоне от A1 до A5 выражение «=SUM(A1;A5)» (без кавычек, разделитель точка с запятой) просуммирует два числа (первое из ячейки «A1», а второе из «A5»). Разделитель «:» – указывает на диапазон от и до, а «;» на отдельные ячейки. В левой части на рисунке ниже показан пример ввода формулы, а в правой – результат расчётов.
Пример расчётов в таблице
Пример расчётов в таблице
  • COUNT. Функция COUNT (счёт) подсчитывает количество ячеек, содержащих числа. Например, для вычисления количества чисел в диапазоне «A1:A20» можно ввести следующую формулу: «=COUNT(A1:A20)» (без кавычек). Если в данном примере пять ячеек из диапазона содержат числа, то результатом будет значение «5».
  • CONCAT. Объединяет значения ячеек по «правилу»: слева направо, сверху вниз. Например: «=CONCAT(A1:B3)» даёт результат «82569» (рисунок ниже). Так как числа 8, 2, 5, 6, 9 стоят в указанном диапазоне и расположены слева направо, сверху вниз.
Объединение значений
Объединение значений
  • MIN. Поиск минимального значения.
  • MAX. Поиск максимального значения.
  • AVG. Среднее арифметическое.

В правой части Droptables доступны такие вкладки:

  • Таблица.
  • Формат.
  • Ещё.

Рассмотрим вкладку Таблица (рисунок ниже).

Таблица
Таблица
  • №1 вставляет выбранную Вами таблицу из доступных стилей №2.
  • №2 доступные стили таблиц. Обратите внимание, когда у Вас в области таблицы уже есть данные, применив к ним тему, они не заменятся демонстрационными, а если данных нет, то применятся демонстрационные с возможностью их редактирования.
  • №3 Заливка нечётных строк. Цвет заливки нечётных строк таблицы Joomla 3 (рисунок ниже).
  • №4 Заливка чётных строк. Цвет заливки чётных строк таблицы (рисунок ниже). При помощи этой опции и опции №3 можно создать «зебру». Добавляя строки и столбцы, они будут перекрашиваться в заданный Вами цвет.
«Зебра»
«Зебра»
  • №5 Использовать таблицу с сортировкой. Если выбрать Да, пользователи во фронтальной части сайта смогут сортировать данные в таблице по столбцам.
  • №6 Выравнивание. Выравнивание таблицы По центру, Слева, Справа или без выравнивания. Не путать с выравниванием содержимого ячеек таблицы
  • №7 Тип отзывчивости. Если выбрано Прокрутка, будет появляться горизонтальная полоса прокрутки при нехватке ширины на странице для отображения таблицы. Это, например, весьма актуально для прайс листов в Joomla на маленьких экранах (мобильные устройства). Если выбрано Скрытие столбца, то на узких экранах будут автоматически скрыты лишние столбцы и во фронтальной части сайта появится специальный элемент управления рядом с таблицей (рисунок ниже). Нажав на этот элемент, перед пользователем появится список всех доступных столбцов. Он может сам выбрать, какие из них скрывать, а какие отображать. Также Вы сами можете указать приоритет отображения каждого столбца. Для этого служат опции Столбец и Приоритет отзывчивости на вкладке Ещё (рассмотрено ниже в данной статье).
Скрытие столбца
Скрытие столбца

Формат

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

Формат
Формат
  • №1 Тип ячейки. Может быть По умолчанию – ввод значений или формул, а может быть Html. Если выбран второй вариант, при нажатии на ячейку откроется специальный редактор (рисунок ниже).
Редактор ячейки
Редактор ячейки

Он немного напоминает стандартный режим TinyMCE и позволяет вставить и отформатировать (задать начертание, отступы, выравнивание, стиль, гарнитуру, размер и цвет текста) внутри ячейки различное содержимое: текст, изображения, ссылки, нумерованные и маркированные списки. Также вставить фрагмент произвольного HTML кода (нажав на кнопку Source).

  • №2 Цвет фона ячейки. Позволяет указать цвет заливки ячейки.
  • №3 Границы. Droptables позволяет Вам указать внешний вид границы: Сплошные, Пунктирные, Штрихпунктирные, Без границы.
  • №4 позволяет задать цвет границ таблицы Joomla 3.
  • №5 позволяет задать толщину границ прайс листа Joomla.
  • №6 - при помощи этой группы инструментов можно указать, к каким границам применять опции №3, 4 и 5. То есть, сперва Вы выделяете в таблице те ячейки, которым хотите задать границу, затем из №3 выбираете тип границы, в №4 задаёте её цвет, в №5 указываете её толщину, а потом нажимаете на один из инструментов в области №6 и применяете указанное в №3, 4 и 5 форматирование к тем «частям границы», которые отображены на инструментах №6. Например, нажав на левый верхний инструмент, Вы примените форматирование только к верхней границе ячейки.
  • №7 Шрифт. Позволяет сменить гарнитуру шрифта содержимого ячеек\ячейки. Доступно девять шрифтов: Arial, Times New Roman, Verdana и др.
  • №8 при помощи данного инструмента компонент таблиц Joomla позволяет Вам задать цвет текста содержимого ячейки.
  • №9 размер текста (кегль).
  • №10 инструменты для изменения начертания шрифта: жирный, подчёркнутый, курсив.
  • №11 инструменты для изменения выравнивания содержимого ячейки по горизонтали и вертикали.
  • №12 Высота строки в пикселях.
  • №13 Ширина строки в пикселях.

Как видите, настроек достаточно много. Но это не все доступные в арсенале Droptables опции. Перейдём к рассмотрению вкладки Ещё.

Таблицы Excel и Joomla

Как уже упоминалось ранее, Droptables позволяет производить импорт\экспорт между Excel и Joomla 3. Для этого служат инструменты на вкладке Ещё (рисунок ниже).

Excel Joomla 3
Excel Joomla 3
  • №1 Импорт Excel. Позволяет импортировать таблицу из Excel в Joomla 3. Помимо XLS и XLSX поддерживается CSV и ODT (OpenDocument). Обратите внимание, что при импорте могут быть «искажения» (неточности). Всё зависит от сложности импортируемых данных. Также обратите внимание на то, что при импорте их Excel будут взяты данные только с первого листа файла.
  • №2 Экспорт Excel. Позволяет экспортировать данные из Droptables в XLSX. Обратите внимание, что при экспорте могут быть «искажения» (неточности). Всё зависит от сложности экспортируемых данных.
  • №3 Столбец. Если на вкладке Таблица для опции Тип отзывчивости выбрано Скрытие столбцы, тут можно указать, для какого столбца в таблице Вы задаёте приоритет из списка №4 Приоритет отзывчивости.
  • №4 Приоритет отзывчивости. Указывает насколько важным является отображение того или иного столбца, выбранного в списке №3 Столбец. Где «0» – приоритет не задан вручную; «1» – наименее важный, «2, 3, …» – важность возрастает с увеличением порядкового номера; Persisent – необходимо обязательно показать данный столбец. Например, если у Вас есть прайс лист Joomla, где в столбце «A» – наименование товара, в «B» – артикул, в «C» – описание, в «D» – цена, и Вам нужно обязательно отобразить наименование товара и его стоимость даже на экране телефона, то для столбца «A» (наименование товара) нужно задать приоритет Persisent, для «D» (цена) – «4», для «C» (описание) – «3», а для «B» можно ничего не задавать. В таком случае, пользователь даже на очень маленьком экране увидит название и стоимость товара.Если будет место, появится и описание, а если места будет много, то увидит все столбцы.
  • №5 Отступы. Droptables позволяет задать верхний, правый, нижний и левый отступы от содержимой ячейки до её границ.
  • №6 Радиус скругления фона ячеек. Если Вы задавали фон ячейки, то при помощи данной группы опций Вы можете задать радиус скругления каждого из углов фона ячейки (рисунок ниже).
Скругление фона
Скругление фона
  • №7 Настраиваемый CSS для этой таблицы. Вы можете добавить произвольный CSS-стиль к элементам таблицы.

Выяснить нужные классы стилей можно при помощи встроенных или сторонних средств для разработчиков в браузере. На рисунке ниже это Firebug 2.0.9 в Mozilla Firefox 37.0.1.

CSS-код
CSS-код

«r» – строки, «c» – столбцы.

Графики

Вы можете дополнить свои таблицы Joomla 3 графиками (диаграммы). Для этого в левой области Droptables выберите таблицу, по которой необходимо построить график, выделите в ней диапазон ячеек, по которым необходимо строить график, и нажмите в верхней части кнопку Добавить новую таблицу. Перед Вами появится редактор графика (рисунок ниже).

График
График

Доступны такие виды графиков (диаграмм) как (по аналогии с Excel): «С областями», «Гистограмма», «Заполненная лепестковая», «Полярные области», «Круговая», «Кольцевая» – на рисунке выше они расположены слева направо, сверху вниз.

  • Переключить Строка/Столбец. При помощи данной опции компонент таблиц Joomla позволяет Вам выбрать, какие данные должны быть по оси Х, а какие по оси Y (элементы ряда и подписи оси соответственно). Доступно Строка или Столбец. В моём примере, если выбрать Строка, то по оси Х (подписи) будут месяцы, а по оси Y (сами столбцы) будут значения принятых отданных и потерянных пакетов данных. По три столбца на каждый месяц (Принято, Отдано, Потери).
  • Использовать первую/первый строку/столбец в качестве заголовка. Если Вы выбрали Да, то под графиком появятся подписи из первой строки таблицы. В моём примере по оси Х (подписи) будут месяцы.
  • Ширина, Высота. Ширина и высота области графика в пикселях.
  • Выравнивание. Выравнивание области графика на странице (По центру, Справа, Слева, Нет).
  • Набор данных. Содержит список столбцов\строк таблицы (в зависимости от параметра, выбранного для опции Переключить Строка/Столбец), по которым строится график. Выбрав один из них, можно задать ему цвет при помощи опции Цвет, расположенной ниже.

Русификатор Droptables

Скачать русификатор Droptables.

 

Как видите, Droptables весьма функциональный компонент таблиц Joomla 3 при помощи которого достаточно просто можно сделать функциональный и красивый прайс лист или любую другую таблицу.

 

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