Динамическое меню каталога товаров в Demodizzy — различия между версиями
Romario (обсуждение | вклад) |
Kublan (обсуждение | вклад) |
||
| (не показано 14 промежуточных версий 2 участников) | |||
| Строка 1: | Строка 1: | ||
| + | '''Актуально для версии 18 85081''' | ||
| + | |||
В данной статье речь пойдет о том как немного украсить ваш сайт и сделать его более интерактивным. И так, ниже будет описан простой способ сделать анимированное меню каталога с помощью методов jquery ui. | В данной статье речь пойдет о том как немного украсить ваш сайт и сделать его более интерактивным. И так, ниже будет описан простой способ сделать анимированное меню каталога с помощью методов jquery ui. | ||
| − | |||
| − | |||
Задача: Сделать двухуровневое меню, второй уровень которого по умолчанию скрыт. При наведении мыши на какой либо раздел меню, снизу от него должны плавно выезжать подразделы. При наведении курсора на другой пункт меню, старые подразделы должны исчезать, и появятся новые, в соответствии с выбранным пунктом меню. | Задача: Сделать двухуровневое меню, второй уровень которого по умолчанию скрыт. При наведении мыши на какой либо раздел меню, снизу от него должны плавно выезжать подразделы. При наведении курсора на другой пункт меню, старые подразделы должны исчезать, и появятся новые, в соответствии с выбранным пунктом меню. | ||
| − | И так, для начала нам потребуется в шаблоне нашего сайта подключить все необходимые библиотеки jquery. Так как в UMI уже, по умолчанию, подключена основная библиотека jquery, нам потребуется лишь подключить скрипты эффектов и файл с нашим будущим кастомным скриптом. Так как в нашем примере мы рассматриваем верстку на основе XSLT то соответственно скрипты должны быть вставлены в файл, где прописана верстка тегов <head> (по умолчанию - ~\ | + | И так, для начала нам потребуется в шаблоне нашего сайта подключить все необходимые библиотеки jquery. Так как в UMI уже, по умолчанию, подключена основная библиотека jquery, нам потребуется лишь подключить скрипты эффектов и файл с нашим будущим кастомным скриптом. Так как в нашем примере мы рассматриваем верстку на основе XSLT то соответственно скрипты должны быть вставлены в файл, где прописана верстка тегов <head> (по умолчанию - ~\templates\demodizzy\xslt\layouts\default.xsl) |
Нужные нам скрипты подключаются следующим образом: | Нужные нам скрипты подключаются следующим образом: | ||
<source lang="xml"> | <source lang="xml"> | ||
| − | <script charset="utf-8" src="/js | + | <script charset="utf-8" src="/templates/demodizzy/js/jquery.effects.core.js" type="text/javascript"></script> |
</source> | </source> | ||
Соответственно файл jquery.effects.core.js нужно скачать с официального сайта Jquery. | Соответственно файл jquery.effects.core.js нужно скачать с официального сайта Jquery. | ||
| − | И теперь подключим непосредственно наш будущий скрипт. Для данного примера назовем его My.js и положим в папку ~/js/ | + | И теперь подключим непосредственно наш будущий скрипт. Для данного примера назовем его My.js и положим в папку ~/templates/demodizzy/js/ |
<source lang="xml"> | <source lang="xml"> | ||
| − | <script charset="utf-8" src="/js/My.js" type="text/javascript"></script> | + | <script charset="utf-8" src="/templates/demodizzy/js/My.js" type="text/javascript"></script> |
</source> | </source> | ||
Следующим нашим действием будет добавление дополнительных тегов в верстку сайта, необходимых для работы скрипта. | Следующим нашим действием будет добавление дополнительных тегов в верстку сайта, необходимых для работы скрипта. | ||
| − | Файл отвечающий за левое меню находится: ~\ | + | Файл отвечающий за левое меню находится: ~\templates\demodizzy\xslt\modules\catalog\left-column-category-list.xsl |
Изначально, интересующий нас блок выглядит следующим образом: | Изначально, интересующий нас блок выглядит следующим образом: | ||
| Строка 39: | Строка 39: | ||
Добавим дополнительные теги, для javascript: | Добавим дополнительные теги, для javascript: | ||
| + | <source lang="xml"> | ||
| + | <xsl:template match="udata[@method = 'getCategoryList']//item" mode="left-column"> | ||
| + | <div class="cat1"> | ||
| + | <li umi:element-id="{@id}" umi:region="row" > | ||
| + | <span onMouseOver="open_menu(this)" > | ||
| + | <a href="{@link}" umi:field-name="name" umi:delete="delete" umi:empty="&empty-section-name;"> | ||
| + | <xsl:value-of select="." /> | ||
| + | </a> | ||
| + | </span> | ||
| + | <div class="cat2" style="display: none; height:1"> | ||
| + | <xsl:apply-templates select="document(concat('udata://catalog/getCategoryList/void/', @id, '//1/'))" /> | ||
| + | </div> | ||
| + | </li> | ||
| + | </div> | ||
| + | </xsl:template> | ||
| + | </source> | ||
| + | Некоторое пояснение к тому что именно мы добавили. Вызов отвечающий за вывод подменю мы окружили тегом | ||
| + | <source lang="php"> | ||
| + | <div class="cat2" style="display: none; height:1"> | ||
| + | </source> | ||
| + | Параметр style="~" отвечает за настройки стиля | ||
| − | |||
display: none настройка стиля, согласно которой объект не отображается на странице | display: none настройка стиля, согласно которой объект не отображается на странице | ||
| + | |||
height:1 настройка стиля, согласно которой высота объекта = 1 | height:1 настройка стиля, согласно которой высота объекта = 1 | ||
| − | Тег отвечающий за вызов названий разделов имеет следующий вид <span onMouseOver="open_menu(this)" > | + | |
| + | Тег отвечающий за вызов названий разделов имеет следующий вид | ||
| + | <source lang="php"> | ||
| + | <span onMouseOver="open_menu(this)" > | ||
| + | </source> | ||
параметр onMouseOver="open_menu(this)" обозначает что при наведении мыши на данный объект будет вызываться javascript функция open_menu(), в которую будет передаваться значение объекта вызвавшего ее. | параметр onMouseOver="open_menu(this)" обозначает что при наведении мыши на данный объект будет вызываться javascript функция open_menu(), в которую будет передаваться значение объекта вызвавшего ее. | ||
| Строка 54: | Строка 79: | ||
var block = 0; | var block = 0; | ||
var menu_speed = 500; //переменная отвечающая за скорость выпадающего меню | var menu_speed = 500; //переменная отвечающая за скорость выпадающего меню | ||
| − | var menu_height=100; //переменная отвечающая за высоту блока (данный скрипт не будет вычислять ее автоматически) | + | var menu_height = 100; //переменная отвечающая за высоту блока (данный скрипт не будет вычислять ее автоматически) |
// функция которая вызывается при наведении мыши | // функция которая вызывается при наведении мыши | ||
| Строка 73: | Строка 98: | ||
//выбираем потомка нашего элемента (в данном случае это будет подменю, соответствующее пункту меню.) | //выбираем потомка нашего элемента (в данном случае это будет подменю, соответствующее пункту меню.) | ||
elems_a = elems_old.parentNode.childNodes[2]; | elems_a = elems_old.parentNode.childNodes[2]; | ||
| − | // | + | //анимированно сворачиваем его |
$( elems_a ).animate({height: 1, queue:true}, menu_speed, callback(elems_a) ); | $( elems_a ).animate({height: 1, queue:true}, menu_speed, callback(elems_a) ); | ||
} | } | ||
| Строка 93: | Строка 118: | ||
</source> | </source> | ||
| − | Все. Теперь на вашем сайте должно получится красивое | + | Все. Теперь на вашем сайте должно получится красивое анимированное меню каталога. Для того чтобы сделать его более удобным, также, следует увеличить размер пунктов меню в таблице CSS стилей. |
[[Категория:Верстка в XSLT]] | [[Категория:Верстка в XSLT]] | ||
Текущая версия на 12:06, 15 мая 2018
Актуально для версии 18 85081
В данной статье речь пойдет о том как немного украсить ваш сайт и сделать его более интерактивным. И так, ниже будет описан простой способ сделать анимированное меню каталога с помощью методов jquery ui.
Задача: Сделать двухуровневое меню, второй уровень которого по умолчанию скрыт. При наведении мыши на какой либо раздел меню, снизу от него должны плавно выезжать подразделы. При наведении курсора на другой пункт меню, старые подразделы должны исчезать, и появятся новые, в соответствии с выбранным пунктом меню.
И так, для начала нам потребуется в шаблоне нашего сайта подключить все необходимые библиотеки jquery. Так как в UMI уже, по умолчанию, подключена основная библиотека jquery, нам потребуется лишь подключить скрипты эффектов и файл с нашим будущим кастомным скриптом. Так как в нашем примере мы рассматриваем верстку на основе XSLT то соответственно скрипты должны быть вставлены в файл, где прописана верстка тегов <head> (по умолчанию - ~\templates\demodizzy\xslt\layouts\default.xsl)
Нужные нам скрипты подключаются следующим образом:
<script charset="utf-8" src="/templates/demodizzy/js/jquery.effects.core.js" type="text/javascript"></script>
Соответственно файл jquery.effects.core.js нужно скачать с официального сайта Jquery.
И теперь подключим непосредственно наш будущий скрипт. Для данного примера назовем его My.js и положим в папку ~/templates/demodizzy/js/
<script charset="utf-8" src="/templates/demodizzy/js/My.js" type="text/javascript"></script>
Следующим нашим действием будет добавление дополнительных тегов в верстку сайта, необходимых для работы скрипта.
Файл отвечающий за левое меню находится: ~\templates\demodizzy\xslt\modules\catalog\left-column-category-list.xsl
Изначально, интересующий нас блок выглядит следующим образом:
<xsl:template match="udata[@method = 'getCategoryList']//item" mode="left-column">
<li umi:element-id="{@id}" umi:region="row">
<span>
<a href="{@link}" umi:field-name="name" umi:delete="delete" umi:empty="&empty-section-name;">
<xsl:value-of select="." />
</a>
</span>
<xsl:apply-templates select="document(concat('udata://catalog/getCategoryList/void/', @id))" />
</li>
</xsl:template>
Добавим дополнительные теги, для javascript:
<xsl:template match="udata[@method = 'getCategoryList']//item" mode="left-column">
<div class="cat1">
<li umi:element-id="{@id}" umi:region="row" >
<span onMouseOver="open_menu(this)" >
<a href="{@link}" umi:field-name="name" umi:delete="delete" umi:empty="&empty-section-name;">
<xsl:value-of select="." />
</a>
</span>
<div class="cat2" style="display: none; height:1">
<xsl:apply-templates select="document(concat('udata://catalog/getCategoryList/void/', @id, '//1/'))" />
</div>
</li>
</div>
</xsl:template>
Некоторое пояснение к тому что именно мы добавили. Вызов отвечающий за вывод подменю мы окружили тегом
<div class="cat2" style="display: none; height:1">
Параметр style="~" отвечает за настройки стиля
display: none настройка стиля, согласно которой объект не отображается на странице
height:1 настройка стиля, согласно которой высота объекта = 1
Тег отвечающий за вызов названий разделов имеет следующий вид
<span onMouseOver="open_menu(this)" >
параметр onMouseOver="open_menu(this)" обозначает что при наведении мыши на данный объект будет вызываться javascript функция open_menu(), в которую будет передаваться значение объекта вызвавшего ее.
Теперь нужно написать сам скрипт, а точнее функцию, которая вызывается при наведении мыши на объект (название) Для этого откроем, пока еще пустой файл My.js, который мы подключили выше и напишем следующий скрипт:
var elems_old = "";
var block = 0;
var menu_speed = 500; //переменная отвечающая за скорость выпадающего меню
var menu_height = 100; //переменная отвечающая за высоту блока (данный скрипт не будет вычислять ее автоматически)
// функция которая вызывается при наведении мыши
function open_menu(elems){
//условие - если тригер блокировки стоит в 1, то функция не выполнится
// функция выполнися если переданное значенеие объекта отличается от старого (сработает только если мы выбрали новый пункт меню)
if(block == 0 && elems_old != elems){
//сразу блокируется, чтобы не выполнять алгоритм повторно
block = 1;
action_menu(elems);}
}
function action_menu(elems){
if ( elems_old != 0 ){
//выбираем потомка нашего элемента (в данном случае это будет подменю, соответствующее пункту меню.)
elems_a = elems_old.parentNode.childNodes[2];
//анимированно сворачиваем его
$( elems_a ).animate({height: 1, queue:true}, menu_speed, callback(elems_a) );
}
elems_c = elems.parentNode.childNodes[2];
//разворачиваем с анимацией выбранный пункт меню
$( elems_c ).animate({height: menu_height, queue:true}, menu_speed);
// Делаем элемент видимым
elems_c.style.display=""
elems_old = elems;
// снимаем блокировку
setTimeout(function() { block = 0; }, 100)
}
function callback(elems_a) {
//делаем исчезающий элемент невидимым
setTimeout(function() { elems_a.style.display="none"; }, menu_speed)
}
Все. Теперь на вашем сайте должно получится красивое анимированное меню каталога. Для того чтобы сделать его более удобным, также, следует увеличить размер пунктов меню в таблице CSS стилей.
