Динамическое меню каталога товаров в Demodizzy - История изменений

Kublan в 12:06, 15 мая 2018

2018-05-15T12:06:06Z

Kublan: переименовал «Динамическое меню каталога товаров в demodizi» в «Динамическое меню каталога товаров в Demodizzy»

2018-05-15T11:54:20Z

переименовал «Динамическое меню каталога товаров в demodizi» в «Динамическое меню каталога товаров в Demodizzy»

Kublan в 11:49, 1 мая 2018

2018-05-01T11:49:20Z

Kublan в 11:48, 1 мая 2018

2018-05-01T11:48:12Z

Kublan в 11:32, 1 мая 2018

2018-05-01T11:32:08Z

Romario в 09:12, 29 декабря 2011

2011-12-29T09:12:37Z

Romario в 09:12, 29 декабря 2011

2011-12-29T09:12:25Z

Romario в 09:11, 29 декабря 2011

2011-12-29T09:11:38Z

Romario в 08:06, 29 декабря 2011

2011-12-29T08:06:51Z

Romario в 08:03, 29 декабря 2011

2011-12-29T08:03:38Z

← Предыдущая		Версия 12:06, 15 мая 2018
Строка 1:		Строка 1:
		+	'''Актуально для версии 18 85081'''
		+
	В данной статье речь пойдет о том как немного украсить ваш сайт и сделать его более интерактивным. И так, ниже будет описан простой способ сделать анимированное меню каталога с помощью методов jquery ui.		В данной статье речь пойдет о том как немного украсить ваш сайт и сделать его более интерактивным. И так, ниже будет описан простой способ сделать анимированное меню каталога с помощью методов jquery ui.

@@ Строка 7: / Строка 7: @@
 Нужные нам скрипты подключаются следующим образом:
 <source lang="xml">
-<script charset="utf-8" src="/js/jquery/jquery.effects.core.js" type="text/javascript"></script>
+<script charset="utf-8" src="/templates/demodizzy/js/jquery.effects.core.js" type="text/javascript"></script>
 </source>
 Соответственно файл jquery.effects.core.js нужно скачать с официального сайта Jquery.
-И теперь подключим непосредственно наш будущий скрипт. Для данного примера назовем его My.js и положим в папку ~/js/
+И теперь подключим непосредственно наш будущий скрипт. Для данного примера назовем его My.js и положим в папку ~/templates/demodizzy/js/
 <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>

@@ Строка 3: / Строка 3: @@
 Задача: Сделать двухуровневое меню, второй уровень которого по умолчанию скрыт. При наведении мыши на какой либо раздел меню, снизу от него должны плавно выезжать подразделы. При наведении курсора на другой пункт меню, старые подразделы должны исчезать, и появятся новые, в соответствии с выбранным пунктом меню.
-И так, для начала нам потребуется в шаблоне нашего сайта подключить все необходимые библиотеки jquery. Так как в UMI уже, по умолчанию, подключена основная библиотека jquery, нам потребуется лишь подключить скрипты эффектов и файл с нашим будущим кастомным скриптом. Так как в нашем примере мы рассматриваем верстку на основе XSLT то соответственно скрипты должны быть вставлены в файл, где прописана верстка тегов <head> (по умолчанию - ~\xsltTpls\layouts\default.xsl)
+И так, для начала нам потребуется в шаблоне нашего сайта подключить все необходимые библиотеки jquery. Так как в UMI уже, по умолчанию, подключена основная библиотека jquery, нам потребуется лишь подключить скрипты эффектов и файл с нашим будущим кастомным скриптом. Так как в нашем примере мы рассматриваем верстку на основе XSLT то соответственно скрипты должны быть вставлены в файл, где прописана верстка тегов <head> (по умолчанию - ~\templates\demodizzy\xslt\layouts\default.xsl)
 Нужные нам скрипты подключаются следующим образом:
@@ Строка 18: / Строка 18: @@
 Следующим нашим действием будет добавление дополнительных тегов в верстку сайта, необходимых для работы скрипта.
-Файл отвечающий за левое меню находится: ~\xsltTpls\modules\catalog\left-column-category-list.xsl
+Файл отвечающий за левое меню находится: ~\templates\demodizzy\xslt\modules\catalog\left-column-category-list.xsl
 Изначально, интересующий нас блок выглядит следующим образом:
@@ Строка 47: / Строка 47: @@
 				</span>
 				<div class="cat2" style="display: none;  height:1">
-						<xsl:apply-templates select="document(concat('udata://catalog/getCategoryList/void/', @id, '//1/'))" />
+					<xsl:apply-templates select="document(concat('udata://catalog/getCategoryList/void/', @id, '//1/'))" />
 				</div>
 			</li>
@@ Строка 77: / Строка 77: @@
 var block = 0;
 var menu_speed = 500; //переменная отвечающая за скорость выпадающего меню
-var menu_height=100;  //переменная отвечающая за высоту блока (данный скрипт не будет вычислять ее автоматически)
+var menu_height = 100;  //переменная отвечающая за высоту блока (данный скрипт не будет вычислять ее автоматически)
 // функция которая вызывается при наведении мыши
@@ Строка 96: / Строка 96: @@
 			//выбираем потомка нашего элемента (в данном случае это будет подменю, соответствующее пункту меню.)
                          elems_a =  elems_old.parentNode.childNodes[2];
-			//анемированно сворачиваем его
+			//анимированно сворачиваем его
                          $( elems_a ).animate({height: 1,  queue:true}, menu_speed, callback(elems_a) );
+		}
@@ Строка 116: / Строка 116: @@
 </source>
-Все. Теперь на вашем сайте должно получится красивое анемированное меню каталога. Для того чтобы сделать его более удобным, также, следует увеличить размер пунктов меню в таблице CSS стилей.
+Все. Теперь на вашем сайте должно получится красивое анимированное меню каталога. Для того чтобы сделать его более удобным, также, следует увеличить размер пунктов меню в таблице CSS стилей.
 [[Категория:Верстка в XSLT]]

@@ Строка 1: / Строка 1: @@
 В данной статье речь пойдет о том как немного украсить ваш сайт и сделать его более интерактивным. И так, ниже будет описан простой способ сделать анимированное меню каталога с помощью методов jquery ui.
 Задача: Сделать двухуровневое меню, второй уровень которого по умолчанию скрыт. При наведении мыши на какой либо раздел меню, снизу от него должны плавно выезжать подразделы. При наведении курсора на другой пункт меню, старые подразделы должны исчезать, и появятся новые, в соответствии с выбранным пунктом меню.
@@ Строка 121: / Строка 119: @@
 [[Категория:Верстка в XSLT]]

← Предыдущая		Версия 09:12, 29 декабря 2011
Строка 121:		Строка 121:

	[[Категория:Верстка в XSLT]]		[[Категория:Верстка в XSLT]]
		+	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=

← Предыдущая	Версия 11:54, 15 мая 2018
(нет различий)

← Предыдущая		Версия 09:11, 29 декабря 2011
Строка 121:		Строка 121:

	[[Категория:Верстка в XSLT]]		[[Категория:Верстка в XSLT]]
		+	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=

@@ Строка 66: / Строка 66: @@
 height:1          настройка стиля, согласно которой высота объекта = 1
-Тег отвечающий за вызов названий разделов имеет следующий вид <span onMouseOver="open_menu(this)" >
+Тег отвечающий за вызов названий разделов имеет следующий вид
 параметр onMouseOver="open_menu(this)" обозначает что при наведении мыши на данный объект будет вызываться javascript функция open_menu(), в которую будет передаваться значение объекта вызвавшего ее.

← Предыдущая		Версия 09:12, 29 декабря 2011
Строка 121:		Строка 121:

	[[Категория:Верстка в XSLT]]		[[Категория:Верстка в XSLT]]
−	~~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=~~