Мой Kbyte.Ru
Рассылка Kbyte.Ru
Группы на Kbyte.Ru
Партнеры Kbyte.Ru
Реклама
Сделано руками
Сделано руками
> Исходные коды - D.D. de Kerf -

JavaScript - Интерфейс

Все примеры / Интерфейс

Построение дерева

Автор: D.D. de Kerf | добавлено: 06.01.2011, 22:35 | просмотров: 2153 (1+) | комментариев: 0 | рейтинг: *x1
Простой пример создания дерева при помощи JavaScript.

Код

<HTML>

<BODY>

<!-- [client side code for collapsing and unfolding branches] -->
<SCRIPT LANGUAGE="JavaScript">

// ---------------------------------------------
// --- Name:    Easy DHTML Treeview           --
// --- Author:  D.D. de Kerf                  --
// --- Version: 0.1           Date: 6-6-2001  --
// ---------------------------------------------
function Toggle(node)
{
	// Unfold the branch if it isn't visible
	if (node.nextSibling.style.display == 'none')
	{
		// Change the image (if there is an image)
		if (node.children.length > 0)
		{
			if (node.children.item(0).tagName == "IMG")
			{
				node.children.item(0).src = "minus.gif";
			}
		}

		node.nextSibling.style.display = '';
	}
	// Collapse the branch if it IS visible
	else
	{
		// Change the image (if there is an image)
		if (node.children.length > 0)
		{
			if (node.children.item(0).tagName == "IMG")
			{
				node.children.item(0).src = "plus.gif";
			}
		}

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

}
</SCRIPT>


<H1>Easy DHTML TreeView</H1>
This is an example of a simple static treeview in action. Notice that the only functionality is provided inside the Toggle function. The complexity of the treeview HTML (numerous TABLE-tags) is provided purely for correct presentation.<BR><BR>

<HR>

<!-- [Example of a treeview in action] -->

<TABLE BORDER=0>

   <TR><TD>
      <TABLE BORDER=0><TR><TD><IMG SRC="leaf.gif"> Analysis<DIV>
      </DIV></TD></TR></TABLE>
   </TR></TD>

   <TR><TD>
      <TABLE BORDER=0><TR><TD><A onClick="Toggle(this)"><IMG SRC="minus.gif"> Implementation</A><DIV>

         <TABLE BORDER=0><TR><TD WIDTH=10></TD><TD><IMG SRC="leaf.gif"> PHP<DIV>
         </DIV></TD></TR></TABLE>

         <TABLE BORDER=0><TR><TD WIDTH=10></TD><TD><A onClick="Toggle(this)"><IMG SRC="minus.gif"> Visual C++</A><DIV>

            <TABLE BORDER=0><TR><TD WIDTH=10></TD><TD><IMG SRC="leaf.gif"> Memory Leak problems<DIV>
            </DIV></TD></TR></TABLE>

            <TABLE BORDER=0><TR><TD WIDTH=10></TD><TD><IMG SRC="leaf.gif"> Database problems<DIV>
            </DIV></TD></TR></TABLE>

         </DIV></TD></TR></TABLE>

      </DIV></TD></TR></TABLE>
   </TR></TD>

   <TR><TD>
      <TABLE BORDER=0><TR><TD><IMG SRC="leaf.gif"> Design<DIV></DIV>
      </TD></TR></TABLE>
  </TR></TD>

</TABLE>

<BR><BR>
<HR>
<I>For questions and suggestions, please contact the author:<BR>
D.D. de Kerf<BR>
(dddekerf@dds.nl or D.deKerf@bodegro.com)<BR></I>
</BODY>
</HTML>
Файлы DHTML_Treeview.zip (1,85 Кб)
Об авторе

D.D. de Kerf

Нет информации об авторе...
D.D. de Kerf
Последние комментарии (всего: 0)

Добавлять комментарии могут только зарегистрированные пользователи сайта.
Если у Вас уже есть учетная запись на Kbyte.Ru, пройдите процедуру авторизации OpenID.
Если Вы еще не зарегистрированы на Kbyte.Ru - зарегистрируйтесь.


Нет комментариев...

Авторизация
 
OpenID
Зарегистрируйся и получи 10% скидку на добавление своего сайта в каталоги! Подробнее »
Поиск по сайту
Реклама
Счетчики