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 | Первые символы имени иконки. Имя иконки определяется по следующему правилу:
|
separateload | Определяет будут ли потомки узла грузиться динамически или сразу.
|
За вывод меню отвечает страница toc/default.asp Она может принимать несколько параметров методом GET. Эти параметры также могут пригодиться при настройке:
selID | ID узла, который должен быть выбран после загрузки |
root | ID корневого узла. Полученное дерево будет усечено от этого узла |
node | ID узла для догрузки (используется для внутренних нужд во время динамической догрузки. |
url | После загрузки будет выбран узел, ссылающийся на этот URL. Если таких узлов несколько, будет выбран первый из них. |