Динамическое меню каталога товаров в Demodizzy — различия между версиями

Материал из Umicms
Перейти к:навигация, поиск
Строка 56: Строка 56:
 
Некоторое пояснение к тому что именно мы добавили:  
 
Некоторое пояснение к тому что именно мы добавили:  
 
Вызов отвечающий за вывод подменю мы окружили тегом <div class="cat2" style="display: none;  height:1">
 
Вызов отвечающий за вывод подменю мы окружили тегом <div class="cat2" style="display: none;  height:1">
 +
 
Параметр style="" отвечает за настройки стиля
 
Параметр style="" отвечает за настройки стиля
 
display: none    настройка стиля, согласно которой объект не отображается на странице
 
display: none    настройка стиля, согласно которой объект не отображается на странице
Строка 63: Строка 64:
  
 
Теперь нужно написать сам скрипт, а точнее функцию, которая вызывается при наведении мыши на объект (название)
 
Теперь нужно написать сам скрипт, а точнее функцию, которая вызывается при наведении мыши на объект (название)
ДЛя этого откроем, пока еще пустой файл My.js, который мы подключили выше и напишем следующий скрипт:
+
Для этого откроем, пока еще пустой файл My.js, который мы подключили выше и напишем следующий скрипт:
  
 
<source lang="javascript">
 
<source lang="javascript">

Версия 07:49, 29 декабря 2011

В данной статье речь пойдет о том как немного украсить ваш сайт и сделать его более интерактивным. И так, ниже будет описан простой способ сделать анимированное меню каталога с помощью методов jquery ui.

Example.jpg

Задача: Сделать двухуровневое меню, второй уровень которого по умолчанию скрыт. При наведении мыши на какой либо раздел меню, снизу от него должны плавно выезжать подразделы. При наведении курсора на другой пункт меню, старые подразделы должны исчезать, и появятся новые, в соответствии с выбранным пунктом меню.

И так, для начала нам потребуется в шаблоне нашего сайта подключить все необходимые библиотеки jquery. Так как в UMI уже, по умолчанию, подключена основная библиотека jquery, нам потребуется лишь подключить скрипты эффектов и файл с нашим будущим кастомным скриптом. Так как в нашем примере мы рассматриваем верстку на основе XSLT то соответственно скрипты должны быть вставлены в файл, где прописана верстка тегов <head> (по умолчанию - ~\xsltTpls\layouts\default.xsl)

Нужные нам скрипты подключаются следующим образом:

<script charset="utf-8" src="/js/jquery/jquery.effects.core.js" type="text/javascript"></script>

Соответственно файл jquery.effects.core.js нужно скачать с официального сайта Jquery.

И теперь подключим непосредственно наш будущий скрипт. Для данного примера назовем его My.js и положим в папку ~/js/

<script charset="utf-8" src="/js/My.js" type="text/javascript"></script>

Следующим нашим действием будет добавление дополнительных тегов в верстку сайта, необходимых для работы скрипта.

Файл отвечающий за левое меню находится: ~\xsltTpls\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>

Добавим дополнительные теги, для яваскрипта:

<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>

Некоторое пояснение к тому что именно мы добавили:

Вызов отвечающий за вывод подменю мы окружили тегом