Сообщений 22    Оценка 330 [+3/-0]         Оценить  
Система Orphus

HTML Tree Control

Автор: Ярослав Говорунов
The RSDN Group
Опубликовано: 5.04.2002
Исправлено: 13.03.2005
Версия текста: 1.0.1

HTML Tree Control

HTML предоставляет очень широкие возможности по созданию пользовательского интерфейса. Эти возможности программисты используют постоянно как при создании сайтов, так и при написании прикладных программ на С++ и т.п. Однако среди всей этой красоты и простоты реализации есть одна неприятная ложка дегтя – в HTML напрочь отсутствует элемент управления Tree Control. Другие элементы либо присутствуют, либо легко могут быть реализованы стандартными средствами. С Tree Control дела обстоят намного хуже. Главная проблема – этот элемент динамический, т.е. должен реагировать на действия пользователя, показывать и скрывать узлы. Тут без скриптов не обойтись. А как только вы воспользуетесь скриптами, сразу остро встанет проблема совместимости браузеров. Например, некоторые (не будем показывать пальцем) довольно популярные браузеры вообще не поддерживают динамики - в момент, когда все данные с сервера переданы, делается статический снимок документа и дальнейшие изменения невозможны.

Вашему вниманию предлагается древовидное меню, которое используется на нашем сайте. Если вы посмотрите налево, то увидите его в работе :-) Данная реализация древовидного меню не претендует на звание идеала, однако, на мой взгляд, показывает достаточно неплохие результаты. HTML Tree Control так или иначе работает практически во всех современных браузерах, не бьет в грязь лицом даже при выключенных скриптах, достаточно устойчив к различным ухищрениям пользователя, поддерживает Shift-Click (открытие в новом окне), динамическую догрузку узлов, прост в установке и настройке.

Скрипт написан на ASP (Jscript) с использованием MSXML3.0 и клиентских скриптов на JavaScript. Сама структура дерева хранится в файле _private/tree.xml. Файл tree.xml строится из двух тегов:

<tree> - просто корневой тег - необходим для того чтобы XML-документ был правильным.

<node> - собственно теги узлов, могут быть бесконечно (теоретически :-) вложенными или не иметь потомков.

Атрибуты тега <node>:

captionЗаголовок узла, то, что отображается в дереве, всплывающей подсказке, заголовке страницы.
tipВсплывающая подсказка узла. Если не задан, во всплывающей подсказке отображается значение caption.
hrefГиперссылка, куда указывает узел
idУникальный идентификатор узла. При изменении файла tree.xml необходимо следить за сохранением уникальности всех идентификаторов
iconПервые символы имени иконки. Имя иконки определяется по следующему правилу:
  • Закрытая = icon + “c.gif”
  • Открытая = icon + “o.gif”
  • Без потомков = icon + “s.gif”
Иконки хранятся в каталоге toc/images
separateloadОпределяет будут ли потомки узла грузиться динамически или сразу.
  • separateload = 1 – потомки грузятся динамически
  • separateload = 0 или отсутствует – потомки грузятся сразу

За вывод меню отвечает страница toc/default.asp Она может принимать несколько параметров методом GET. Эти параметры также могут пригодиться при настройке:

selIDID узла, который должен быть выбран после загрузки
rootID корневого узла. Полученное дерево будет усечено от этого узла
nodeID узла для догрузки (используется для внутренних нужд во время динамической догрузки.
urlПосле загрузки будет выбран узел, ссылающийся на этот URL. Если таких узлов несколько, будет выбран первый из них.

Любой из материалов, опубликованных на этом сервере, не может быть воспроизведен в какой бы то ни было форме и какими бы то ни было средствами без письменного разрешения владельцев авторских прав.
    Сообщений 22    Оценка 330 [+3/-0]         Оценить