Ну а теперь самое сложное
Как сделать, что бы при наведении картика заменялась другой картинкой ? (ExtendedMenu)Пошаговая инструкция
Для осуществления поставленной задачи нам предстоит, во-первых, немного покопаться в интернете, во-вторых, кое-чему научиться. Надеюсь, никто здесь не боится учиться чему-то новому и развиваться.
А учиться мы будем составлять шаблон модуля ExtendedMenu для вывода меню. Что в свою очередь подразумевает изучение основ работы с patTemplate.
Мы даже немного усложним себе задачу, и у нас текущее меню будет отображаться отдельной картинкой.
Но наша задача будет упрощена тем, что у нас не будет подуровней меню.
И так, что нам потребуется:
1. Java-script, заменяющий картинку на другую при наведении мышкой (в самом простом случае это одна строчка)2. По три картинки для каждого пункта меню (при наведении, когда мы находимся в этом меню и последняя - просто картинка)их названия будут:
menu_1_off.png
menu_2_off_png
menu_3_off.png
для всех пунктов меню, когда курсор не наведён
menu_1_on.png
menu_2_on_png
menu_3_on.png
для всех пунктов меню, когда курсор наведён и
menu_1_static.png
menu_2_static_png
menu_3_static.png
когда мы отображаем текущее меню (рисунок при наведении курсора не будет меняться)
Поместим все эти рисунки в папку images шаблона.
3. Какой-нибудь простой редактор ( советую notepad++ )4. Установленный модуль ExtendedMenu.Начнём с подготовительной (и теоретической) части.
Теория.Внутри шаблона, в зависимости от того, какой пункт меню мы будем выводить, мы будет вставлять различные картинки. Следовательно, нам нужно идентифицировать каждый пункт меню. Делать это через Itemid очень не удобно, т.к. при переносе нашего шаблона на другой сайт порядок Itemid изменится и рисунки не будут соответствовать нашим пунктам меню, либо вообще не будут выводиться.
Я использовал в качестве идентификатора название пункта меню (которое ему даётся при создании, и в списке пунктов какого-либо меню отображается в столбике "Пункт меню" (J1.5.14)). Обычно оно отображается на сайте, но т.к. мы используем картинки, мы можем использовать это название для других целей. Для каждого пункта меню его имя должно быть задано латинскими буквами (для удобства).
Подготовка.Изменим, для эксперимента, "Верхнее меню" (такое есть, если вы установили систему с демо-данными)
Итак, идём "Все меню -> Верхнее меню" и скрываем все элементы этого меню.
Теперь создаём новый пункт меню, ссылающийся на какой-нибудь материал, и в заголовке пишем "punkt_1". Повторяем это действие ещё 2 раза, называя пункты меню "punkt_2" и "punkt_3".
Практика.Заходим в папку шаблона, который стоит по умолчанию, и создаём файл "topmenu_exmenu.html". Это и есть файл шаблона меню. Он строится на основе Джумловского шаблонизатора patTemplate.
Открываем его редактором и пишем там:
<patTemplate:tmpl name="menu" whitespace="trim">
{MENU_LIST}
</patTemplate:tmpl>
<patTemplate:tmpl name="menu_list" whitespace="trim">
<ul>{MENU_ITEMS}</ul>
</patTemplate:tmpl>
Эти теги обрабатываются модулем ExtendedMenu и выводят нам наше меню. Что они делают точно я вам сказать не могу, но свои предположения выскажу. Первая часть формирует общее меню из составных частей, т.е. из подменю разных уровней вложенности. Вторая часть формирует каждое отдельное подменю. Догадки основаны на анализе примера подобного меню
1.
По скольку у нас будет только один уровень вложенности (первый, т.е. это просто список картинок без выпадающих меню) нас устроит приведённый выше код. Если же вы захотите сделать ещё и выпадающее меню с картинками, то этого кода будет мало. Здесь подобный случай рассматриваться не будет.
Логику работы шаблона понять не сложно. Первая часть приведённого кода собирает наше меню из второй части. Вторая часть собирает подуровни меню из отдельных элементов меню. Нашей основной задачей теперь является описать вывод каждого элемента меню.
Дописываем немного ниже, всё в том же файле:
<patTemplate:tmpl name="menu_item" whitespace="trim">
<patTemplate:tmpl name="condition_what_menu" type="condition"
conditionvar="CAPTION" varscope="menu_item" whitespace="trim">
<patTemplate:sub condition="punkt_1">
<patTemplate:tmpl name="condition_is_current1" type="condition"
conditionvar="IS_ACTIVE" varscope="menu_item" whitespace="trim">
<patTemplate:sub condition="1">
<li>{LINK_OPEN}<img src="{TEMPLATE_HOME}/images/menu_1_static.PNG"
width="100" height="50" vspace="0" hspace="0" border="0" />{LINK_CLOSE}</li>
</patTemplate:sub>
<patTemplate:sub condition="default">
<li>{LINK_OPEN}<img id="punkt_1"
src="{TEMPLATE_HOME}/images/menu_1_off.PNG" width="100" height="50" vspace="0" hspace="0" border="0"
onMouseOver="this.src='{TEMPLATE_HOME}/images/menu_1_on.PNG'"
onMouseOut="this.src='{TEMPLATE_HOME}/images/menu_1_off.PNG'"/>{LINK_CLOSE}</li>
</patTemplate:sub>
</patTemplate:tmpl>
</patTemplate:sub>
</patTemplate:tmpl>
</patTemplate:tmpl>
Я так полагаю, не все знакомы с синтаксисом patTemplate. Сейчас будет краткое введение.
Файл, обрабатываемый шаблонизатором patTemplate (в нашем случае это как раз наш файл) делится на составные части - шаблоны. Каждый шаблон обрамляется следующими тегами:
<patTemplate:tmpl ...>
... thomething in the template ...
</patTemplate:tmpl>
Это очень удобно для разработчика, т.к., составив однажды такой шаблон любой сложности, его можно вызвать в другой части фалйа, или даже в другом файле, одной строчкой. Шаблоны делятся на "простые шаблоны" и "шаблоны с условием". Первые выполняются и показываются всегда, где бы вы его ни написали или ни вызвали. Второй выполнится только если выполнится условие, т.е. всё, что внутри шаблона, отобразится при выполнении условия. ъ
Он имеет следующий вид:
<patTemplate:tmpl name="condition_is_current1" type="condition" conditionvar="VARIABLE" ...>
<patTemplate:sub condition="1">
This text will be shown if our VARIABLE variable's value is 1
</patTemplate:sub>
<patTemplate:sub condition="2">
This text will be shown if our VARIABLE variable's value is 2
</patTemplate:sub>
<patTemplate:sub condition="default">
This will be shown if non of above conditions is fullfilled
</patTemplate:sub>
</patTemplate:tmpl>
где
name="condition_is_current1" - имя шаблона, с помощью которого его можно вызвать в любой части файла
type="condition" - тип шаблона (для "простого" шаблона этот атрибут просто не указывается, для шаблона "с условием" это type="condition")
conditionvar="VARIABLE" - переменная, значение которой передаётся в подшаблоны и проверяется на совпадение
<patTemplate:sub condition="1"> - подшаблон, в котором проверяется значение переменной. Если оно будет равно 1 (т.е. VARIABLE=1), то всё, что внутри этого шаблона, выполнится.
Ну что, вроде как разобрались ?
Теперь вернёмся к нашему файлу. Теперь он имеет вид
<patTemplate:tmpl name="menu" whitespace="trim">
{MENU_LIST}
</patTemplate:tmpl>
<patTemplate:tmpl name="menu_list" whitespace="trim">
<ul>{MENU_ITEMS}</ul>
</patTemplate:tmpl>
<patTemplate:tmpl name="menu_item" whitespace="trim">
<patTemplate:tmpl name="condition_what_menu" type="condition"
conditionvar="CAPTION" varscope="menu_item" whitespace="trim">
<patTemplate:sub condition="punkt_1">
<patTemplate:tmpl name="condition_is_current1" type="condition"
conditionvar="IS_ACTIVE" varscope="menu_item" whitespace="trim">
<patTemplate:sub condition="1">
<li>{LINK_OPEN}<img src="{TEMPLATE_HOME}/images/menu_1_static.PNG"
width="100" height="50" vspace="0" hspace="0" border="0" />{LINK_CLOSE}</li>
</patTemplate:sub>
<patTemplate:sub condition="default">
<li>{LINK_OPEN}<img id="punkt_1"
src="{TEMPLATE_HOME}/images/menu_1_off.PNG" width="100" height="50" vspace="0" hspace="0" border="0"
onMouseOver="this.src='{TEMPLATE_HOME}/images/menu_1_on.PNG'"
onMouseOut="this.src='{TEMPLATE_HOME}/images/menu_1_off.PNG'"/>{LINK_CLOSE}</li>
</patTemplate:sub>
</patTemplate:tmpl>
</patTemplate:sub>
</patTemplate:tmpl>
</patTemplate:tmpl>
: Что за надписи внутри фигурных скобочек ?
A: Это переменные, переданные из скрипта модуля ExtendedMenu в наш шаблон и содержащие определённые, постоянные значения. Назовём их константами. Без них мы никак не смогли бы связать наши рисунки с соотв. им пунктам меню.
Вот значения констант, которые нам потребуются:
{MENU_LIST} и
{MENU_ITEMS} - соотв. выводят всё меню, и подменю нашего меню. Для нас значения особого не имеют.
{LINK_OPEN} и
{LINK_CLOSE} - соотв. открывает и закрывает тег ссылки на наш пункт меню (<a href="htt....."> и </a>)
{TEMPLATE_HOME} - внешнаяя ссылка на папку нашего шаблона.
Q: Что это за надписи БОЛЬШИМИ БУКВАМИ ?
A: Это переменные, уже настоящие переменные, которые меняют своё значение для каждого отдельного пункта.
Вот описание каждой из нужных нам переменных
CAPTION - передаёт нам название каждого пункта меню (то самое, которое мы вводили, когда создавали пункты меню на подготовительном уровне в админке)
IS_ACTIVE - передаёт нам значение 1 если сейчас мы работаем с текущим меню (т.е. на сайте мы просматриваем этот пункт меню)
Теперь давайте разберёмся, что и как работает.
Во-первых, мы добавили большой шаблон под названием menu_item (
<patTemplate:tmpl name="menu_item" whitespace="trim">). Этот шаблон отвечает за генерацию
отдельного пункта меню, и вызывается в цикле несколько раз, при этом нам передаются разные значения переменных
CAPTION и
IS_ACTIVE.
Внутри этого шаблона у нас сразу же идёт шаблон с условием под названием "condition_what_menu" (
<patTemplate:tmpl name="condition_what_menu" type="condition" conditionvar="CAPTION" ...>). Ему мы передаём переменную
CAPTION (как помните, она у нас может принимать только значения punkt_1, punkt_2 и punkt_3).
Далее, внутри этого шаблона идёт подшаблон с проверкой значения переменной (
<patTemplate:sub condition="punkt_1">). Это означает, что сейчас мы настраиваем, как будет отображаться пункт меню punkt_1. Казалось бы, можно ставить картинку. Но нет. Теперь нам нужно проверить, не является ли этот пункт текущим. Для этого мы добавляем ещё один шаблон с условием, который называется "condition_is_current1" (
<patTemplate:tmpl name="condition_is_current1" type="condition" conditionvar="IS_ACTIVE" ...>) и далее ещё один подшаблон с проверкой переменной
IS_ACTIVE (
<patTemplate:sub condition="1">).
Теперь самое интересное.
Если выполняется первое условие (т.е. мы работаем с пунктом punkt_1) и выполняется второе условие (т.е. посетитель просматривает как раз материал, на который ведёт данный пункт меню) мы должны вывести картинку menu_1_static.png. Что мы и делаем строкой
<li>{LINK_OPEN}<img src="{TEMPLATE_HOME}/images/menu_1_static.PNG"
width="100" height="50" vspace="0" hspace="0" border="0" />{LINK_CLOSE}</li>
Далее, если не выполняется второе условие, обязательно выполнится условие по дефолту (
<patTemplate:sub condition="default">), которое идёт сразу за ним. Т.е. теперь мы знаем, что мы работаем с пунктом меню, не ведущем на текущую страницу. И нам нужно вывести либо рисунок без наведённого указателя, либо с указателем. В этом нам помогают события javascript: onmouseover и onmouseout. Первое означает что человек навёл мышку на рисунок, и нам нужно заменить его на другой (
this.src='{TEMPLATE_HOME}/images/menu_1_on.PNG). Второе событие означает, что курсор убран с рисунка, и нам нужно вернуть изначальный рисунок (
this.src='{TEMPLATE_HOME}/images/menu_1_off.PNG).
Вот и всё ! Логика работы шаблона ясна ?
Кстати, хочу обратить внимание на то, что как раз ради того, что бы вставить эти две строчки javascript, мы, собственно говоря, и создали отдельный шаблон вывода меню.
Дальше всё просто. Нам нужно добавить ещё два таких условия, которые сработают для других пунктов меню:
<patTemplate:sub condition="punkt_2">
<patTemplate:tmpl name="condition_is_current2" type="condition"
conditionvar="IS_ACTIVE" varscope="menu_item" whitespace="trim">
<patTemplate:sub condition="1">
<li>{LINK_OPEN}<img src="{TEMPLATE_HOME}/images/menu_2_static.PNG" width="100"
height="50" vspace="0" hspace="0" border="0" />{LINK_CLOSE}</li>
</patTemplate:sub>
<patTemplate:sub condition="default">
<li>{LINK_OPEN}<img id="punkt_2" src="{TEMPLATE_HOME}/images/menu_2_off.PNG"
width="100" height="50" vspace="0"
hspace="0" border="0" onMouseOver="this.src='{TEMPLATE_HOME}/images/menu_2_on.PNG'"
onMouseOut="this.src='{TEMPLATE_HOME}/images/menu_2_off.PNG'"/>{LINK_CLOSE}</li>
</patTemplate:sub>
</patTemplate:tmpl>
</patTemplate:sub>
<patTemplate:sub condition="punkt_3">
<patTemplate:tmpl name="condition_is_current3" type="condition"
conditionvar="IS_ACTIVE" varscope="menu_item" whitespace="trim">
<patTemplate:sub condition="1">
<li>{LINK_OPEN}<img src="{TEMPLATE_HOME}/images/menu_3_static.PNG" width="100"
height="50" vspace="0" hspace="0" border="0" />{LINK_CLOSE}</li>
</patTemplate:sub>
<patTemplate:sub condition="default">
<li>{LINK_OPEN}<img id="punkt_3" src="{TEMPLATE_HOME}/images/menu_3_off.PNG"
width="100" height="50" vspace="0" hspace="0" border="0"
onMouseOver="this.src='{TEMPLATE_HOME}/images/menu_3_on.PNG'"
onMouseOut="this.src='{TEMPLATE_HOME}/images/menu_3_off.PNG'"/>{LINK_CLOSE}</li>
</patTemplate:sub>
</patTemplate:tmpl>
</patTemplate:sub>
Не забываем, что это всё надо добавить после закрывающего тега шаблона (
<patTemplate:sub condition="punkt_1">), что бы строки оказались внутри шаблона (
<patTemplate:tmpl name="condition_what_menu" type="condition" conditionvar="CAPTION" ...>)
Обратите внимание, что разные шаблоны не могут называться одинаково. Вот почему у трёх шаблонов с условиями, вроде бы выполняющих одинаковые функции, три названия: condition_is_current1, condition_is_current2 и condition_is_current3.
В конце концов наш файл будет выглядеть следующим образом:
<patTemplate:tmpl name="menu" whitespace="trim">
{MENU_LIST}
</patTemplate:tmpl>
<patTemplate:tmpl name="menu_list" whitespace="trim">
<ul>{MENU_ITEMS}</ul>
</patTemplate:tmpl>
<patTemplate:tmpl name="menu_item" whitespace="trim">
<patTemplate:tmpl name="condition_what_menu" type="condition"
conditionvar="CAPTION" varscope="menu_item" whitespace="trim">
<patTemplate:sub condition="punkt_1">
<patTemplate:tmpl name="condition_is_current1" type="condition"
conditionvar="IS_ACTIVE" varscope="menu_item" whitespace="trim">
<patTemplate:sub condition="1">
<li>{LINK_OPEN}<img src="{TEMPLATE_HOME}/images/menu_1_static.PNG" width="100"
height="50" vspace="0" hspace="0" border="0" />{LINK_CLOSE}</li>
</patTemplate:sub>
<patTemplate:sub condition="default">
<li>{LINK_OPEN}<img id="punkt_1" src="{TEMPLATE_HOME}/images/menu_1_off.PNG"
width="100" height="50" vspace="0" hspace="0"
border="0" onMouseOver="this.src='{TEMPLATE_HOME}/images/menu_1_on.PNG'"
onMouseOut="this.src='{TEMPLATE_HOME}/images/menu_1_off.PNG'"/>{LINK_CLOSE}</li>
</patTemplate:sub>
</patTemplate:tmpl>
</patTemplate:sub>
<patTemplate:sub condition="punkt_2">
<patTemplate:tmpl name="condition_is_current2" type="condition"
conditionvar="IS_ACTIVE" varscope="menu_item" whitespace="trim">
<patTemplate:sub condition="1">
<li>{LINK_OPEN}<img src="{TEMPLATE_HOME}/images/menu_2_static.PNG" width="100"
height="50" vspace="0" hspace="0" border="0" />{LINK_CLOSE}</li>
</patTemplate:sub>
<patTemplate:sub condition="default">
<li>{LINK_OPEN}<img id="punkt_2" src="{TEMPLATE_HOME}/images/menu_2_off.PNG"
width="100" height="50" vspace="0" hspace="0"
border="0" onMouseOver="this.src='{TEMPLATE_HOME}/images/menu_2_on.PNG'"
onMouseOut="this.src='{TEMPLATE_HOME}/images/menu_2_off.PNG'"/>{LINK_CLOSE}</li>
</patTemplate:sub>
</patTemplate:tmpl>
</patTemplate:sub>
<patTemplate:sub condition="punkt_3">
<patTemplate:tmpl name="condition_is_current3" type="condition"
conditionvar="IS_ACTIVE" varscope="menu_item" whitespace="trim">
<patTemplate:sub condition="1">
<li>{LINK_OPEN}<img src="{TEMPLATE_HOME}/images/menu_3_static.PNG" width="100"
height="50" vspace="0" hspace="0" border="0" />{LINK_CLOSE}</li>
</patTemplate:sub>
<patTemplate:sub condition="default">
<li>{LINK_OPEN}<img id="punkt_3" src="{TEMPLATE_HOME}/images/menu_3_off.PNG"
width="100" height="50" vspace="0" hspace="0"
border="0" onMouseOver="this.src='{TEMPLATE_HOME}/images/menu_3_on.PNG'"
onMouseOut="this.src='{TEMPLATE_HOME}/images/menu_3_off.PNG'"/>{LINK_CLOSE}</li>
</patTemplate:sub>
</patTemplate:tmpl>
</patTemplate:sub>
</patTemplate:tmpl>
</patTemplate:tmpl>
Остались последние штрихи, и мы получим то, ради чего так долго старались.
Заходим в админку, идём в "Менеджер Шаблонов". Ищем модуль, выводящий наше меню (mod_mainmenu) и скрываем его. Ищем модуль mod_exmenu-j15. Заходим в него, выставляем позицию модуля, источник меню (Menu Name), и пролистываем вниз. Напротив пункта "Enable Menu Template" ставим твёрдое "да", ниже, в пункт "Template Name", вписываем название нашего файла (topmenu_exmenu.html). Нажимаем сохранить.
Всё ! Идём на фронт-енд и смотрим что получилось. Смело клацаем на все пункты нового меню, и видим, что всё работает как и задумано.
Надеюсь моё многословие не доставит никому дискомфорта, я пытался разжевать всё как можно подробнее.
Надеюсь кому-то поможет.
Если что то ещё придумаю - добавлю.
Всем удачи !
Ссылки:
ExtendedMenu - наш модуль
Тут есть описание всех переменных, передаваемых в шаблон модулем
notepad++ - очень удобный редактор, который позволяет кодировать файлы в режиме без BOM
Готовый шаблон, описанный выше, с рисунками в приложении
----------------------------------------
1 Вот этого примера[вложение удалено Администратором]
06.07.2016, 11:31:08