Наконец и передо мной встала задача отобразить разделы сайта в виде дерева. К готовым решениям сразу сформировались несколько критериев:

• библиотека не должна требовать денег, обратных ссылок и т.д.,
• поскольку на сайте JavaScript код написан с использованием MooTools 1.2, библиотека должна быть совместима с этой версией фреймворка,
• дерево должно основываться на списках и хорошо индексироваться поисковиками.

Перепробовал несколько вариантов, среди них хочу отметить Mif.Tree. Действительно хорошая реализация, богатый функционал, подробная документация, однако из-за JSON структуры и отсутствия переноса строчек от этого варианта пришлось отказаться.

Еще пару неудачных попыток и я наткулся на RIA DHTML Tree. Всем критериям удовлетворяет, реализован весь необходимый функционал. Однако после установки у меня возникла проблема: построение дерева из 300 элементов занимало у Internet Explorer довольно продолжительное время. Таким образом, мне пришлось динамически подгружать узлы дерева и, соответственно, расширять библиотеку.

Вот что получилось.

Структура дерева

Структура дерева выглядит следующим образом:

<div class="rdTreeFirebug">
<ul id="tree">
	<li><a href="#1" id="item1" rel="loadable">node1</a>
		<ul>
			<li><a href="#11" id="item7" rel="loadable">node11</a></li>
			<li><a href="#12" id="item8" rel="loadable">node12</a></li>
			<li><a href="#13" id="item9" rel="loadable">node13</a></li>
			<li><a href="#14" id="item10" rel="loadable">node14</a></li>

		</ul>
	</li>
	<li><a href="#2" id="item2" rel="loadable">node2</a></li>
	<li><a href="#3" id="item3" rel="non-loadable">node3</a></li>
	<li><a href="#4" id="item4" rel="non-loadable">node4</a></li>
	<li><a href="#5" id="item5" rel="non-loadable">node5</a></li>
	<li><a href="#6" id="item6" rel="loadable">node6</a>
		<ul>
			<li><a href="#62" id="item16" rel="loadable">node62</a></li>
			<li><a href="#61" id="item15" rel="loadable">node61</a></li>
		</ul>
	</li>
</ul>
</div>

Каждая ссылка имеет атрибут rel, который указывает, раскрыается ли данный узел или нет (loadable, non-loadable). Номер узла, который входит в атрибут id передается в качестве параметра при загрузке дочерних элементов.

Инициализация

var myTree = new rdTree('tree', {
	img: {
		path: 'img/rdTree/firebug/',
		itemName: 'item_mcircle.gif',
		plusName: 'plus.gif', 
		minusName: 'minus.gif',
		loaderName: 'item_mcircle.gif'
	},
	classes: {
		selected: 'selected',
		opened: 'opened',
		first: 'first',
		last: 'last',
		center: 'center',
		centerNode: 'centerNode',
		lastNode: 'lastNode'
	},
	links : {
		host: '',
		getNode : 'data.json?'
	}
});

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

Демо-версия, архив с примером
Подробнее об установке скрипта Вы можете узнать на сайте автора скрипта.