разработка веб-сайтов под ключ
обучающие программы для веб-разработчиков

Для создания древовидного раскрывающегося списка воспользуемся элементом управления ActiveX TreeView. Элемент управления TreeView вставляется в HTML-код с помощью тега

<object id="myTreeView"
classid="clsid: C74190B6-8589-11D1-B16A-00C0F0283628">
</object>

Если содержимое древовидного списка не помещается в область, заданную атрибутами width и height, то автоматически появляются полосы прокрутки. В тег <object> для элемента TreeView можно вставить теги <param>, определяющие дополнительные параметры. Их список можно узнать с помощью выражения alert(myTreeView.innerHTML). На внешний вид списка влияют следующие параметры:

<param name='LineStyle' value='число'>

<param name='Style' value='число'>

<param name='BorderStyle' value='число'>

Каждый узел иерархического списка представляется объектом Node. Множество всех узлов списка хранится в коллекции Nodes. Каждый узел может быть корневым(не иметь родителя), конечным(не иметь потомков) или промежуточным(иметь родителя и потомков). Корневых узлов может быть несколько, и тогда список состоит из нескольких древовидных списков.

;Объект Node(узел) имеет ряд свойств, с помощью которых описывается местоположение узла в списке: parent(узел-родитель), child(первый потомок), children(количество потомков) и root(корень).

Древовидный список создается путем добавления узлов в коллекцию Nodes посредством метода Add, который имеет следующие параметры.

• Первый параметр определяет объект, относительно которого создается новый узел. Это или индекс, или уникальный идентификатор существующего объекта. Если данный параметр не указан, то создается корневой узел.

• Второй параметр определяет отношение к уже существующим узлам. Возможны следующие значения:
• • 0 – новый узел создается перед всеми узлами того же уровня, что и узел, определенный первым параметром;
  • 1 – новый узел создается после всех узлов того же уровня, что и узел определенный первым параметром;
  • 2 – новый узел создается после узла, определенного первым параметром;
  • 3 – новый узел создается перед узлом, определенным первым параметром;
  • 4 – новый узел создается как потомок узла, определенного первым параметром.
  
  
• Третий параметр – идентификатор – строка символов; по идентификатору можно ссылаться на создаваемый узел.
  
  
• Четвертый параметр – текст, отображаемый рядом с меткой узла(обязательный параметр).
  
  
• Пятый параметр определяет изображение, соответствующее узлу.
  
  
• Шестой параметр определяет изображение, соответствующее узлу, когда он выбран щелчком или с помощью навигационных клавиш.

Только параметр, определяющий подписи узлов, является обязательным. Вместо пропускаемых параметров в вызове метода Add следует ставить null.

Рассмотрим пример, в котором код HTML-документа, содержит элемент управления TreeView, а также плавающий фрейм(<iframe>). В сценарии формируется древовидный список и определены процедуры, обрабатывающие события, связанные со списком. В результате их выполнения список можно развернуть, свернуть и загрузить в плавающий фрейм HTML-документ. В этом примере загрузка будет производиться при щелчке мыши на концевом узле. При этом адрес загружаемого документа формируется из подписи концевого узла путем приписывания к ней точки и расширени файла html. Возможны и другие алгоритмы формирования URL-адреса отображаемого документа.

В обработчике щелчка на элементах списка используется подобъект SelectedItem объекта TreeView, который содержит сведения о выделенном узле. Так, свойство Text содержит подпись выделенного узла, а children – количество дочерних узлов.

& В окне веб-браузера это будет выглядеть ТАК.