Tree (дерево)

В статье рассмотрено создание на основе JavaScript древовидной структуры с плавно раскрывающимися списками.

Начну с примера:

Это скелет для построения полнофункционального скрипта классического дерева или другого списка, хотя можно использовать и в таком виде. Рассмотрим код:

JavaScript:

var t,lit,i;

function tree(liter) {
    lit=liter;						//литера
    i=1;							//счетчик
    t = setInterval(show, 75); 	//развертываем/сворачиваем с заданным интервалом
}

function show() {
	var el;
    if(el = document.getElementById(lit + i)) {
		el.style.display = (el.style.display == 'block')?'none':'block';
		i++;
    }
    else clearInterval(t);
}


HTML:


Можно убрать setInterval и просто вызывать функцию show(), тогда список будет открываться не поочередно, а сразу.

проблемы:

  • если высота блока меньше высоты развернутого списка, то при раскрытии/закрытии пунктов размеры блока будут скакать, придется принимать дополнительные меры

17 Комментарии “Tree (дерево)

  1. не вижу рекламы на этом сайте. сорри, фаерфокс все режет. но автору спасибо :-*

  2. автору ОГРОМНОЕ спасибо! Побольше бы таких ресурсов в РУнете!

  3. Отлично, а насколько сложно сделать чтобы пункты меню закрывались не повторным нажатием, а при нажатии на другие пункты?

  4. to shark182:
    совсем не сложно — при нажатии на пункт сначала закрывайте все в цикле, а затем открывайте тот, на который нажали. Задача усложнится, если будет больше одного уровня вложенности — их нужно будет учитывать, чтобы не закрыть родительский пункт вместе с нажатым элементом

  5. to Alek Veritov: Не ожидал настолько быстрой реакции. Нельзя ли подробнее? Меню например с одним уровнем вложенности. Думаю это дополнение пригодится и другим.

  6. to Alek Veritov: У меня уже цифры с ника выпадать стали от мозгового штурма. I need help! Как сначала закрыть все ветки и открыть нужную?
    P.S. А я вам на баннер кликну))

  7. Заработало, но конструкция довольно громоздкая получилась. Через id и каждому элементу прописывается нечто вроде: document.getElementById('s1').style.display='none'; и т.д.

  8. Разрешите вопрос. Каким образом организован цикл по переменной i. можно объяснить?

  9. Разрешите вопрос. Каким образом организован цикл по переменной i. можно объяснить?

  10. так проще и понятнее: function tree(lit) { var el; var i = 1; while (el = document.getElementById(lit + i)) { if (el.style.display == 'block') el.style.display = 'none'; else el.style.display = 'block'; i++; } }

  11. Подскажите пожалуйста как можно запомнить позицию на которой открыто дерево. Чтоб оно не сворачивалось после обновления страницы

  12. Запомнить позицию можно в куках или в сессии, а при обновлении восстанавливать. Про то, как это сделать на чистом javascript'е можно почитать здесь — xhtml.ru/2008/05/14/sessvars/ А вообще планирую скоро выложить материал по этой теме.

  13. А подскажите пожалуйста для того что бы запомнить позицию достаточно запомнить значение переменной i в функции show()?

  14. Здравствуйте! Спасибо автору за дерево, всё работает очень неплохо, но есть одна проблемка — tdshans.ru/katalog.html, когда наводишь курсор на дерево, то вместо руки появляется значёк "I", а у Вас нет, почему? Помогите пожалуста разобраться.

  15. Спасибо Автору, не респект Автору за простоту =))) все просто до ужаса =))) а самое главное я нашел в этом то что искал !!!

  16. "Rus" я не глядел к автору кода в код, но могу сказать что подобное сделать можно с помощью css пример "cursor:pointer;" Прошу прощения у Админа за ссылку htmlbook.ru вам поможет

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *