Графическое дерево JavaScript с Layout

ОГЛАВЛЕНИЕ

Компонента Tree (Дерево) в JavaScript, которая реализует алгоритм разметки J.Q.Walker II .

Рисунок 1. Пример с конкретными цветами, обработанными при помощи VML в Internet Explorer.

Рисунок 2. Пример с конкретными цветами, обработанными при помощи холста (canvas) в Firefox.

Рисунок 3. Пример, демонстрирующий свернутые и выбранные узлы, обработанные посредством VML в Internet Explorer.

Введение

Данная статья представляет компоненту в JavaScript, которая обрабатывает дерево используя VML (Vector Markup Language) в обозревателе Internet Explorer 6+ или элемент <canvas> в Firefox 1.5+.

Существует множество доступных элементов дерева в JavaScript, и большинство из них имеют лучшую совместимость среди обозревателей, работают быстрее и более оптимизированы. Целью данного кода является предоставление реализации клиентской стороны алгоритма разметки Walker, не имея при этом оптимизаций кода. Вкратце, пример - лучше, чем просто абстрактный алгоритм.

Одним из классических компонент представлений дерева JavaScript является дерево Geir Landr: невероятно и просто. Также есть компоненты горизонтальных деревьев навигации JavaScript, основанных на DTree, которые используют HTML-таблицы для обработки дерева в горизонтальном направлении. Множество функций примера данной статьи копируют те, что представлены в таких компонентах.

 

Читайте также:
  • Введение в объектно-ориентированный JavaScript
    •    Скачать примеры - 7.04 Кб Оглавление Введение Предпосылки Основные понятия Простой класс на JavaScript Определение класса Создание свойств класса Создание методов класса Инкапсуляция Открытые, защищенные и закрытые члены Инкапсуляция на практике Вывод по инкапсуляции ...
  • Создание средства просмотра XML с помощью JScript – создание мощных скриптов в Exsead XML
    •    Скачать исходники - 19.01 KB Введение В данной статье на основе Exsead создается парсер JScript DOM и GUI просмотра XML. Краткая информация о Exsead Etc. Основные принципы устройства Exsead изложены здесь. Чтобы данная статья принесла максимум пользы, следует прочитать статью об использов...
  • Расширение встроенных объектов JavaScript при помощи прототипов
    ВведениеМожно использовать свойство prototype (прототип) некоторых встроенных объектов JavaScript для расширения их функциональности. Новые экземпляры конкретного класса объектов наследуют поведение, заданное классу. Если вы знаете C++, рассматривайте расширенные объекты как производные классы с...
  • JavaScript для новичков
    Вложения и включенияДавайте сначала рассмотрим простой пример:<html><head><title>This is a JavaScript example</title><script language="JavaScript"><!--document.write("Здравствуй мир!");//--></script></head><body> Привет! </...
  • Примеры JavaScript
    Как узнать ширину и высоту клиентской (рабочей) области окна браузера? <script type="text/javascript">//IE5+, Mozilla 1.0+, Opera 7+function getClientWidth(){  return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientWidth:document...