Плагин jQuery Easytree и Wayfinder

21.02.2017

jQuery плагин EasyTree предназначен для конвертации UL или JSON списков в древовидное меню вашего сайта. Легок в использовании и абсолютно бесплатен. Скачать его можно здесь. В архиве находятся два файла "jquery.easytree.js" и "jquery.easytree.min.js", один из них нужно подключить на странице (подключив предварительно jquery). Так же в архиве есть 4 папки со стилями отображения меню. Нужно подключить один из файлов "ui.easytree.css".

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

<div id="menu"> [[!Wayfinder? &startId=`0` &textOfLinks=`pagetitle` &titleOfLinks=`longtitle` ]] </div> <script> $('#menu').easytree(); </script>

В результате получиться дерево навигации, которое содержит все документы и папки. Папки можно раскрывать и сворачивать.

Единственный недостаток, что папки и документы имеют одинаковые иконки. Хотелось бы чтобы папки выглядели как папки. Для этого в Wayfinder добавляем класс parentClass.

<div id="menu"> [[!Wayfinder? &startId=`0` &textOfLinks=`pagetitle` &titleOfLinks=`longtitle` &parentClass=`isFolder` ]] </div> <script> $('#menu').easytree(); </script>

Вот теперь порядок! Папки выглядят как положено.

Теперь хотелось бы, чтобы дерево было раскрыто до текущего документа, и чтобы он чтобы был выделен. Для этого добавим в Wayfinder ещё пару классов, selfClass - для текущего документа и hereClass - для родительских папок.

<div id="menu"> [[!Wayfinder? &startId=`0` &textOfLinks=`pagetitle` &titleOfLinks=`longtitle` &parentClass=`isFolder` &hereClass=`isExpanded` &selfClass=`isActive` ]] </div> <script> $('#menu').easytree(); </script>

Теперь всё в полном порядке! Отмечу, что классы 'isFolder', 'isExpanded', 'isActive' являются фиктивными, и они нужны для того чтобы easytree сформировал соответствующий вид дерева навигации.

Немного позже я обнаружил еще один недостаток - при наведении курсора на ссылку, отсутствуют всплывающие подсказки (title). Оказалось что для easytree нужно title вставлять не в саму ссылку <a title="...">, а в <li title="..."><a >...</a></li>. Чтобы это исправить придется создать чанк treeRowTpl. Он отличается от дефолтного только местом [[+wf.title]].

<!-- treeRowTpl --> <li[[+wf.classes]] title="[[+wf.title]]"><a href="[[+wf.link]]">[[+wf.linktext]]</a>[[+wf.wrapper]]</li> <div id="menu"> [[!Wayfinder? &startId=`0` &textOfLinks=`pagetitle` &titleOfLinks=`longtitle` &parentClass=`isFolder` &hereClass=`isExpanded` &selfClass=`isActive` &rowTpl=`treeRowTpl` ]] </div> <script> $('#menu').easytree(); </script>

Вот теперь вообще красота!

Про конвертацию JSON списков пока ничего не скажу.