Дерево на HTML

Зміст

• Загальний опис

Опис реалізації TreeView на HTML

Список, який повинен ідентифікуватися як дерево повинен мати відповідний клас:

. Після завантаження сторінки провадиться пошук усіх таких списків та ініціалізація за їхньою структурою дерев. Виконується це функцією OnInitTreeViews() , яка запускається відразу після завантаження сторінки: . Під час ініціалізації всім елементам дерева - елементам додається обробник події клацання миші - функція OnTreeViewNodeClick(event) , яка відповідає за показ і приховування вмісту кожного вузла дерева. У двох словах про особливості реалізації цього варіанта дерева на HTML все, а деталі ви знайдете у вихідному коді цієї сторінки.

Стандартний заголовок xhtml документа

Тут нічого особливого нема. Перед вами заголовок звичайної xhtml сторінки.

Розмітка дерева

Дерево – це список ul. Кожен вузол дерева - це елемент списку li, який може містити піддерево - вкладений список ul, або блок div для розміщення в ньому додаткової інформації, як це зроблено в поточному розділі.

Стиль дерева - кореневого списку ul

Стиль вузла дерева

Стиль піддерева - некореневого списку ul

Стиль контейнера

Значення зовнішнього відступу (margin) вибирається автоматично браузером, що зроблено для розміщення контейнера по центру вікна.

Стиль контейнера

Ширина блоку фіксована, тому на випадок, якщо текст, що не форматується, наприклад, вихідний код розмітки не влізе по ширині, автоматично з'явиться прокручування завдяки властивості overflow : auto.

Стиль контейнера

Стиль призначений для заголовка третього рівня, якийє безпосереднім дочірнім елементом, а не просто нащадком блоку div. Тому в селекторі використовується символ '>'. Для припасування контуру заголовка під контур блоку div зовнішнє зсув (margin) має негативні значення, рівні величині внутрішнього відступу (padding) блоку div.

Функції OnInitTreeViews() та OnInitTreeView(treeview)

Функція OnTreeViewNodeClick(event)

AddEventHandler(target, event, handler)

Фукція stopBubble(event)

Якщо один елемент вкладений в інший, як це має місце з елементами дерева, обробка події відбувається знизу вгорі. Спочатку обробник викликається для елемента, з яким подія відбулася безпосередньо, і, якщо в ході обробки "спливання" події заборонено не було, обробник буде викликаний для його безпосереднього батька і так далі. У випадку з деревом "сплив" події необхідно забороняти, інакше обробник буде викликаний для всіх вузлів від того, по якому клацнули і до самого кореня. Дерево загалом поводитиметься при цьому неадекватно, оскільки його гілки неодноразово згортатимуться і розвертатимуться.

---