Вывод специализаций компонента "Запись на прием" с помощью модуля "Menu FS" на примере Стоматологии

В ноябре месяце 2011 года вышла новая версия компонента «Запись на прием». Главной особенностью нового релиза стала возможность привязки пункта меню к отдельно взятой специализации. Чтобы продемонстрировать эту функцию, мы решили написать данную статью, где продемонстрируем привязку специализаций к пунктам меню на примере компонента и модуля Menu FS.

Для тех, кто первый раз слышит словосочетание «Menu FS», сообщаю: данный компонент в комплекте с модулем позволяет создавать меню, где каждый пункт состоит из заголовка, изображения и краткого текстового описания.

Более того, на каждый пункт меню предусмотрено три файла с изображениями. Первое из них пользователь видит, когда открывает страницу, где отображён модуль Menu FS, второе будет показано, после того, как на изображение наведён курсор мыши и, наконец, третье показывается в момент клика по пункту меню.
 

Установка Menu FS

Компонент Menu FS распространяется на коммерческой основе, купить Menu FS можно в нашем Интернет — Магазине.

После того, как вы оплатили покупку и скачали архив, самое время изучить его содержимое. Распакуем menufsp.zip на жестком диске компьютера в любом каталоге. Мы можем наблюдать целых пять архивов. Во избежание лишних вопросов, напишу небольшое пояснение к каждому из них:

com_menufsp.zip — это собственно компонент Menu FS. Этот дистрибутив устанавливается стандартно, через административную панель сайта. Причем делается это независимо о того, какая у вас версия Joomla: 1.0, 1.5, 1.6 или 1.7

mod_menufsp10en.zip — это дистрибутив модуля Menu FS под Joomla 1.0 (английская версия)

mod_menufsp10ru.zip — дистрибутив модуля Menu FS под Joomla 1.0 (русская версия)

mod_menufsp15.zip — дистрибутив модуля Menu FS под Joomla 1.5

mod_menufsp16-17.zip - дистрибутив модуля Menu FS под Joomla 1.6 и Joomla 1.7

Поскольку в процессе написания статьи я использовал демо сайт, построенный на основе Joomla 1.5, меня в этом списке интересовали два архива: com_menufsp.zip и mod_menufsp15.zip. Именно они были последовательно инсталлированы через административную панель сайта.


 

Подготовка к работе с Menu FS

 

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

К примеру нажатие на пункт меню «Терапия» будет открывать страницу, где представлены терапевты условной поликлинике. Нажатие на пункт меню «Хирургия» покажет нам всех хирургов. И так далее.

Предположим, у нас есть шесть специализаций: Терапия, Хирургия, Педиатрия, Стоматология, Офтальмология, Психиатрия

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

Почему два? Мы помним, что компонент Menu FS позволяет применять картинки на любое из трех действий мышки: бездействие, наведение на картинку и клик по пункту меню.

Исходное изображение для специализации «Стоматология» выглядит в моем случае так:



 

Имя файла звучит, как zubnoy_vrach.jpg

В графическом редакторе обработаем картинку таким образом, чтобы получилось нечто подобное:

Сохраним новый файл под именем zubnoy_vrach_2.jpg

Я решил пойти по простому пути. Несмотря на то, что в компоненте Menu FS предусмотрено три события для мыши, было принято решение обойтись двумя файлами. Схема событий и использованных при этом файлов будет следующая:

  • Страница с меню открыта, но курсор мышки находится не в фокусе изображения — используем файл zubnoy_vrach.jpg

  • Курсор мыши наведен на изображение пункта меню — используется файл zubnoy_vrach_2.jpg

  • Клик по пункту меню — используется опять файл zubnoy_vrach.jpg

Таким образом, перед настройкой компонента и модуля Menu FS, мы должны подготовить 12 файлов с изображениями.
 

Настройка компонента Menu FS

Все наши 12 файлов с изображениями, необходимо закачать на сервер в каталог, где размещен наш сайт. Я предлагаю создать в каталоге «images» отдельную папку, которую назовем «menufs».

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


 

Откроем административную панель сайта и зайдем: Компоненты — MENU FSP — Settings и в текстовое поле «Путь к картинкам меню» введем путь к нашему свежесозданному каталогу:
 


 

Создание меню специализаций

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

Создаем меню специализаций в Joomla 1.7

 

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

Для этого в административной панели Joomla проходим путь «Меню — Менеджер Меню — Создать меню»


 



 

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

Заголовок — значение этого поля будет впоследствии отображаться в списке существующих меню. Рекомендую присвоить ему такое название, чтобы в будущем не приходилось вспоминать: для чего и зачем оно было создано.
 



 

Тип меню — поле заполняется латиницей и является системным именем меню, то есть с точки зрения Joomla, именно оно и является настоящим именем, впоследствии в настройках модулей и компонентов необходимо будет указывать именно его.

Описание — поле сие заполняется произвольно и служит для ввода краткого описания нашего меню. В общем-то, это ещё один способ не забыть - о чем было созданное меню.

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

Настало время создать свой первый пункт меню. Для этого в верхнем меню заходим «Меню — Специализации — Создать пункт меню»
 



 

Первая необходимая операция — это выбор типа меню. С неё и начнём. Нажимаем кнопку «Выбрать» напротив поля «Тип пункта меню».


 

Далее мы должны в списке найти компонент «TTFSP» и выбрать пункт «Specializations»


 

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


 

Далее остается нажать кнопку «Сохранить и создать» и приступить к созданию следующего пункта меню, который создаётся аналогичным образом.

Создаем меню специализаций в Joomla 1.5

 

Чтобы создать меню в Joomla 1.5, необходимо зайти «Все Меню — Менеджер меню»



 

Далее нашему вниманию, предстанут три текстовых поля.

Системное имя — заполняется латинскими буквами и является внутренним системным именем, по которому система управления контентом Joomla отличает одно меню от другого

Заголовок — это поле заполняется произвольно, значение указанное здесь будет впоследствии отображаться в списке существующих меню

Описание — еще одно поле, которое нам позволено заполнить произвольно, служит для краткого описания нашего меню



 

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



 

В правом верхнем углу нажимаем кнопку «Создать» и в открывшемся списке кликаем по ссылке «Запись на прием». Откроются подпункты, мы выбираем «Specializations»

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

Настройка компонента Menu FS (продолжение)

 

Ниже описанные действия будут аналогичны, как для Joomla 1.5, так и для Joomla 1.7, поэтому я не буду создавать отдельных разделов в статье, а буду рассматривать настройку компонента Menu FS на примере Joomla 1.5.

Чтобы привязать к каждому пункту меню те самые картинки, про которые я писал в самом начале статьи, необходимо перейти «Компоненты — Menu FSP — View»


 

Откроется полный список всех существующих пунктов меню. Чтобы отсортировать и показать, те, что относятся лишь к меню «specialization», обратите на выпадающий список «Group». Выберем там именно то меню, пункты которого будут подвергаться редактированию.

 

Рассмотрим редактирование на примере пункта меню «Стоматология». Кликаем мышкой по заголовку меню.

Откроется страница, где мы можем указать параметры пункта. Нас интересует изображение, которое мы выбираем с помощью выпадающего списка.


 

Как видим из рисунка, картинкой по умолчанию является файл zubnoy_vrach.jpg, зато за картинку при фокусе уже отвечает изображение zubnoy_vrach_2.jpg и, наконец, при нажатии на картинку отобразится опять zubnoy_vrach.jpg.

Все эти настройки соответствуют тому о чем, я писал в начале статьи.

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


 

Настройка модуля Menu FS

 

Мы приступаем, пожалуй, к самому ответственному этапу нашей работы. Чтобы приступить к настройке модуля Menu FS, необходимо перейти «Расширения» - Менеджер модулей» и нажать кнопку «Создать»

В списке выбираем «MENU FS»


 

Откроется страница настроек модуля, где последовательно изучим правую часть.

Первое, на что мы должны обратить внимание, это выпадающий список «Меню». Здесь мы должны указать именно то меню, над которым недавно производили магические действия под внедрению картинок. Соответственно, выбираем меню «speciaalization»

В выпадающем списке «Расположение меню» выбираем значение «По количеству столбцов». А в текстовое поле «Количество столбцов для расположения по количеству столбцов» выставляем значение «3».

Таким образом, наше меню будет выводиться в три колонки.

Чтобы в нашем меню не только менялись картинки, но при наведении изображение увеличивалось изображение мы должны параметры «Загружать jQuery» и «Эффект jQuery » установить в положение «ДА».

В текстовое поле «Увеличение px» установим значение «20», что будет означать — наши картинки при наведении мышки будут увеличиваться ровно на 20 пикселей.

Параметр «Показывать картинки» установим в значение «ДА», а «Расположение картинки» укажем, как «Верх». Сие будет значит, что наше изображение будет располагаться сверху от текста.



 

Также хочу обратить внимание на три текстовых поля, которые отвечают за настройки изображений. Это: «Ширина картинки в px» и «Высота картинки в px». Если оставить поле «Высота картинки в px» пустым, то высота будет выставляться пропорционально ширине.

Текстовое поле «Отступ слева в px» позволяет отцентрировать изображение от левого края ячейки в которой расположена картинка.

Панель Menu FS

 

Возможность вывода модуля Menu FS в отдельную панель появилась сравнительно недавно, поэтому я решил вывести блок настроек, посвященный панели в отдельный раздел нашей статьи.

Во — первых, чтобы понять, что такое панель, вам необходимо отправиться на следующую страничку Демо Сайта:

/demo/index.php?option=com_ttfsp&view=content&Itemid=21

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


 

Чтобы панель стала доступна, в настройках модуля необходимо включить параметр «Модуль в панель» в положение «ДА»

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

Расширенные параметры модуля

 

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



 

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

На этом хотелось бы завершить статью, где я вкратце расказал про симбиоз компонентов «Запись на прием» и «Menu FS», а также поведал про полную настройку последнего.

Пишите на форум. Задавайте вопросы.

С уважением, Владимир Егоров