Login / Sign Up


Enter site:
Login: 
Password: 


First time here?
 
Register [?]:
Registering allows you:
  • Purchase products from the product catalog and access them any time.
  • Ask questions to another specialists in IT
  • Publish your own Joomla extensions, soft or other products if you are developer or distributor
  • Add interesting weblinks and access them from any place
  • Watch the updates of the site and have special abilities that guests don't have
  • Watch the news of the service and new articles and get knowledge
Choose login:
Your Email:
Enter the result of operation (in digits):
28 + 3 = ? Update

Адаптируем стороннее меню под Joomla. Делаем свой модуль меню для Joomla 2.5 (Часть 3) PDF Print E-mail
Written by Максим   
Sunday, 17 November 2013 01:49
Liked:
18


Did not like: 2

Доброго времени суток, друзья. Я продолжаю описывать процесс превращения стороннего меню в полноценный модуль меню для Joomla 2.5. Статья довольно сильно растянулась, поэтому хочу в двух словах напомнить вам, что мы делали в Части 1 и Части 2:

  • Мы выбрали стороннее меню, подготовили заглушку для будущего модуля, установили её на сайт
  • Правили файл помощника helper.php, наполняя его функционалом. Каждый метод помощника я постарался снабдить объяснением и комментариями

Итак, на текущий момент у нас есть полностью готовый файл помощника helper.php, и он содержит в себе всю основную логику получения и подготовки данных меню. Вот, что нам предстоит сделать дальше:

  • подготовить файл параметров модуля, чтобы вынести все настройки в админку Joomla
  • написать классы для своих типов параметров в админке Joomla. Нам понадобятся свои "элементы управления", чтобы отобразить их на странице настроек модуля. Далее мы посмотрим как их написать.
  • подготовить CSS-стили для отрисовки меню. Это, пожалуй, наиболее тонкий момент всей статьи, поскольку тут и начинается "адаптация" - нам придется вручную править CSS-классы, идущие в поставке стороннего меню. И удостовериться, что каждый класс отрабатывает на движке Joomla и подходит к максимальному количеству шаблонов.
  • заполнить файл tmpl/default.php, который собственно и будет рисовать HTML-разметку всех меню и выпадающих дочерних подменю.
  • написать входную точку для модуля - mod_colormenu.php. Этот файл будет выполняться первым делом, когда Joomla подключит модуль к сайту. Ему передается управление, а он уже, в свою очередь, подключает файл помощника helper.php, файл шаблона default.php и любые другие файлы при необходимости.
  • добавить языковые файлы

Давайте в таком порядке и пойдем по этим задачам.

Готовим файл параметров модуля

Для экономии места я не буду включать в текст статьи полный исходный код файла mod_colormenu.xml, т.е. дескриптора модуля, который содержит данные для установки модуля в Joomla, а также параметры модуля. Вместо этого я опишу перечень параметров и их тип, а также краткое описание и назначение параметра. Обращаю внимание, что типы menuselector и menucolorselector - это типы параметров, которых нет в Joomla, чуть позже мы сами напишем классы, которые будут делать следующее:

  • menuselector - это элемент управления, представляющий собой список всех меню Joomla и чекбокс (галочка) напротив каждого названия меню. Смысл этого параметра в том, что мы можем выбрать те меню, которые модуль должен отрисовать, отметив их галочками. Если галка напротив меню не стоит - это значит, что меню рисовать не нужно. Отмеченные значения будут сохраняться в базе данных и наш модуль будет "знать", какие меню он должен отрисовывать.
  • menucolorselector - это элемент управления, который будет состоять из списка текстовых полей. Количество текстовых полей будет определяться динамически - их будет ровно столько, сколько меню создано через админку в менеджере меню Joomla.

Почему нам нужны свои типы параметров? А для того, чтобы модуль мог гибко "перенимать" изменения в другой части админки Joomla - при удалении существующих меню из сайта или создании новых - это будет отражаться в настройках нашего модуля. Поэтому нужно динамически из базы получать актуальную информацию о том, какие меню существуют на сайте. Стандартные параметры Joomla не дают такой возможности, поэтому мы создадим свои типы параметров. Но это чуть далее по тексту, а пока посмотрим на то, какие параметры есть в файле дескриптора mod_colormenu.xml нашего модуля: 

Название параметратипЗначение по умолчанию
selected_menusmenuselectorЭлемент управления, выводящий список всех меню Вашего сайта. Напротив каждого меню будет чекбокс. Если он отмечен галочкой, значит меню надо рисовать, иначе отрисовка не требуется
menu_bgcolorsmenucolorselectorЦвет фона меню. Элемент будет выводить по одному текстовому полю для ввода цвета - для каждого меню сайта
menu_hovercolorsmenucolorselectorЦвет фона меню при наведении. Элемент будет выводить по одному текстовому полю для ввода цвета - для каждого меню сайта
menu_textcolorsmenucolorselectorЦвет текста меню. Элемент будет выводить по одному текстовому полю для ввода цвета - для каждого меню сайта
menu_hovertextcolorsmenucolorselectorЦвет текста меню при наведении. Элемент будет выводить по одному текстовому полю для ввода цвета - для каждого меню сайта
mnu_item_widthtextШирина выпадающего меню. Значение по умолчанию = "220px"
enable_drop_symbol_mainradioРазрешить символ выпадающего меню для основных меню? По умолчанию значение "1" (т.е. "разрешить")
drop_symboltextСимвол, который использовать как "стрелку" - для обозначения того, что пункт - выпадающий, т.е. имеет дочерние элементы. Значение по умолчанию - "►" - этот код соответствует символу "стрелки вправо" - прям как символ play в плеере
enable_drop_symbol_ddradioРазрешить символ выпадающего меню для самых пунктов выпадающего меню? По умолчанию значение "1"
drop_symbol_ddtextСимвол, который использовать как "стрелку". Аналогично параметру drop_symbol значение по умолчанию - "►" 

В целом, перечисленные параметры и их типы - это всё, что заслуживает внимания по части дескриптора модуля. Там же вы найдете перечень всех файлов модуля в секции <files>, все языки установки в секции <languages> и т.д.

Пишем классы для своих типов параметров в админке Joomla

Как Вы уже заметили, среди параметров есть те, что имеют типы menuselector и menucolorselector. Чтобы создать эти типы параметров, нужно создать отдельный каталог с именем fields в каталоге нашего модуля. И добавить туда два новых файла - menuselector.php и menucolorselector.php. Имена файлов должны строго соответствовать тому, как называются сами параметры в дескрипторе модуля mod_colormenu.xml. Если не будет этого соответствия, движок Joomla не найдет их и выдаст ошибку о том, что тип параметра не известен.

Тип параметра - это свой класс, который должен начинаться обязательно с JFormField<далее_имя_вашего_параметра>. Также класс наследуется от стандартного класса Joomla - JFormField и должен переопределить абстрактный метод  getInput() родительского класса JFormField своей логикой (увидеть определение класса JFormField можно в файле /libraries/joomla/form/field.php):


defined( '_JEXEC' ) or die( 'Restricted access' ); 

Доброго времени суток, друзья. Я продолжаю описывать процесс превращения стороннего меню в полноценный модуль меню для Joomla 2.5. Статья довольно сильно растянулась, поэтому хочу в двух словах напомнить вам, что мы делали в Части 1 и Части 2:

  • Мы выбрали стороннее меню, подготовили заглушку для будущего модуля, установили её на сайт
  • Правили файл помощника helper.php, наполняя его функционалом. Каждый метод помощника я постарался снабдить объяснением и комментариями

Итак, на текущий момент у нас есть полностью готовый файл помощника helper.php, и он содержит в себе всю основную логику получения и подготовки данных меню. Вот, что нам предстоит сделать дальше:

  • подготовить файл параметров модуля, чтобы вынести все настройки в админку Joomla
  • написать классы для своих типов параметров в админке Joomla. Нам понадобятся свои "элементы управления", чтобы отобразить их на странице настроек модуля. Далее мы посмотрим как их написать.
  • подготовить CSS-стили для отрисовки меню. Это, пожалуй, наиболее тонкий момент всей статьи, поскольку тут и начинается "адаптация" - нам придется вручную править CSS-классы, идущие в поставке стороннего меню. И удостовериться, что каждый класс отрабатывает на движке Joomla и подходит к максимальному количеству шаблонов.
  • заполнить файл tmpl/default.php, который собственно и будет рисовать HTML-разметку всех меню и выпадающих дочерних подменю.
  • написать входную точку для модуля - mod_colormenu.php. Этот файл будет выполняться первым делом, когда Joomla подключит модуль к сайту. Ему передается управление, а он уже, в свою очередь, подключает файл помощника helper.php, файл шаблона default.php и любые другие файлы при необходимости.
  • добавить языковые файлы

Давайте в таком порядке и пойдем по этим задачам.

Готовим файл параметров модуля

Для экономии места я не буду включать в текст статьи полный исходный код файла mod_colormenu.xml, т.е. дескриптора модуля, который содержит данные для установки модуля в Joomla, а также параметры модуля. Вместо этого я опишу перечень параметров и их тип, а также краткое описание и назначение параметра. Обращаю внимание, что типы menuselector и menucolorselector - это типы параметров, которых нет в Joomla, чуть позже мы сами напишем классы, которые будут делать следующее:

  • menuselector - это элемент управления, представляющий собой список всех меню Joomla и чекбокс (галочка) напротив каждого названия меню. Смысл этого параметра в том, что мы можем выбрать те меню, которые модуль должен отрисовать, отметив их галочками. Если галка напротив меню не стоит - это значит, что меню рисовать не нужно. Отмеченные значения будут сохраняться в базе данных и наш модуль будет "знать", какие меню он должен отрисовывать.
  • menucolorselector - это элемент управления, который будет состоять из списка текстовых полей. Количество текстовых полей будет определяться динамически - их будет ровно столько, сколько меню создано через админку в менеджере меню Joomla.

Почему нам нужны свои типы параметров? А для того, чтобы модуль мог гибко "перенимать" изменения в другой части админки Joomla - при удалении существующих меню из сайта или создании новых - это будет отражаться в настройках нашего модуля. Поэтому нужно динамически из базы получать актуальную информацию о том, какие меню существуют на сайте. Стандартные параметры Joomla не дают такой возможности, поэтому мы создадим свои типы параметров. Но это чуть далее по тексту, а пока посмотрим на то, какие параметры есть в файле дескриптора mod_colormenu.xml нашего модуля: 

Название параметратипЗначение по умолчанию
selected_menusmenuselectorЭлемент управления, выводящий список всех меню Вашего сайта. Напротив каждого меню будет чекбокс. Если он отмечен галочкой, значит меню надо рисовать, иначе отрисовка не требуется
menu_bgcolorsmenucolorselectorЦвет фона меню. Элемент будет выводить по одному текстовому полю для ввода цвета - для каждого меню сайта
menu_hovercolorsmenucolorselectorЦвет фона меню при наведении. Элемент будет выводить по одному текстовому полю для ввода цвета - для каждого меню сайта
menu_textcolorsmenucolorselectorЦвет текста меню. Элемент будет выводить по одному текстовому полю для ввода цвета - для каждого меню сайта
menu_hovertextcolorsmenucolorselectorЦвет текста меню при наведении. Элемент будет выводить по одному текстовому полю для ввода цвета - для каждого меню сайта
mnu_item_widthtextШирина выпадающего меню. Значение по умолчанию = "220px"
enable_drop_symbol_mainradioРазрешить символ выпадающего меню для основных меню? По умолчанию значение "1" (т.е. "разрешить")
drop_symboltextСимвол, который использовать как "стрелку" - для обозначения того, что пункт - выпадающий, т.е. имеет дочерние элементы. Значение по умолчанию - "&#x25ba;" - этот код соответствует символу "стрелки вправо" - прям как символ play в плеере
enable_drop_symbol_ddradioРазрешить символ выпадающего меню для самых пунктов выпадающего меню? По умолчанию значение "1"
drop_symbol_ddtextСимвол, который использовать как "стрелку". Аналогично параметру drop_symbol значение по умолчанию - "&#x25ba;" 

В целом, перечисленные параметры и их типы - это всё, что заслуживает внимания по части дескриптора модуля. Там же вы найдете перечень всех файлов модуля в секции <files>, все языки установки в секции <languages> и т.д.

Пишем классы для своих типов параметров в админке Joomla

Как Вы уже заметили, среди параметров есть те, что имеют типы menuselector и menucolorselector. Чтобы создать эти типы параметров, нужно создать отдельный каталог с именем fields в каталоге нашего модуля. И добавить туда два новых файла - menuselector.php и menucolorselector.php. Имена файлов должны строго соответствовать тому, как называются сами параметры в дескрипторе модуля mod_colormenu.xml. Если не будет этого соответствия, движок Joomla не найдет их и выдаст ошибку о том, что тип параметра не известен.

Тип параметра - это свой класс, который должен начинаться обязательно с JFormField<далее_имя_вашего_параметра>. Также класс наследуется от стандартного класса Joomla - JFormField и должен переопределить абстрактный метод  getInput() родительского класса JFormField своей логикой (увидеть определение класса JFormField можно в файле /libraries/joomla/form/field.php):


defined( '_JEXEC' ) or die( 'Restricted access' );

jimport('joomla.html.html');
jimport('joomla.form.formfield');

class JFormFieldMenuselector extends JFormField {
	protected $type = 'menuselector';
	protected $forceMultiple = true;

	protected function getOptions()
	{
		$options = array();
		$db = &JFactory::getDBO();
		$query = 'SELECT * ';
		$query .= 'FROM ';
		$query .= '#__menu_types';
		$db->setQuery( $query );
		$menutypes = $db->loadObjectList();
		if (!empty($menutypes)) {
			foreach ($menutypes as $menutype) {
				$tmp = JHtml::_(
					'select.option',
					(string) $menutype->menutype,
					'<i>'.$menutype->title . '</i> (<strong><i>'.$menutype->menutype.'</i></strong>)', 'value', 'text', "false"
				);
				$options[] = $tmp;
			}
		}

		reset($options);
		return $options;
	}

	protected function getInput() {
		$options = $this->getOptions();
		$html = array();
		$class = $this->element['class'] ? ' class="checkboxes ' . (string) $this->element['class'] . '"' : ' class="checkboxes"';
		$html[] = '<fieldset id="' . $this->id . '"' . $class . '>';
		$html[] = "<ul>";
		foreach ($options as $i => $option) {
			$checked = (in_array((string) $option->value, (array) $this->value) ? ' checked="checked"' : '');
			$html[] = '<li>';
			$html[] = '<input type="checkbox" id="' . $this->id . $i . '" name="' . $this->name . '"' . ' value="'
				. htmlspecialchars($option->value, ENT_COMPAT, 'UTF-8') . '"' . $checked . '/>';
			$html[] = '<label for="' . $this->id . $i . '"' . $class . '>' . JText::_($option->text) . '</label>';
			$html[] = '</li>';
		}
}

Метод getOptions() - это наш, собственный метод. Его нет в родительском классе JFormField. И мы написали его для получения "опций для выбора", а ими у нас являются все доступные меню сайта. Их мы и получаем из таблицы prefix_menu_types, посылая SQL-запрос в базу. Если посмотреть на тело метода getOptions() - мы видим, как сначала отправляем запрос в БД для получения массива объектов "тип меню" - их мы запоминаем в переменной $menutypes. После чего мы бежим в цикле по всем типам меню сайта и для каждого из них с помощью специального вызова JHtml::_() конструируем чекбокс.

Увидеть, как работает вызов JHtml можно открыв класс библиотеки Joomla, который расположен в /libraries/joomla/html/html.php, однако он достаточно сложен для понимания. Главное, что нужно знать при работе с вызовом JHtml - это то, где самому без труда найти реализацию. В нашем случае мы первым параметром передали 'select.option'. Что это значит? Это означает, что для построения элемента Joomla должна пойти в каталог /libraries/joomla/html/html/ , найти там файл select.php, а в нём - метод option(). Параметры этого метода option() и определяют то, что мы передаем после строки 'select.option', а именно:

  • (string) $menutype->menutype - это значение нашего будущего чекбокса, т.е. значение поля menutype в БД Joomla. Для главного меню это будет строка "mainmenu"
  • '<i>'.$menutype->title . '</i>&nbsp;(<strong><i>'.$menutype->menutype.'</i></strong>)' - это текст рядом с чекбоксом, HTML-разметка вида: "Главное меню (mainmenu)
  • 'value' - этим параметром мы говорим Joomla, как будет называться свойство нашего элемента управления, которое будет содержать выбранное нами значение в админке Joomla.
  • 'text' - этим параметром мы говорим Joomla, как будет называться свойство, содержащее лейбл, т.е. надпись рядом с чекбоксом
  • "false" - этот параметр не используется движком Joomla, передаем его просто для совместимости.

Итак, мы собрали в массиве $options все построенные с помощью вызова JHtml::_() чекбоксы и надписи, осталось теперь сбросить внутренний указатель массива в начало - с помощью вызова reset($options) и вернуть $options в качестве возвращаемого значения метода.

Что же касается метода getInput(), то в родительском классе JFormField этот метод является абстрактным (т.е. без тела и полезного кода). Это значит, что в дочернем классе - т.е. нашем JFormFieldMenuselector мы обязательно должны определить реализацию метода getInput() сами. Дело в том, что во время отрисовки страницы параметров нашего модуля в админке движок для формирования элемента управления вызовет именно метод getInput(), поэтому то, как в конечном счете выглядит наш параметр определяет именно этот метод. Первым делом мы вызываем getOptions(), который рассмотрели ранее, и в переменной $options получаем массив чекбоксов. Дальше мы в массив $html добавляем элементы, каждый из которых представляет собой строку с HTML-разметкой элемента управления. Обратите внимание, что через указатель $this мы можем обращаться, во-первых к атрибутам, которые можем задать в самом xml-файле дескриптора модуля. Это делается с помощью вызова $this->element['<имя_атрибута_из_xml>']. Во-вторых, через тот же указатель $this мы обращаемся к тем внутренним переменным, которые заданы в родительском классе JFormField, например вызов $this->id вернет автоматически сгенерированный id для нашего элемента управления. Он будет представлять из себя склейку вида "jform_params_<имя_параметра_в_xml><индекс_элемента_на_странице>" . Имя параметра в xml - это то, как мы назвали параметр в xml, индекс элемента на странице - Joomla вычислит сама. Например, наш параметр называется selected_menus. Предположим, что в xml-дескрипторе мы бы задали 10 параметров такого типа. Тогда в $this->id будет содержаться "jform_params_selected_menus0" для 1-го параметра, "jform_params_selected_menus1" - для 2-го параметра и т.д. Почему я заостряю на этом внимание? Конечно, может и Вам не нужно настолько глубоко вникать в логику движка Joomla. Но если Вы захотите писать свой собственный параметр модуля или компонента, Вам не обойти этот аспект стороной. А этой информации нет вообще нигде, даже на официальных форумах и ресурсах Joomla. Это просто заметки из личного опыта, поэтому будет напоминание не только вам, но и мне самому.

Пишем входную точку для модуля mod_colormenu.php

Давайте напишем теперь файл mod_colormenu.php, который является входной точкой нашего модуля. Как я уже говорил, этот файл получает управление, как только движок Joomla начинает подгружать модуль в той позиции, в которой он установлен через панель администрирования. Цель данного файла - подгрузить необходимые библиотеки, файлы, ресурсы к модулю, после чего передать управление файлу шаблона модуля tmpl/default.php, который и осуществляет отрисовку модуля.


defined( '_JEXEC' ) or die( 'Restricted access' );
// Подключаем файл помощника helper.php с классом MenuItem и modColorMenuHelper
require_once(dirname(__FILE__).DS.'helper.php');

// Создаем экземпляр помощника
$helper = new modColorMenuHelper();

// Получаем ссылку на текущий документ
$doc = &JFactory::getDocument();

// Подключаем файл стилей mod_colormenu.css к сайту
$module_name = 'mod_colormenu';
$doc->addStylesheet( JURI::root(true) . "/modules/".$module_name."/css/".$module_name.".css" );

// По умолчанию устанавливаем значение для параметра 'selected_menus' как пустой массив
$params->def('selected_menus', array());

// Получаем действительное значение параметра
$menuTypesArray = $params->get('selected_menus');

// Получаем информацию о цвете фона и шрифта меню из параметров модуля
$bgColors = $params->get('menu_bgcolors');
$hoverColors = $params->get('menu_hovercolors');
$textColors = $params->get('menu_textcolors');
$hoverTextColors = $params->get('menu_hovertextcolors');

// Задаем значения по умолчанию для параметров модуля
$params->def('mnu_item_width', '220px');
$params->def('enable_drop_symbol_main', '1');
$params->def('drop_symbol', '&' . '#x25ba;');
$params->def('enable_drop_symbol_dd', '1');
$params->def('drop_symbol_dd', '&' . '#x25ba;');
$mnuItemWidth = $params->get('mnu_item_width');

// Параметры символа стрелки для выпадающих пунктов меню
$enableDropSymbol = intval($params->get('enable_drop_symbol_main'));
$dropSymbol = $params->get('drop_symbol');
$enableDropSymbolDD = intval($params->get('enable_drop_symbol_dd'));
$dropSymbolDD = $params->get('drop_symbol_dd');
$numMenuTypes = count($menuTypesArray);

// Часть CSS-стилей мы должны подключить программно, т.к. они будут зависеть от параметров модуля
$doc->addStyleDeclaration("ul.dropdown li a { display: block; padding: 4px 8px !important; margin:0px !important; text-decoration:none !important; background:none !important; border-width:0px !important; border-radius:0px !important;}" .
"ul.dropdown li.hover > a { border-width:0px !important; }" .
"ul.dropdown ul li a:hover { text-decoration:none; color: red !important; background:none; background-color:none; }" . 
"ul.dropdown ul { margin: 0 !important; padding: 0 !important; border: 0 !important; font-size: 100% !important; font: inherit !important; vertical-align: baseline !important; text-transform:none !important; list-style: none !important;" .
 "z-index:99; width: ".$mnuItemWidth."; visibility: hidden; position: absolute; top: 100% !important; left: 0 !important; }");

// Далее следует довольно большой кусок кода, который сюда не будет вставлен для экономии места
// Суть его такова: дальше получаются параметры для каждого меню и те их значения (цвета шрифта, цвета фона и т.д.),
// что заданы в админке. Эти значения динамически формируют нужный вид CSS-стилей и эти стили подключаются к сайту

 

Заполняем файл tmpl/default.php

Теперь мы должны взяться за написание файла шаблона модуля. Это тот самый файл, который и рисует финальную HTML-разметку под меню. Начнём с того, что получим текущего пользователя и проверим, а есть ли вообще меню, которые нужно рисовать, т.е. не пустой ли массив? Для начала добавим такую конструкцию:


$user = & JFactory::getUser();
if (!empty($menuTypesArray)) {
	// здесь пробежать по всем типам меню и отрисовать каждый из них
}

Если массив типов меню пуст, то модуль вообще ничего не отрисует и мы не войдем в if. Если же у нас есть настроенные через админку Joomla меню, причем для них есть еще и опубликованные пункты меню, то мы должны "нарисовать" это в виде HTML-разметки. Поэтому алгоритм выходит примерно следующий:

1. Определить тип текущего меню из массива$menuTypesArray. Например для главного меню это будет mainmenu

2. Получить параметры для текущего типа меню. Нам нужно знать, каким образом назвать самый верхний уровень меню. И я решил, что это будет название самого типа меню. Если Вы помните, ранее мы уже добавили с Вами в helper.php методgetDefMenuParams, который получает название меню, название и ссылку для главного пункта меню. 

3. Когда в п.2 мы отрисуем "верхний" элемент, нам останется получить все пункты для данного меню. Мы тоже об этом уже позаботились - у нас в helper.php уже заготовлена функцияgetMenuItems, которая по тип меню получает все его пункты меню. Мы должны учесть, что теоретически через админку можно снять с публикации все пункты меню. Поэтому мы поставим проверку на то, есть ли у нас опубликованные пункты меню.

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

Переводя описанный выше алгоритм на PHP, получается следующий код:


$user = & JFactory::getUser();
if (!empty($menuTypesArray)) {
	echo "<ul class='dropdown'>";
	foreach ($menuTypesArray as $menuType) {
		$menuType = trim($menuType);
		$menuDefParams = $helper->getDefMenuParams($menuType);
		// Получить в $menuItems все пункты меню для данного меню
		$menuItems = $helper->getMenuItems($menuType);
		// Есть ли пункты меню, опубликованные в админке?
		if (!empty($menuItems)) {
			// Отрисовываем пункт меню
			echo "<li class='". $menuType . "'>";
			echo "<a href='" . JRoute::_($menuDefParams->link) . "'>";
			// Если разрешен символ стрелки в параметрах модуля - нарисуем его...
			echo $enableDropSymbol ? $dropSymbol . "&" . "nbsp;" . "&" . "nbsp;" : "";
			// Выводим непосредственно название меню
			echo $menuDefParams->menutitle;
			echo "</a>";
			// Теперь рисуем внутренний UL-список со всеми пунктами меню
			echo "<ul class='sub_menu ". $menuType . "'>";
			// Пошел цикл по пунктам меню:
			foreach ($menuItems as $item) {
				$item->setEnableDropSymbol($enableDropSymbolDD);
				$item->setDropSymbol($dropSymbolDD);
				// Данный пункт меню доступен и виден текущему пользователю с его набором прав?
				// Доступность определяется методом isAccessable, который мы добавляли в класс MenuItem
				if ($item->isAccessable($user)) {
					// Если пункт меню видим - отрисовать его методом render(). Метод рекурсивен, т.е. если пункт меню сам
					// является родительским, и у него есть подменю - render() отрисует еще один внутренний UL-список...
					echo $item->render();
				}
			}
			echo "</ul>";
			echo "</li>";
		}
	}
	echo "</ul>";
	echo "<br clear='all' />";
}

В тексте статьи я использовал команды echo для вывода и отрисовки HTML-разметки - потому что так проще форматировать код на сайте. В скачанном модуле вы увидите, что PHP-код отделен в шаблоне от HTML-разметки, но суть от этого ничуть не меняется.

Готовим CSS-стили для отрисовки меню

Поскольку мы адаптируем внешнее меню SimplejQueryDropdowns, которое мы обсуждали и скачали в части 1 данной статьи, то целесообразно взять за основу те CSS-стили, которые уже есть в поставке этого меню. При распаковке архива с сторонним меню, мы увидим 2 файла во вложенном каталоге css - это файлы ie.css и style.css. Первый - это специализированный файл стилей, который подключается к сайту, если пользователь заходит на сайт через Internet Explorer (IE настолько специфичен, что для него как правило включается отдельный файл стилей, чтобы позволить разметке сайта отображаться корректно). Второй файл - style.css - является основным файлом стилей стороннего меню. Копируем из него все стили и для начала вставляем в файл mod_colormenu.css, который располагается в каталоге /mod_colormenu/css/mod_colormenu.css нашей заглушки. Если сейчас наш модуль-заглушка включен на сайте и мы зайдем на сайт и обновим страницу в браузере, то увидим ужасный результат: вместо ожидаемого стороннего меню все блоки, пункты меню и т.д. "поплыли", т.е. CSS-стили, которые идут вместе с сторонним меню и прекрасно с ним работают почему-то напрочь отказываются работать на нашем сайте Joomla! Почему это происходит? Все дело в шаблонах Joomla. Обычно они уже содержат огромную массу стилей - как общих, т.е. стилизующих HTML-элементы вроде <div>, <ul>, <li> и т.д., так и узкоспециализированных CSS-стилей, которые придают вид боковым панелям сайта, основной области, шапке сайта и так далее. Так вот, когда мы вставили CSS-стили, идущие в поставке стороннего меню и оставили их "как есть", то с вероятностью 99,9% наше внешнее меню не заработает сразу на конкретном Joomla шаблоне. Здесь начинается поистине колдовство и "подгонка" CSS-разметки модуля таким образом, чтобы он отображался в шаблоне Joomla правильно. Какой-то общей методики не существует, результат зависит от знания CSS и практики.

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



	/*Пример того, как шаблон Joomla может использовать */

	/* слишком общие стили для всего сайта. Тем самым шаблон может портить */

	/* нашу разметку меню, заставляя её съезжать и приобретать ненужные свойства */

	li { border: 1px solid black; }

	ul { background-color: #000; }

В приведенном выше примере два стиля в шаблоне автоматически применятся ко всем UL и LI тегам, если они встречаются в нашем модуле. Как с этим бороться? Добавлять собственные классы и использовать в них конструкцию !important, которая заставляет форсированно применить наш стиль, даже если более общий задан в шаблоне.

Добавляем языковые файлы

В каталоге language создаем два каталога - en-GB и ru-RU. В каждый каталог помещаются сооветствующие языковые файлы нашего модуля для поддержки нескольких языков. Например, в каталоге ru-RU создаем два файла: ru-RU.mod_colormenu.ini и ru-RU.mod_colormenu.sys.ini. Содержимое файлов - это перевод для всех строк, встречающихся на странице настроек модуля и в других его частях. Посмотреть, как наполнить эти файлы можно, скачав готовый модуль внизу этой страницы.

Скачать заглушку для модуля

Скачать готовый модуль



Last Updated on Monday, 23 December 2013 01:41
 
Автор статьи: Damascus
Всего статей: 62
Рейтинг: 3111
Страница Google+: Google

Found Error?

Система Orphus

Site Statistics

Яндекс.Метрика

Our Pages


Allineed.Ru © 2009-2012 - Allineed.Ru - ответы на IT вопросы, статьи о разработке, IT и программном обеспечении. При использовании материалов сайта ссылка обязательна. Использование данного сайта и любой его части означает принятие условий Пользовательского Соглашения.
Allineed.Ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters. The Joomla! name and logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.