Оценок пока нет Добавление файлов CSS, JavaScript и картинок к модулю для Joomla 3.x

К списку «Проектирование модуля для Joomla 3.x»

И так, у нас есть скелет и возможность менять язык модуля. Теперь нам надо оживить ее, используя стилевые таблицы и динамику через CSS и JavaScript.

Файловая структура

Как и в предыдущем примере, нам надо добавить несколько папок и файлов в них. Тут нет строгости в плане определенного места нахождения, именования этих файлов и их количества. Главное — чтобы после создания каждой папки или файла, он был зарегистрирован в файле инсталляции mod_portfolio.xml иначе, при установке модуля, эти папки и файлы могут быть не подгружены в систему. Давайте определим файловую структуру данного шага создания модуля следующим образом

joomla-module-file-structure-by-stage-3

Мы добавили 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;
}

 

Результат работы

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

stage-3-result-screen-shot-of-joomla-module-design

Установочный модуль для данного шага проекта можете скачать тут mod_portfolio_v1.0.0_stage_3.zip.

 

Пожалуйста, оцените материал

WebSofter

Web - технологии