Работа со скрытием/отображением элементов на jquery на примере фильтров в demodizyy

Материал из Umicms
Перейти к:навигация, поиск

Актуально для версии 2.9.1

Задача

Так как форма с фильтрами занимаем значительное место, и, наверно, не всем пользователям она нужна, нужно сделать так, чтобы пользователь сам мог включать/выключать форму с фильтрами. Реализовать этот проще всего на jquery, тем более, что она уже подключена.

Решение через jquery

Сначала, обрамим вызов результатов работы макроса catalog search тегами div с id="filter" и отключением отображения через css display:none, см. "Полезные ссылки":

<div id="filter" style="display:none">
      <xsl:apply-templates select="document(concat('udata://catalog/search////', $type))"/>
</div>

Потом, после вызова макроса catalog search зададим произвольный текст с картинкой, добавив в img id="filterButton":

<div>
      Фильтр товаров <img src="/images/icons/plus.png" id="filterButton"/>
</div>

Далее, в директорию /images/icons/ добавим две картинки plus.png и minus.png соответствующего содержания. И, наконец, зададим скрипт, для этого сразу после темлпейта match="udata[@method = 'getObjectsList'][total]" вставим внутри тега:

<script type="text/javascript"> </script>

следующий код:

$(document).ready(function(){
		//при клике на элемент с id "filterButton"
		$('#filterButton').click(function(){
		//если элемент с id "filter" скрыт
		if ($('#filter').is(':hidden')) {
			//то включаем его отображение 
			$('#filter').show();
			//и меняем картинку на "минус"
			$(this).attr('src','/images/icons/minus.png');
			}
		//иначе, то есть если элемент с id "filter" не скрыт
		else{
			//скрываем его
			$('#filter').hide();
			//меняем картинку на "плюс"
			$(this).attr('src','/images/icons/plus.png');
		}
		});
		});
  • Правильнее будет в дальнейшем вынести это скрипт в отдельный файл и подключить его в шаблоне.

Результат

В результате пользователь может включать/выключать отображения фильтров, кликая по картинке:

Filter7.pngFilter8.png

Полезные ссылки

  • css свойство display [1]
  • Правильные show/hide/toggle [2]