Начало · Справочники · Курсы · Разговоры

leechy.ru · Сайт почти придуман

Дерево попроще

Я получил очень много писем с вопросами по реализации дерева из статей 3-4 на этом сайте «Делаем дерево из таблицы». Явно для многих из вас оказалось сложным переварить вобщем-то маленький скрипт создающий массив из объектов и в последствии работающий с ним. Что конечно не может меня не расстраивать. А еще я заметил, что в подавляющем большинстве случаев использования скрипта, вовсе не нужно использование всей этой объектной модели.

Так как мне пришлось быстренко сделать маленький скрипт, который управляет похожим деревом, думаю для многих из вас этот «вариант попроще» будет полезнее. Поэтому сделаю небольшой пример с кратким разбором.

Хранение данных

Зачем нужны JavaScript'овые массивы, когда в большинстве случаев хватает HTML? Резонный вопрос, на которого нет ответа... для большинства случаев. Единственное, что действительно необходимо для создания дерева — древовидная структура данных, где под-ветки полностью расположены в своих родителях. Это нелегко получить, если отдельные пункты — строки одной и той-же таблицы, независимо от того какого они уровня, но строки таблицы легко заменяются простыми блоковыми элементами, например <div>.

В качестве примера привожу часть структуры этого сайта. Ссылки укоротил, чтобы не занимать лишнего места:

<a href="/howto/" onclick="return branchSwitch('howto')">±</a>
<a href="/howto/">Как сделать?</a><br>
<div id="howto" style="display: none; margin-left: 30px;">
	7. <a href="/howto/">Слои</a><br>
	3-4. <a href="/howto/" onclick="return branchSwitch('tree')">±</a>
	<a href="/howto/">Делаем дерево из таблицы</a><br>
	<div id="tree" style="display: none; margin-left: 30px;">
		<a href="/howto/">Часть 1</a><br>
		<a href="/howto/">Часть 1</a><br>
	</div>
	2. <a href="/howto/">Играем в прятки</a><br>
	1. <a href="/howto/">Скажи мне, что у тебя за браузер...</a><br>
</div>
<a href="/common/" onclick="return branchSwitch('common')">±</a>
<a href="/common/">Общие?</a><br>
<div id="howto" style="display: none; margin-left: 30px;">
	2. <a href="/common/">Есть в браузере такая фича?</a><br>
	1. <a href="/common/">Netscape 6 вышел!</a><br>
</div>

Как видно из примера — при первоначальной загрузки страницы будут видны только два основных пункта. Все под-пункты расположены в div'ах у которых свойство display равно none. Соответственно, если дерево выполняет роль меню сайта, то нужно позаботиться о том, чтобы на разных страниц соответствующие пункты были разкрыты. Это обычно делается server-side и зависит от технологии построения конкретного сайта, так что я не буду рассматривать вопрос.

Еще с помощью стилей прописано расстояние в 30 пиксела слева. На самом деле я таким образом указываю отступ, чтобы дерево было похоже на дерево. Вы-же можете «разукрасить» дерево как хотите — самое главное, чтобы для пунктов конкретного уровня был собственный контейнер, и чтобы под-пункты были тоже в нем.

Перед каждым пунктом есть знак плюс-минус. У которого прописана ссылка, совпадающая со ссылкой пункта, плюс перехватывается событие onClick. Подробнее о функции обрабатывающая событие — чуть ниже. Ссылка прописывается для браузеров, не умеющих убирать и ставить элементы на странице — в их случай посетитель страницы просто перейдет в нужный раздел, где этот пункт меню будет уже развернут.

Пару строк кода

В ссылке с знака плюс-минус, о которой говорили только что, перехватывается onClick, при наступление которого вызывается функция branchSwitch() с параметром — id контейнера под-пунктов у конкретного раздела. Что она делает, давайте рассмотрим ее подробнее:

function branchSwitch(branch) {
   if (dom || ie4) {
      var currElement = (dom)? document.getElementById(branch) : document.all[branch];
      currElement.style.display = (currElement.style.display == 'none')? 'block' : 'none';
      return false;
   } else return true;
}

В ее первой строке проверяется тот ли браузер. О том, какие браузеры умеют работать со свойством стилей display я уже рассказывал. Если браузер не dom и не MSIE4, то возвращается true и посетитель страницы переходит по ссылке.

Если браузер умеет работать с display, то во второй строке мы присваеваем временной переменной currElement указатель на элемент-контейнер с необходимыми под-пунктами. Следующий шаг — изменить свойство display. Если элемент скрыть — мы его показываем и наоборот. Заканчиваем возвращая false, чтобы не сработала ссылка.

Пример

± Как сделать?
± Общие

По-моему все просто. В коде этой страницы есть полный код (с определением браузера), а справа от этого текста — работающий пример. Осторожно нажимая на ссылки — они работают и можете легко оказаться в другом месте на сайте.

Если есть вопросы — пишите в форуме в разделах Общие вопросы или Document Object Model (в зависимости от вопроса).

Хочу добавить, что скрипт дерева был упрощен для одного из проектов, которые я делал для Студии Артемия Лебедева, так что если не сложно, копируйте скрипт вместе с комментарием об авторских прав.

Спасибо за внимание.