Графическое дерево JavaScript с Layout - Справка по программному интерфейсу (API)

Written on . Posted in HTML, CSS, JavaScript

ОГЛАВЛЕНИЕ

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

 

 

Справка по программному интерфейсу (API)

Конфигурация ECOTree

А вот параметры конфигурации с их стандартными значениями:

this.config = {
    iMaxDepth : 100,
    iLevelSeparation : 40,
    iSiblingSeparation : 40,
    iSubtreeSeparation : 80,
    iRootOrientation : ECOTree.RO_TOP,
    iNodeJustification : ECOTree.NJ_TOP,
    topXAdjustment : 0,
    topYAdjustment : 0,
    render : "AUTO",
    linkType : "M",
    linkColor : "blue",
    nodeColor : "#CCCCFF",
    nodeFill : ECOTree.NF_GRADIENT,
    nodeBorderColor : "blue",
    nodeSelColor : "#FFFFCC",
    levelColors : ["#5555FF","#8888FF","#AAAAFF","#CCCCFF"],
    levelBorderColors : ["#5555FF","#8888FF","#AAAAFF","#CCCCFF"],
    colorStyle : ECOTree.CS_NODE,
    useTarget : true,
    searchMode : ECOTree.SM_DSC,
    selectMode : ECOTree.SL_MULTIPLE,
    defaultNodeWidth : 80,
    defaultNodeHeight : 40,
    defaultTarget : 'Javascript:void(0);',
    expandedImage : './img/less.gif',
    collapsedImage : './img/plus.gif',
    transImage : './img/trans.gif'
}
  • iMaxDepth: максимальное число уровней, разрешенное для дерева. Установите данное свойство на одно значение выше, чем необходимое число уровней.
  • iLevelSeparation: расстояние между уровнями в пикселях. Заметьте, что размер уровня будет задан посредством максимального размера узла на данном уровне.
  • iSiblingSeparation: минимальное расстояние в пикселях между узлами одного уровня.
  • iSubtreeSeparation: минимальное расстояние в пикселях между соседними узлами (которые не имеют общего родителя).
  • iRootOrientation: направление разметки. Возможными значениями могут быть:
    • ECOTree.RO_TOP: сверху вниз.
    • ECOTree.RO_BOTTOM: снизу вверх.
    • ECOTree.RO_RIGHT: справа налево.
    • ECOTree.RO_LEFT: слева направо.
  • iNodeJustification: выравнивание узлов, которые принадлежат одному уровню. Возможными значениями могут быть:
    • ECOTree.NJ_TOP: выравнивание по верхнему краю.
    • ECOTree.NJ_CENTER: выравнивание по центру.
    • ECOTree.NJ_BOTTOM: выравнивание по низу.
  • topXAdjustment: горизонтальный отступ в пикселях, который задан для корневого узла. Используйте его для центрирования/смещения дерева на экране.
  • topYAdjustment: вертикальный отступ в пикселях, который задан для корневого узла. Используйте его для центрирования/смещения дерева на экране.
  • render: тип обработки. Возможными значениями могут быть:
    • "AUTO": автоматическая - это стандартное значение. Код автоматически определит, если используется обозреватель Internet Explorer 6+ или Firefox, а тип обработки будет установлен соответственно в "VML""CANVAS". или
    • "VML": Vector Markup Language - векторный язык разметки только для Internet Explorer. Если вы будете использовать его, то помните, что необходимо добавить пространство имен XML namespace и <style> в область head , как указано в статье.
    • "CANVAS": обработка будет основана на HTML-элементе <canvas>. Возможна только для Firefox 1.5+. (Firefox 2.0 все же быстрее).
  • linkType: стиль ссылок узлов. Возможными значениями могут быть:
    • "M": Манхэтен. Классический стиль - ссылки отображены прямыми линиями.
    • "B": Безье. Ссылки представлены кривыми Безье. Иногда, такой стиль более пригоден.
  • linkColor: цвет, используемый для строк ссылок. Подходит любой цвет, который может быть выражен в HTML.
  • nodeColor: цвет, используемый для узлов. Подходит любой цвет, который может быть выражен в HTML.
  • nodeFill: стиль заполнения узлов. Возможными значениями могут быть:
    • ECOTree.NF_GRADIENT: узлы будут заполнены градиентом от цвета узла до светло серого ("whitesmoke" - F5,F5,F5\245,245,245).
    • ECOTree.NF_FLAT: узлы будут иметь монолитное заполнение.
  • nodeBorderColor: цвет используется для границ узлов. Подходит любой цвет, который может быть выражен в HTML.
  • nodeSelColor: цвет используется для выбранных узлов. Подходит любой цвет, который может быть выражен в HTML.
  • levelColors: массив в Javascript с цветами для последующих уровней. Применяется в случае, если опция colorStyle установлена на использование цветов уровней. Узлы на первом уровне дерева будут иметь первый цвет из данного массива, на втором уровне - второй, и т.д. Если уровней будет больше, чем элементов в массиве, то последующие уровни будут заново повторять цвета по кругу. Подходит любой цвет, который может быть выражен в HTM.
  • levelBorderColors: тоже самое, что и предыдущее, но для цвета границ.
  • colorStyle: указывает то, как высчитываются цвета узлов. Возможными значениями могут быть:
    • ECOTree.CS_NODE: каждый узел будет использовать свой цвет для обработки.
    • ECOTree.CS_LEVEL: узлы будут иметь различные цвета, в зависимости от уровня узла в дереве, игнорируя свои цвета.
  • useTarget: будут ли узлы представлять собой ссылки или нет. Возможными значениями могут быть true или false
  • searchMode: выражает то, как будет выполнен поиск (смотрите API относительно searchNodes). Возможными значениями могут быть:
    • ECOTree.SM_DSC: поиск будет выполнен в пределах заголовков узлов.
    • ECOTree.SM_META: поиск будет выполнен в пределах метаданных узлов.
    • ECOTree.SM_BOTH: поиск будет выполнен в пределах обоих значений.
  • selectMode: указывает поведение выборки в дереве. Возможными значениями могут быть:
    • ECOTree.SL_MULTIPLE: пользователь может интерактивно выбирать и отменять выбор множества узлов щелкая по ним.
    • ECOTree.SL_SINGLE: пользователь может интерактивно выбирать и отменять выбор однога узла щелкая по нему. Выбор нового узла отменит выбор предыдущего.
    • ECOTree.SL_NONE: пользователь не может выбирать узлы щелкая по ним. В любом случае методы API, которые вызывают выборку узлов, будут всегда работать, так же как и поиск в дереве.
  • defaultNodeWidth: ширина узла в пикселях, если другое явное значение не указано при добавлении узла к дереву.
  • defaultNodeHeight: высота узла в пикселях, если другое явное значение не указано при добавлении узла к дереву.
  • defaultTarget: гиперссылка узла (при нажатии на заголовок), если не была указана явная ссылка при добавлении узла к дереву. Обычно устанавливается тогда, когда все или большинство узлов имеют одну и ту же ссылку.
  • expandedImage: иконка знака "минус", которая позволяет собрать поддерево. Вы можете изменить ее по желанию или же указать на другой каталог с желаемым изображением.
  • collapsedImage: иконка знака "плюс", которая позволяет развернуть собранное поддерево. Вы можете изменить ее по желанию или же указать на другой каталог с желаемым изображением.
  • transImage: прозрачная иконка, используемая для разделения иконок для сбора/расширения и заголовка. Вы можете изменить ее по желанию или же указать на другой каталог с желаемым изображением.

 

html форум