Графическое дерево JavaScript с Layout - Краткое руководство по установке

Written on . Posted in HTML, CSS, JavaScript

ОГЛАВЛЕНИЕ

Страница 4 из 7

 

 

Использование кода

Краткое руководство по установке

А теперь давайте создадим пример (все примеры доступны для загрузки) для того, чтобы понять способ рисования простого дерева. После этого, имея справку по программному интерфейсу и изучив код усовершенствованных примеров, вы можете полностью понять, как именно использовать данную компоненту.

Во-первых, вы должны включить скрипт компоненты и связать таблицу стилей в секции <head> вашей HTML-страницы (не забудьте установить пути перед установкой):

<head>
    <!-- Место для содержимого... -->
    <script type="text/javascript" src="/ECOTree.js"></script>
    <link type="text/css" rel="style-sheet" href="/ECOTree.css" />
    <!-- Место для содержимого... -->
</head>

Кроме этого, если вы используете обозреватель Internet Explorer, то вам необходимо добавить следующие строки в секцию <head> вашей HTML-страницы для правильной обработки VML:

<head>
    <!-- Место для содержимого... -->
    <xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
    <style>v\:*{ behavior:url(#default#VML);}</style>         
    <!-- Место для содержимого... -->
</head>

В вашей HTML-странице вы должны расположить блочный контейнер для дерева, как <div> с идентификатором (ID), который вы должны предоставить конструктору дерева. Поэтому вам стоит включить блок <script> для создания самого дерева, добавить другие узлы - наверняка из базы данных реальных проектов - а затем нарисовать дерево. Давайте изучим пример:

<div id="myTreeContainer"></div>
var myTree = new ECOTree("myTree","myTreeContainer");
myTree.add(0,-1,"Apex Node");
myTree.add(1,0,"Left Child");
myTree.add(2,0,"Right Child");
myTree.UpdateTree();

А вот результат :

Рисунок 5. Простой пример 1.

Вы должны обеспечить то, что блок кода будет выполнен как только страница будет загружена, или хотя бы тогда, когда будет загружен контейнер. Поэтому вы можете решить внести скрипт сразу после контейнера или создать дерево в пределах функции, которая будет вызвана при выполнении события OnLoad для документа или тела.

Учтите, что компонента имеет стандартные значения практически для всего, тем самым те пять строк кода могут создать дерево, которое может быть собрано и расширено, и вы можете выбрать/отменить выбор узлов просто щелкнув по ним. Также, каждый узел по стандарту имеет гиперссылку Javascript:void(0);. Практически каждый раз вам будет необходимо изменить вид и поведение дерева для того, чтобы вам было удобнее им пользоваться. Это может быть выполнено при помощи экземпляра config дерева. Давайте модифицируем предыдущий пример путем добавления нескольких строк:

var myTree = new ECOTree("myTree","myTreeContainer");    
myTree.config.linkType = 'B';
myTree.config.iRootOrientation = ECOTree.RO_BOTTOM;                        
myTree.config.topYAdjustment = -160;
myTree.config.linkColor = "black";
myTree.config.nodeColor = "#FFAAAA";
myTree.config.nodeBorderColor = "black";
myTree.config.useTarget = false;
myTree.config.selectMode = ECOTree.SL_SINGLE;
myTree.add(0,-1,"Apex Node");
myTree.add(1,0,"Left Child");
myTree.add(2,0,"Right Child");
myTree.UpdateTree();

С такиими незначительными изменениями дерево будет выглядеть следующим образом:

Рисунок 6. Простой пример 2.

На этот раз узлы не обладают гиперссылками (useTarget = false) и вы можете выбрать за один раз только по одному узлу (selectMode = ECOTree.SL_SINGLE).

Теперь, когда основы были изучены, мы можем изучить все возможности.

 

html форум