Slyweb
На разработку сайта! Скидки 50%!

Что такое Wayfinder?

jQuery и CSS

Wayfinder - класс для создания многоуровневых меню на основе дерева документов администраторского раздела. В этой статье я расскажу про Wayfinder для ModX Revolution. Для тех, кто остаётся на старых версиях ModX, использовать материалы этой статьи так же допустимо, однако нужно заменить двойные квадратные скобки на одинарные и добавить «+»к окончанию TV.

Функции Wayfinder

  • Создание навигации по сайту;
  • Создание собственных шаблонов вывода элементов навигации (к примеру, ими могут быть ul > li или dt > dl и т.д.);
  • Вывод отдельных элементов меню;
  • Создание «хлебных крошек».

Официальная страница Wayfinder - Wayfinder.

Таблица основных параметров Wayfinder

Данная таблица пригодится для настройки Wayfinder, например, здесь дозволено настраивать количество отображаемых меню, количество уровней, стартовый элемент меню.

Параметр Описание
По умолчанию
&startId
Начало для отсчёта элемента меню, обозначает позицию элемента, с которого следует выводить меню.
текущий параметр «docId»
&displayStart
Регулирует отображение стартового элемента меню.
FALSE
&level
Количество уровней меню. Установите '0' и будут отображены все меню, с любым уровнем вложенности.
0
&ignoreHidden
Игнорирует отметку "Show in menu" (отображать в меню) для элемента меню и заставляет отображать этот элемент меню в любом случае.
FALSE
&ph
Имя шаблона, в который будут выведены результаты.
FALSE
&debug
Установив 'TRUE' вы включите отладку ошибок меню.
FALSE
&hideSubMenus
Установив 'TRUE' будет отображено только активное меню.
FALSE
&removeNewLines
'TRUE' - удаляет символы перевода на новую строку.
FALSE
&textOfLinks
Поле устанавливающее текст ссылки. Допустимые значения: menutitle, id, pagetitle, description, parent, alias, longtitle, introtext menutitle (название элемента меню)
&titleOfLinks
Поле устанавливающее значение атрибута "title" для ссылки. Допустимые значения: menutitle, id, pagetitle, description, parent, alias, longtitle, introtext pagetitle
&rowIdPrefix
Параметр предназначен для создания уникальных ID элементов меню. Значение, при использовании этого параметра, будет складываться следующим образом:rowIdPrefix + docId.
FALSE
&useWeblinkUrl
Если TRUE, то ссылка ресурса будет передана в [wf.link] , вместо прямой передачи в конечный результат.
TRUE
&excludeDocs
Разделенный запятой список элементов, исключенных из меню.
0
&cacheResults
Разрешает кэширование результатов ( добавлен в 2.2.0-rc1)
 
&contexts
(добавлен в 2.2.0-rc1)
 
&startIdContext
(добавлен в 2.2.0-rc1)
 
&config внешний php файл с настройками меню (пример расположен по адресу: core/components/wayfinder/configs)  

Таблица основных параметров для создания собственных шаблонов Wayfinder

Если Вы ищите параметры для работы с шаблонами, - то здесь указаны все допустимые параметры для создания собственных шаблонов.

Параметр Описание
&startItemTpl
Имя чанка, содержащего шаблон для первого элемента меню, если был включен параметр &displayStart. По умолчанию первый элемент отображается не как ссылка. Изменить стиль первого элемента меню можно установив некоторый класс с помощью параметра &firstClass=`className`, о котором будет рассказано далее в таблице параметров о классах.
&parentRowHereTpl
Имя чанка, содержащего шаблон для текущего документа, если он имеет дочерние элементы. Для вывода дочерних элементов необходимо использовать TV[wf.wrapper], чтобы вывести дочерние элементы меню.
&parentRowTpl
Имя чанка, содержащего шаблон для родительских элементов меню. Для вывода дочерних элементов необходимо использовать [wf.wrapper], чтобы вывести дочерние элементы меню.
&hereTpl
Имя чанка, содержащего шаблон для текущего элемента.
&innerTpl Имя чанка для каждого субменю. Если данный параметр отсутствует, то вместо него будет использован шаблон outerTpl
&innerRowTpl
Имя чанка, содержащего шаблон для элементов находящихся в субменю.
&innerHereTpl
Имя чанка, содержащего шаблон для текущего документа, если он находится в субменю.
&activeParentRowTpl
Имя чанка, содержащего шаблон для элементов - контейнеров, которые одновременно являются активными и содержат дочерние элементы.
&categoryFoldersTpl
Имя чанка, содержащего шаблон для категорий.

Таблица основных параметров для создания собственных стилей для элементов меню Wayfinder

Для примера меню, которое будет рассмотрено ниже, мне пришлось использовать некоторые из классов из этой таблицы, наверно и Вам придётся сделать то же самое для создания своих меню.

Параметр Описание
По умолчанию
&firstClass
CSS класс для первого элемента меню.
 
&lastClass
CSS класс для последнего элемента меню.
last
&hereClass
CSS класс для активного элемента меню, - в котором находится пользователь;
active
&selfClass
CSS класс для текущего элемента меню.
 
&parentClass
CSS класс для родительских элементов меню.
parent
&rowClass
CSS класс для каждого элемента меню
 
&levelClass
CSS класс для каждого элемента меню определенного уровня. Уровень добавляется через класс (level1, level2, level3, но если вы указали класс 'level').
 
&outerClass
CSS класс для внешнего шаблона.
 
&innerClass
CSS класс для внутреннего шаблона
 
&webLinkClass
CSS класс для ссылок элементов меню.
 

Теперь Вам не надо самостоятельно менять какие-либо файлы на php, а только правильно использовать параметры Wayfinder для настроек, для шаблонов и для CSS. Давайте на основе этих данных создадим меню с эффектами jQuery.

Меню Wayfinder - основной сниппет

Итак, наш Wayfinder сниппет должен выглядеть следующим образом:

  • Код
  • Чистый код

  1.[[!Wayfinder? &startId=`0` &level=`0` &outerTpl=`cssplay_outer` &innerTpl=`cssplay_inner` &rowTpl=`cssplay_row` &outerClass=`menu_slider_new` &cssTpl=`cssplay_dropdown` &innerRowTpl =`inner_row` &jsTpl=`jqueryaccordion`]]
  2.


        
Листинг 1.

Меню Wayfinder - &outerTpl=`cssplay_outer`

  • Код
  • Чистый код

  1. <div class="menu_header_new">
  2.
  3. <div class="all"></div>
  4. <div class="noall"></div>
  5. </div>
  6.
  7.<div[[+wf.classes]]>
  8.
  9. [[+wf.wrapper]]
10.
11.</div>
12.


        
Листинг 2.

Меню Wayfinder - &innerTpl=`cssplay_inner`

  • Код
  • Чистый код

  1.<ul class="ul_inner">
  2. [[+wf.wrapper]]
  3.</ul>
  4.
  5.


        
Листинг 3.

Меню Wayfinder - &rowTpl=`cssplay_row`

Обратите внимание - мы создаём класс на основе id документа([[+wf.docid]]). В дальнейшем этот класс будет использоваться в CSS для создания каждому родительскому элементу меню собственной иконки.

  • Код
  • Чистый код

  1.
  2.<div class="menuhs">[[+wf.title]]<div class="bgimg[[+wf.docid]]"></div></div>
  3.<ul class="menu_conteinernew">
  4.<li[[+wf.classes]]><a href="[[+wf.link]]" title="[[+wf.title]]">[[+wf.linktext]]</a>[[+wf.wrapper]]</li>
  5.</ul>
  6.
  7.
  8.


        
Листинг 4.

Меню Wayfinder - &outerClass=`menu_slider_new`

menu_slider_new - класс основного контейнера меню.

Меню Wayfinder - &cssTpl=`cssplay_dropdown`

cssplay_dropdown - класс для подключения CSS стилей. Ниже указан весь CSS, однако в шаблоне можно подключить этот стиль, а не вписывать в шаблон.

  • Код
  • Чистый код

  1./* Это нужно в любом случае */
  2..menu_slider_new {
  3. -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  4. -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  5. box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  6. width: 250px;
  7. border: 1px solid #B2B2B2;
  8.}
  9.div.menuhs {
10. postion:relative;
11. padding: 5px 10px;
12. cursor: pointer;
13. position: relative;
14. margin:1px;
15. font-weight:bold;
16. background: #eef4d3 url(fonclick.jpg) center right repeat-x;
17. color: #b2b2b2;
18. cursor: pointer;
19. font-weight: bold;
20. text-decoration: none;
21. text-shadow: 0 -1px 1px #fff;
22.}
23.div.menuhs .bgimg1, div.menuhs .bgimg5, div.menuhs .bgimg6 , div.menuhs .bgimg15 {
24. position:absolute;
25. right:5px;
26. top:5px;
27. width: 24px;
28. height: 22px;
29. opacity:0;
30. filter:Alpha("opacity=0");
31.}
32.div.menuhs .bgimg1 {
33. background: url(chat.png) center right repeat-x;
34.}
35.div.menuhs .bgimg5 {
36. background: url(eye.png) center right repeat-x;
37.}
38.div.menuhs .bgimg6 {
39. background: url(baby.png) center right repeat-x;
40.}
41.div.menuhs .bgimg15 {
42. background: url(noall.png) center right repeat-x;
43.}
44..menu_conteinernew {
45. display:none;
46. list-style:none;
47. margin:0;
48. padding:0;
49.}
50..menu_conteinernew li{
51. display:block;
52. color:#545454;
53. background-color:#EFEFEF;
54. padding-left:10px;
55. text-decoration:none;
56.
57.}
58..menu_conteinernew li a{
59. color:#545454;
60. text-decoration:none;
61. opacity:.5;
62.
63.}
64..menu_conteinernew li a:hover{
65. color: #545454;
66. text-decoration:underline;
67.}
68.
69./* Если не нужно можете удалить (кнопи быстрого открытия всего меню) */
70.
71..menu_header_new{
72. -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
73. -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
74. box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
75. width: 250px;
76. border: 1px solid #B2B2B2;
77. postion:relative;
78. background: #eef4d3 url(fonclick.jpg) center right repeat-x;
79. margin:10px 0;
80. height:35px;
81. clear:both;
82.}
83.div.all, div.noall {
84. width: 24px;
85. height: 22px;
86. float:left;
87. margin:5px;
88. opacity:.5;
89. cursor:pointer;
90.}
91.div.all {
92.background: url(all.png) center right repeat-x;
93.}
94.div.noall {
95.background: url(noall.png) center right repeat-x;
96.}
97.
98.ul.ul_inner {
99. margin:0;
100. padding:0;
101.}
102.


        
Листинг 5.

Меню Wayfinder - &innerRowTpl =`inner_row`

  • Код
  • Чистый код

  1.<li>
  2. <a [[+wf.classes]] href="[[+wf.link]]" title="[[+wf.title]]">[[+wf.linktext]]</a>
  3.</li>
  4.
  5.
  6.


        
Листинг 6.

Меню Wayfinder - &jsTpl=`jqueryaccordion`

jqueryaccordion - шаблон содержащий jQuery. Вам останется указать правильный адрес фоновых изображений.

  • Код
  • Чистый код

  1.<script type="text/javascript">
  2.$(function(){
  3. /* функция для выдвижения меню по событию click */
  4.
  5. $(".menu_slider_new div.menuhs").click(function()
  6. {
  7. $(this).css({"backgroundImage":"url(assets/fon.jpg)","color":"#000","text-shadow": "0 1px 1px #F6F6F6"});
  8. $(this).children().fadeTo('slow', 1).end()
  9. .next("ul.menu_conteinernew") // переходим к следующему элементу за div.menuhs
10. .slideDown(300) // разворачиваем его
11. .siblings("ul.menu_conteinernew") // переходим ко всем элементам "братьям"
12. .slideUp("slow"); // закрываем их
13. $(this).siblings(".menuhs").children().fadeTo('slow', 0);
14.
15. $(this) // переходим к текущему элементу (по которому нажали)
16. .siblings() // выбираем все элементы смежные
17. .css({backgroundImage:"url(assets/fonclick.jpg)","color":"#b2b2b2","text-shadow": "0 -1px 1px #fff"});
18.
19. });
20.
21.
22. /* эффекты для ссылок */
23.
24. $(".menu_conteinernew li a").hover(
25. function(){
26. $(this).stop().fadeTo('slow', 1);
27. },
28. function(){
29. $(this).stop().fadeTo('slow', 0.5);
30. }
31. );
32.
33.
34. /*Можно удалить, это две кнопки быстрого открытия меню*/
35.
36. $("div.all, div.noall").hover(
37. function(){
38. $(this).stop().fadeTo('slow', 1);
39. },
40. function(){
41. $(this).stop().fadeTo('slow', 0.5);
42. }
43. );
44.
45. $("div.all").click(function(){
46. $("div.menuhs").css({backgroundImage:"url(assets/fonclick.jpg)"})
47. .next("ul.menu_conteinernew") // переходим к следующему элементу за div.menuhs
48. .slideDown(300) // разворачиваем его
49. .end().children().fadeTo('slow', 1);
50. });
51.
52.
53. $("div.noall").click(function(){
54. $("div.menuhs").css({backgroundImage:"url(assets/fonclick.jpg)","color":"#b2b2b2","text-shadow": "0 -1px 1px #fff"})
55. .next("ul.menu_conteinernew") // переходим к следующему элементу за div.menuhs
56. .slideUp(300) // разворачиваем его
57. .end().children().fadeTo('slow', 0);
58. });
59.
60.
61.});
62.
63.</script>
64.


        
Листинг 7.

Меню Wayfinder и jQuery

Результат - все элементы меню, состоящие из элементов дерева ресурсов админ. раздела трансформировались в меню на jQuery. При этом, каждый родительский элемент имеет собственную иконку. Я запретил переход из родительских элементов, оставив в них текст, при открытии родительского элемента он же будет продублирован как ссылка. Вы можете менять названия родительских элементов, например брать названия из атрибута title.

Данное меню основано на следующей иерархии ресурсов в администраторском разделе. Меню основанно на статье "jQuery - самое нужное! Как сделать меню с jQuery!".

Что такое Wayfinder?

Новые шаблоны должны выглядеть примерно следующим образом.

Что такое Wayfinder?

Заключение

Без Wayfinder не мыслим любой сайт. А с мини-руководством Вы сможете создавать меню любой сложности.

Поделись статьёй: 
Александр Ермаков