К списку «Проектирование модуля для Joomla 3.x»
И так, у нас есть скелет и возможность менять язык модуля. Теперь нам надо оживить ее, используя стилевые таблицы и динамику через CSS и JavaScript.
Файловая структура
Как и в предыдущем примере, нам надо добавить несколько папок и файлов в них. Тут нет строгости в плане определенного места нахождения, именования этих файлов и их количества. Главное — чтобы после создания каждой папки или файла, он был зарегистрирован в файле инсталляции mod_portfolio.xml иначе, при установке модуля, эти папки и файлы могут быть не подгружены в систему. Давайте определим файловую структуру данного шага создания модуля следующим образом
Мы добавили 3 папки в директорию шаблонов модуля, где css -папка, где будут файлы стилей, images — папка, где будут храниться файлы изображений модуля, js — папка, где будут храниться библиотеки и скрипты JavaScript.
Структура файла инсталляции mod_portfolio.xml
Теперь изменим файл инсталляции под обновленную файловую структуру нашего модуля. Добавим новый тег media, с указанием новых папок
<?xml version="1.0" encoding="utf-8"?> <extension type="module" version="3.0" client="site"> <name>WebSofter Module Portfolio. Stage 3</name> <author>David Amirkhanov</author> <creationDate>August 2016</creationDate> <license>GNU General Public License version 2 or later; see LICENSE.txt</license> <authorEmail>mail.websofter@gmail.com</authorEmail> <authorUrl>www.wsofter.com</authorUrl> <version>1.0.0</version> <description>Module Portfolio for Joomal CMS designed by David Amirkhanov</description> <files> <filename module="mod_portfolio">mod_portfolio.php</filename> <filename>index.html</filename> <filename>helper.php</filename> <folder>tmpl</folder> <folder>language</folder> </files> <media folder="tmpl" destination="mod_portfolio"> <folder>images</folder> <folder>css</folder> <folder>js</folder> </media> <languages folder="language"> <language tag="en-GB">en-GB/en-GB.mod_portfolio.ini</language> <language tag="en-GB">en-GB/en-GB.mod_portfolio.sys.ini</language> <language tag="ru-RU">ru-RU/ru-RU.mod_portfolio.ini</language> <language tag="ru-RU">ru-RU/ru-RU.mod_portfolio.sys.ini</language> </languages> <config> <fields name="params"> <fieldset name="basic"> <field name="title" type="text" label="MOD_PORTFOLIO_TITLE" description="MOD_PORTFOLIO_TITLE_DESC" required="true" size="30" class="mod-portfolio-title" validate="" /> <field name="description" type="editor" default="" label="MOD_PORTFOLIO_DESCRIPTION" description="MOD_PORTFOLIO_DESCRIPTION_DESC"/> <field name="icon" type="file" label="MOD_PORTFOLIO_FILE" description="MOD_PORTFOLIO_FILE_DESC" accept="images/*"/> </fieldset> </fields> </config> </extension>
Продемонстрируем что-нибудь полезное
Давайте сделаем что-нибудь при помощи подключенных файлов CSS, JavaScript и картинок.
Для начала нам нужно подключить добавленные файлы в файле шаблона default.php при помощи методов системного класса JDocument фреймворка Joomla
<?php defined( '_JEXEC' ) or die( 'Restricted access' ); //Подключаем зависимости $document = JFactory::getDocument(); $modulePath = JURI::base() . 'modules/mod_portfolio/tmpl/'; $document->addStyleSheet($modulePath.'css/mod_portfolio.css'); $document->addScript($modulePath.'js/jquery-3.1.0.min.js'); $document->addScript($modulePath.'js/mod_portfolio.js'); ?> <article class="mod-portfolio-content"> Контент модуля из шаблона... <br/> <center><img src="<?php echo $modulePath ?>images/joomla-icon.png"/></center> <br/> <button id="mod-portfolio-btn">Кнопка</button> </article>
Сделаем так, чтобы по иду кнопки выводилось сообщение, событие которого определено в файле mod_portfolio.js, а стиль контейнера было определено в файле mod_portfolio.css.
Заметьте, что мы пользуемся библиотекой jQuery, который тоже подключается выше нашего пользовательского скрипта. Главный метод $() должен быть заменен на jQuery(), иначе Joomla выведет ошибки из-за конфликтов.
Представим обозрению mod_portfolio.js и mod_portfolio.css
jQuery(document).ready(function(){ jQuery("#mod-portfolio-btn").click(function(){ alert("Событие..."); }); });
.mod-portfolio-content{ background-color: azure; padding: 5px; min-height: 300px; width: 100%; border: 1px solid #cccccc; border-radius: 5px; }
Результат работы
Ниже представлен скриншот работы и поведения данного модуля после установки
Установочный модуль для данного шага проекта можете скачать тут mod_portfolio_v1.0.0_stage_3.zip.