CodeThatTree PRO Reference

Legend:

*

New properties and methods

^

Deprecated properties and methods

Note:
In STD version of CodeThatTree some properties and methods are not available.

Class CTree

Properties:

Object def

User definition for tree, its structure is

{

Object style

Tree-level style defines style for the item as well as for the tree. Item-related style settings defined at tree-level style are applied to each menu item and are inherited by submenus. Tree-related style settings are also inherited by submenus. Item-level style settings are applied only to certain item and aren't inherited by submenus.

Represents style properties for tree, its structure is

{

String css

CSS class for node that is closed folder or simple item

String cssopen*

CSS class for opened folder

String csscurr*

CSS class for current node

String color

color string for the text of node that is closed folder or simple item

String coloropen*

color string for the text of opened folder

String colorcurr*

color string for the text of current node

String bgimg

url of the background image of node that is closed folder or simple item

String bgimgopen*

url of the background image of opened folder

String bgimgcurr*

url of the background image of current node

String bgcolor

color string for the background of node that is closed folder or simple item

String bgcoloropen*

color string for the background of opened folder

String bgcolorcurr*

color string for the background of current node

Object shadow

{"color":string, "width":int} : shadow parameters. Size parameter settings are required.

Object border

{"color":string, "width":int} : border parameters

String imgitem

url of the image for a tree leaf

String imgitem_f

url of the image for a tree first leaf

String imgitem_l

url of the image for a tree/subtree last leaf

String imgdir

url of the image for a closed tree node

String imgdir_f

url of the image for a closed first tree node

String imgdir_l

url of the image for a closed last tree/subtree node

String imgdiropen

url of the image for an open tree node

String imgdiropen_f

url of the image for an first open tree node

String imgdiropen_l

url of the image for an last open tree/subtree node

String imgline

url of the image for a line

int z

z-index

Object itemoffset

{"x":int, "y":int} : offset for item positioning

Array size

[width:int, height:int ] : Item size (optional). Default item size is [100, 20],

int fixwidth

value of width of tree container, this property can be used only in this object def.style

int fixheight

value of height of tree container, this property can be used only in this object def.style

Boolean lined

Optional. This feature indicates is tree explorer-like tree. If lined is true itemoffset.y set with 0. Default value is false.

Boolean singlecol

Optional. This feature indicates that tree can have only one opened folder at one level. Default value is false.

Boolean overexpand

Optional. This feature indicates that opening of items will happened on mouse over event, the same as on click event. Default value is false

Boolean form

Form field containing item (optional). When set to true, no hover state is applied. Moreover, such an item cannot have any action. The only intention is to be able to hold form fields, such as select boxes, input boxes, buttons etc. Default is false.

Boolean wrap*

Optional. Text will wrap in items. By default is false.

}

Object styleover

Hovered item style. It is applied to item node mouse over it. Settings defined here just override default style settings, so they can be not specified twice. Not required. Reperesents styleover properties for tree nodes that additional styleover defined. These properties uses when mouse over the node. The structure of this object is

{

String css

CSS class (optional). Specifies the CSS class applied to a node when it is closed folder or simple node and mouse over it.

String cssopen*

CSS class (optional). Specifies the CSS class applied to a node when it is opened folder and mouse over it.

String csscurr*

CSS class (optional). Specifies the CSS class applied to a node when it is current node and mouse over it.

String color

Text color (optional). Can be specified using either RGB palette (#RRGGBB) or text value ("black", "white" etc.). Used when node is closed folder or simple item.

String coloropen*

Text color for opened folder when mouse over it.

String coloropen*

Text color for cuurent node when mouse over it.

String bgimg

Background image URL (optional) for closed folder or simple node

String bgimgopen*

Background image URL (optional) for opened folder

String bgimgcurr*

Background image URL (optional) for current node

String bgcolor

Background color (optional) for closed folder or simple node

String bgcoloropen*

Background color (optional) for opened folder

String bgcolorcurr*

Background color (optional) for current folder

}

Object position

Represents position of top-left corner of tree container, its structure is

{

Boolean absolute

flag is position absolute

Array pos

[x, y] : represents coordinates of top-left corner of tree container

}

String target

Global target for all links in tree, if no additional target defined for node

Array items

Array that represents nodes, each node represents as

{

String id

User defined node id, if don't defined its value is index in node array

String text

Any HTML formatted text

Object style

Represents style properties for node, structure is the same as Object style for tree

Object styleover

Represents style properties for node, structure is the same as Object styleover for tree

String onopen

Js code that executes when node opens

String onclose

Js code that executes when node closes

Object action

Represents action definition for node, its structure is

{

js

JS code uses as handler for onClick event

jsover

JS code uses as handler for onMouseOver event

jsout

JS code uses as handler for onMouseOut event

url

go to URL

target

link target

title

item hint

}

Object menu

Represents subnodes of current node

{

Object style

Represents style properties for menu nodes, structure is the same as Object style for tree.

Object styleover

Represents style properties for menu nodes, structure is the same as Object styleover for tree

Array items

Array that represents child nodes of current one, each node represents in the same way as described above

}

}

}

String id

id of tree, that uses to access tree in global array CodeThatTreeRoots

Boolean lined ^

flag is tree in Internet Explorer tree style

Array nodes

Array of nodes of tree

Array icons

Array of all images that used it tree

Boolean nomorestyle

flag that allows use only style that defined for whole tree

Boolean overexpand

flag that allows open node on mouseover event

Boolean singlecol

flag that allows open only one node on one level at one time

CStyle style

Object CStyle that represents style of tree

CStyle styleover

Object CStyle that represents over style of tree;

String styletree^

String that uses as style attribute of tree container

Boolean usedual

flag is dual layers used for old browsers

Boolean useiconlink

flag is icon actions is the same as link

Integer loadtype*

defined whether tree loads in run-time. When 0 - tree loads in run-time by user demand, it means that only first level load at once and all other levels when user opens correspondent folder. When 1 - tree loads complete.

Boolean savestate*

flag is cookies used to keep tree's state. By default is is true.

CNodeTree curr*

Object CTreeNode that keep reference to current tree node

CNodeTree over*

Object CTreeNode that keep reference to hovered node

Constructor:

CTree(Object TreeDef, String id)

Defines CTree object with the specified id and definition TreeDef

Example

var tree = new CTree(TreeDef, "tree");

Methods:

addNode(id, isChild, def) *

adds node in tree. String id is optional, if id sets node will define by id, if not then current node will used for determine where node will added in tree. Boolean isChild defines whether node will "child" (true) or "neighbour" (false). Object def defines node properties and has the same structure as in tree defintion.

collapseAll()

collapses all open nodes in tree

collapseItemById (_id)

collapses node with used defined id equals _id

collapseItemByText (text)

collapses node with text equals text

create()

creates CTree object

deleteNode(id) *

deletes node from tree. String id is optional, if id sets node will define by id, if notthen current node will used.

draw()

corrects relative position in old browsers

expandAll()

expands all nodes

expandItemById(_id)

expands node with used defined id equals _id

expandItemByText (text)

expands node with text equals text

getNode (id)

gets element from nodes array by user defined id

getNodeById (id)

gets HTML container DIV of node by user defined id

getNodeIdx (id)

gets index in nodes array of node by user defined id

getRoot ()

gets array of root elements of tree

getState(id) *

returns Boolean whether node with user defined id is visible

initFolder (node_id) *

inits folder in run-time by user defined id, as you know this property of item is optional and when user doesn't define id but wants to load tree in run-time node's id is generated automatically

initNode (nodeParent, nodeDef, nodeStyle, nodeStyleOver)

inits node

nodeParent - parent node for current one

nodeDef - definition of node (def.items || def.[items[x].menu]+.items)

nodeStyle - Object CStyle that inherit all properties of all parent objects of this node

nodeStyleOver - Object CStyle that inherit all properties of all parent objects of this node

paint ()

paints tree in browser

paintOldB () *

paints tree in old browser

ref () *

returns String - refernce to this tree in global CodeThatTreeRoots array

setCurr(n) *

sets CNodeTree Object n as current node in tree

toHTML ()

returns String - html representation of tree for new browsers

toHTMLOldB()

returns String - html representation of tree for old browsers

Class CNodeTree

Properties:

String _id

user definied id, if don't defined equals id

Object action

Represents action definition for node, its structure is

{

js

JS code uses as handler for onClick event

js2

JS code uses as handler for onDblClick event

jsover

JS code uses as handler for onMouseOver event

jsout

JS code uses as handler for onMouseOut event

url

go to URL

target

link target

title

item hint

}

int id

index in tree nodes array

String imgClose ^

url to image for closed node (if node is not folder equals imgitem)

String imgOpen ^

url to image for open node (if node is not folder equals imgitem)

Boolean isFirst

flag is this node first in menu

Boolean isLast

flag is this node last in menu

String onclose

js code that executes when node closes

String onopen

js code that executes when node opens

CNodeTree parent

node - owner of this node, null if this node is root node

int state

state of node, 0 - closed, 1 - opened

CStyle style

style of this node with all inherited properties from its parents

CStyle styleover ^

styleover of this node with all inherited properties from its parents

String text

any HTML formatted text

CTree tree

tree -owner of this node

int type

type of node 0 - node, 1 - folder

String level

HTML representation of level offset for tree

int levelid

depth level of node in tree

Constructor:

CNodeTree(id, parent, type, state, text, _id, onopen, onclose, action, tree, isf, isl, style, styleover)

creates new object CNodeTree with setted id - index in tree.nodes array, parent - node parent of this one, type, state - parameter getted from cookie, text, user defined _id, onopen, onclose actions, isf - is node first, isl - is node last, action, owner tree and style, styleover CStyle objects, that represents style for this node

Methods:

actionOf (isIcon)

Returns String href="" onMouseOver="" onMouseOut="" that uses inside tag A for set action for node isIcon flag that shows is this action will uses for icon or for text of node

countChildren (v)

Returns count of children of node, if v is true only visible children will be count

itemToHTML(isOver) *

Returns HTML representation of node in normal (Boolean isOver = false) or hovered (isOver = true) state

getChildren ()

Returns array of children nodes of node

getIcon () *

Returns src parameter for icon of node, in current version allowed used different icons when mouse over node and when mouse out from node

getID (p)

Return String ID for HTML container of node = p + this.tree.id + "_" + this.id, where p is prefix parameter

getNodeHeight ()

Returns integer height value of node

heightChildren (v)

Returns integer height value of node's children, if v is true only visible children will be count

paint(isOver) *

Paints node as normal one (isOver = false) or as hovered (isOver = true)

paintChildren() *

Paints only child nodes of these one

setState (state, v)

Sets state of node for all browser, v - flag is uses only visibile nodes

setState_ (state) ^

Sets state of node for new browser

setStateOldB (state, v) ^

Sets state or old browser, v - flag is uses only visibile nodes

setVisibility (value, pos)

Sets node visibility, where value is value of visibility proprety, pos is position of node

showFolder() *

Shows or hides folder in depend on its state (node.state property checks) and save its state in cookies if tree.savestate is true. Only for new browsers.

showFolderOldB() *

Shows or hides folder in depend on its state (node.state property checks) and save its state in cookies if tree.savestate is true. Only for old browsers.

toHTML (level) ^

Returns HTML representation of node with its children for new browser, level is recursive parameter

toHTML (childonly) *

Returns HTML representation of node with its children for new browser (childonly=false) or HTML representation of node's children only (childonly=true)

toHTMLOldB (level,pos,visible)

Returns HTML representation of node with its children for old browser, level and pos is recursive parameter, isVisible is flag

Class CStyle

Properties:

bgcolor

background color

bgcolorcurr *

background color of current node

bgcoloropen *

background color of opened folder

bgimg

url to background image

bgimgcurr *

url to background image of current node

bgimgopen *

url to background image of opened folder

border

{width: int, color: string} border

color

color

colorcurr

color of current node

coloropen

color of opened node

css

css style

csscurr

css style of current node

cssopen

css style of opened node

dontcollapseactionfolders ^

flag is folder can be collapsed

dontexpandactionfolders ^

flag is folder can be expanded

form

flag is node simple text without action

imgdir

url to close dir image

imgdir_f

url to close dir image when this node is first

imgdir_l

url to close dir image when this node is last

imgdiropen

url to open dir image

imgdiropen_f

url to open dir image when this node is first

imgdiropen_l

url to open dir image when this node is last

imgitem

url to item image

imgitem_f

url to item image when node is first

imgitem_l

url to item image when node is last

imgline

url to line image

init

Boolean defines whether CStyle Objects inits yet

itemoffset

{"x":int, "y":int} : offset for item positioning

lined

flag is tree in explorer style

overexpand

flag is folder will open on mouse over event

shadow

{width: int, color: string} shadow

size

[width, height] size of node

source*

Object source for this CStyle Object

tree *

CTree Object where this CStyle Object used

wrap*

flag is text will wrapped

z

z - index

Note. In this version all style parameters from style and styleover Object keep in one CStyle Object. In this case all properties from styleover Object keep with prefix 'over_' before name. It is mean that source is reference to style Object, over_source to styleover Object, color is normal color, over_color is color when mouse over node and etc.

Constructor:

CStyle(s)

Creates new CStyle object from Object s with proerties 'css', 'color', 'bgcolor', 'bgimg', 'border', 'shadow','z', 'size', 'itemoffset', 'imgitem', 'imgitem_f', 'imgitem_l', 'imgdir', 'imgdir_f', 'imgdir_l', 'imgdiropen', 'imgdiropen_f', 'imgdiropen_l','imgline', 'form', 'lined', 'overexpand', 'dontexpandactionfolders', 'dontcollapseactionfolders'

Methods:

add (s) ^

Adds parameters from object s to current style

add (s, isOver) *

Adds parameters from object s to current style, if isOver is true parameters add with prefix 'over_', so as parameters of style for hovered state

copy() *

Returns copy of CStyle Object

get (name, isOver) *

Returns this.name if isOver=false or this.over_name if isOver=true

getBg () ^

Gets string represenatation of background parameters

getBorder () ^

Gets string represenatation of border parameters

getCss () ^

Gets css class name

getH(name, attr, isOver) *

Returns HTML attribute string as attr = "this.name" if isOver=false or attr ="this.over_name" if isOver=true

getOffset () ^

Gets Array [x,y] for offset

getOver (so) ^

Gets string represenatation of style for mouse over event

getS(name, attr, isOver) *

Returns CSSattribute string as attr:this.name; if isOver=false or attr:this.over_name; if isOver=true

getShadow () ^

Returns Array [width, color]

getSize () ^

Returns string represenatation of size in style sense : width:...;height:...;

getSizeTable () ^

Returns string represenatation of size in table sence: width=... height=...

getText () ^

Gets string represenatation of text parameters

setImg () ^

Defined all img* properties of CStyle

setDefault() *

Sets all default and doesn't defined by usr values, such as offset, size, wrap and etc.

Additional functionality of array

indexOf(element)

Returns index of element in array, and -1 in case if no such element in array

Global variables

Array CodeThatTreeRoots

Array contains references to all CodeThatTreeObjects that used at page

CTreeObject CT_Tree

Current used tree Object

Read more about CodeThatTree >>

© CodeThat.com, 2003-2010
Design by XTLabs, Inc
Sponsored by Rocket Division Software, LTD.