Как реализовать структуру дерева? -> Форум на Исходниках.Ру

	Наши проекты: Журнал · Discuz!ML · Wiki · DRKB · Помощь проекту

Здравствуйте, Гость ! [18.224.37.68]

Модераторы: ElcnU, ANDLL, fatalist

Новое голосование

Как реализовать структуру дерева?

SER-Gun

Сообщ. #1 , 06.09.04, 08:58

Junior

Профиль · PM

Рейтинг (т): 0

Подскажите пожалуйста, как реализовывается структура дерева...Хотя бы простейшего. Желательно, чтобы поддерживалась большенством броузеров. В итоге на 3-ем уровне будут ссылки. Желательно в текстовом режиме. Т.е. без всяких там выпендронов под винду.

Добавлено в 06.09.04, 09:48:
Уточню, я хочу чтобы у меня было следующее отображение:

Цитата

Пункт 1
Подпункт 1
Ссылка 1
Ссылка 2
Подпункт 2
Подпункт 3
Пункт 2
Подпункт 4
Подпункт 5
Подпункт 6

Чтобы это открывалось динамически из загруженных массивов данных.

Сообщение отредактировано: SER-Gun - 06.09.04, 09:52

SER-Gun	Сообщ. #2 , 06.09.04, 10:13
Junior Профиль · PM Рейтинг (т): 0	Ну еще точнее, можно было бы, чтобы я сразу такую менюху формировал, но чтобы вложенные элементы были не видны, а потом при нажатии на пункт появлялось и при повторном нажатии исчезало

Mixxx

Сообщ. #3 , 06.09.04, 16:16

Profi

Профиль · PM

Поощрения: 13 Dgm

Рейтинг (т): 107

Велосипед изобретать не надо,
дело в том, что любой HTML документ - это уже дерево.
Примерно такое:

HTML

|----HEAD

| |---TITLE

| |---META

|----BODY

|----DIV

..................

Другой вопрос, что не каждый умеет этим деревом пользоватся.
Вот очень хорошая ссылка Основы DOM
А конкретно про меню читай - Динамическая подгрузка меню (сообщение #447477)

shipbrother

Сообщ. #4 , 06.09.04, 18:31

Senior Member

Профиль · PM

Рейтинг (т): 17

если тебе не надо периодически подгружать и отгружать часть меню, как в меню, которое ты найдешь по предложенной Mixxxом ссылке, (то есть все меню сразу при первой загрузке может уже находится в памяти), то могу помочь с готовым кодом. использовал xml+javascript(DOM)
гарантирую работу в IE(больше нигде не тестил), но скрипт можно подправить так, что все будет ок.

Добавлено в 06.09.04, 18:36:
сразу предупредждаю, я не такй спец как Mixxx, поэтому мое решение может быть не таким профессиональным.

но точно скажу - выглядит оно попроще

Сообщение отредактировано: shipbrother - 06.09.04, 18:32

Mixxx	Сообщ. #5 , 07.09.04, 02:43
Profi Профиль · PM Поощрения: 13 Dgm Рейтинг (т): 107	Цитата shipbrother, 7.09.04, 00:31 использовал xml+javascript(DOM) Интересно а как именно у тебя реализовано "сцепление" HTML с XML? С помощью тега <XML>?

shipbrother	Сообщ. #6 , 07.09.04, 05:32
Senior Member Профиль · PM Рейтинг (т): 17	да, с помошью тега <XML>.

SER-Gun

Сообщ. #7 , 07.09.04, 05:52

Junior

Профиль · PM

Рейтинг (т): 0

Большое спасибо за советы. Но у меня ситуация такая, что не хотел бы использовать XML...Выходные данные у меня подгатавливает php скрипт. И мне просто необходимо правильно понять, как реализовывается это меню...Чтобы оно разворачивалось и сворачивалось при нажатии на пункты. Я предполагал сделать это следующим способом. Подгружать все, но некоторые блоки делать hidden, а потом можно их сделать видимыми? :whistle:

Rom@nych	Сообщ. #8 , 07.09.04, 12:26
Profi Профиль · PM Поощрения: 2 Dgm Рейтинг (т): 75	Цитата SER-Gun, 7.09.04, 04:52 а потом можно их сделать видимыми? Естественно! display: block; Для чего нужен? Даю ссылку на сайт. Там есть классные скрипты менюшек - глянь! http://www.twinhelix.com/ P.S.: остальным тоже советую!

SER-Gun

Сообщ. #9 , 08.09.04, 08:16

Junior

Профиль · PM

Рейтинг (т): 0

Я там поползал, что-то мне ничего не понравилось...
Есть вопрос следующий, как скрыть какой-то блок, а потом его вывести при нажатии на какой-то элемент. И как вообще выделить этот блок. Желательно на примерчике, если у кого есть.

Mixxx	Сообщ. #10 , 08.09.04, 08:26
Profi Профиль · PM Поощрения: 13 Dgm Рейтинг (т): 107	Скрыть obj.style.display='none' Показать obj.style.display='block' А что значит выделить?

SER-Gun	Сообщ. #11 , 08.09.04, 08:56
Junior Профиль · PM Рейтинг (т): 0	obj в данном случае это имя объекта? Вот у меня предположим есть текст: Ссылка 1 Ссылка 2 Как его выделить в единый блок? Который будет исчезать и появляться?

Астарот

Сообщ. #12 , 08.09.04, 13:09

Unregistered

obj я так понял это то, что ты прописал в id

<a id="ssilka" .......>My Super Link</a>

Не знаю сработает ли это дело относительно <a>, но вот <div> прятать одно удовольствие, я думаю.
Кстати, а что насчет не display, а hidden? В чем разница? Противопоказания есть?

Rom@nych	Сообщ. #13 , 08.09.04, 15:49
Profi Профиль · PM Поощрения: 2 Dgm Рейтинг (т): 75	Astaroth, obj - это document.getElementById(element_id)

Астарот	Сообщ. #14 , 09.09.04, 06:53
Unregistered	Так и я обо что! Это ввиду и имел.

Mixxx	Сообщ. #15 , 09.09.04, 07:00
Profi Профиль · PM Поощрения: 13 Dgm Рейтинг (т): 107	Цитата Astaroth, 8.09.04, 19:09 Кстати, а что насчет не display, а hidden? В чем разница? Противопоказания есть? А что такое hidden?

Астарот	Сообщ. #16 , 10.09.04, 06:48
Unregistered	Цитата Mixxx, 9.09.04, 10:00 А что такое hidden? Пардон, был не прав, исправлюсь. Попутался с абсолютно другой вещью. Глюк-с...

Суть_Зла

Сообщ. #17 , 11.09.04, 10:41

Unregistered

Вот примерчиков парочка, написано за 15 минут, так что
не пужайтесь сильно

Читать с форума, наверное, невозможно, но если скопировать...
Пара недостатков: жестко привязан к конструкции таблиц
(для другой структуры будет необходимо немного переписать скрипты).
А еще разобраться сложно

<html>

<head>

.ultd {

border-bottom: 1px solid black;

}

.ultd {

border-up: 1px solid black;

}

</style>

function Toggle(node,tagDes) {

if (node.nextSibling.nextSibling.style.display == 'none') {

if (node.children.length > 0) {

if (node.children.item(0).tagName == "IMG") {

node.children.item(0).src = "minus.gif";

}

node.nextSibling.nextSibling.style.display = 'block';

DoSize(document.all['upperTr'],tagDes,1);

DoSizeL(document.all['upperTr'],tagDes,1);

} else {

if (node.children.length > 0) {

if (node.children.item(0).tagName == "IMG") {

node.children.item(0).src = "plus.gif";

}

node.nextSibling.nextSibling.style.display = 'none';

DoSize(document.all['upperTr'],tagDes,2);

DoSizeL(document.all['upperTr'],tagDes,2);

}

function DoSizeL(node,tagDes,opcl) {

if (node.nextSibling) {

if (node.children.length>0) {

for (i=0; i<node.nextSibling.children.item(0).children.item(0).children.item(0).children.length; i++) {

if (node.nextSibling.children.item(0).children.item(0).children.item(0).children.item(i).className=='i'+tagDes+'i') {

if (opcl==1) {node.nextSibling.children.item(0).children.item(0).children.item(0).children.item(i).style.display='block'; }

else { node.nextSibling.children.item(0).children.item(0).children.item(0).children.item(i).style.display='none'; }

}

DoSizeL(node.nextSibling,tagDes,opcl);

}

function DoSize(node,tagDes,opcl) {

if (node.nextSibling) {

if (node.nextSibling.className=='i'+tagDes+'i') {

if (opcl==1) { node.nextSibling.style.display='block'; }

else { node.nextSibling.style.display='none'; }

}

DoSize(node.nextSibling,tagDes,opcl);

}

</script>

</head>

<tr style="background: #AAAAAA; height: 35px; position: relative;"><td colspan="2"><img align="left" style="position: relative; top: 7; left: -3;" src="down2.gif" border="0"><div style="position: relative; top: 11; left: -3; font-size: 13;">Московская ж.д.</div>&nbsp<div align="right" style="position: absolute; top: 11; font-size: 13; right: 0;"><b>ВНИИАС. Пример дерева.&nbsp&nbsp&nbsp</b></div></td></tr>

<a onClick="Toggle(this,'2');">&nbsp<IMG src="plus.gif" style="cursor: hand;"></a><font> Program Files</font><DIV style="display: none;">

<tr><td>&nbsp&nbsp&nbsp&nbsp<IMG src="dot.gif"> setup.exe</td></tr>

<tr><td>&nbsp&nbsp&nbsp&nbsp<IMG src="dot.gif"> MSoffice.exe</td></tr>

</table>

</DIV>

</td></tr>

<a onClick="Toggle(this,'3');">&nbsp<IMG src="plus.gif" style="cursor: hand;"></a><font> Works</font><DIV style="display: none;">

</table>

</DIV>

</td></tr>

<a onClick="Toggle(this,'4');">&nbsp<IMG src="plus.gif" style="cursor: hand;"></a><font> Windows</font><DIV style="display: none;">

</table>

</DIV>

</td></tr>

</table>

</DIV>

</td></tr>

<a onClick="Toggle(this,'6');">&nbsp<IMG src="plus.gif" style="cursor: hand;"></a><font> autorun</font><DIV style="display: none;">

<tr><td>&nbsp&nbsp&nbsp&nbsp<IMG src="dot.gif"> autorun.inf</td></tr>

</table>

</DIV>

</td></tr>

</table>

</DIV>

</td></tr>

</TABLE></td><td>

</table>

</td>

</tr>

</table>

</td></tr>

</table>

</td></tr>

</table>

</td></tr>

</table>

</td></tr>

</table>

</td></tr>

</table>

</td></tr>

</table>

</td></tr>

</table>

</td></tr>

</table>

</td></tr>

</table>

</td></tr>

</table>

</td></tr>

</table>

</td></tr>

</table>

</td></tr>

</TABLE>

</center>

</body>

</html>

SergeS	Сообщ. #18 , 11.09.04, 20:04
Master Профиль · PM Поощрения: 50 Dgm Рейтинг (т): 31	Суть_Зла, 1. пользуй свой ник, который ты уже зарегил ! 2. ето можно было и приатачить еслиб ты выполнил пункт 1.

Суть Зла	Сообщ. #19 , 11.09.04, 21:16
Senior Member Профиль · PM Рейтинг (т): 29	offtop: понял, понял, каюсь-каюсь... больше не буду. PS: то-то я думал, где аттач??

0 пользователей читают эту тему (0 гостей и 0 скрытых пользователей)

0 пользователей:

[ Script execution time: 0,0445 ] [ 15 queries used ] [ Generated: 27.04.24, 18:21 GMT ]