xTree Usage (WebFX)
table {
width: 500px;
}
td {
vertical-align: top;
}
var articleMenu= new WebFXMenu;
articleMenu.left = 384;
articleMenu.top = 86;
articleMenu.width = 140;
articleMenu.add(new WebFXMenuItem("History & Introduction", "index.html"));
articleMenu.add(new WebFXMenuItem("Usage", "usage.html"));
articleMenu.add(new WebFXMenuItem("API", "api.html"));
articleMenu.add(new WebFXMenuItem("Implementation", "implementation.html"));
articleMenu.add(new WebFXMenuItem("Demo", "javascript:window.open('demo.html','demo','scrollbars=yes,status=no,width=500,height=400,resizable=yes'); void(0);"));
articleMenu.add(new WebFXMenuSeparator);
articleMenu.add(new WebFXMenuItem("Download", "http://webfx.eae.net/download/xtree117.zip"));
webfxMenuBar.add(new WebFXMenuButton("Article Menu", null, null, articleMenu));
webfxLayout.writeTitle("xTree Usage");
webfxLayout.writeMenu();
webfxLayout.writeDesignedByEdger();
This tree widget is based on objects and all html code is generated from a js structure. To create a tree
you won't have to write a single line of html however you will have to learn how to to create the tree and
treeItem objects.
Usage
The tree(s) needs to be create during the initial load phase of the page. This is accomplished by creating a
WebFXTree object and then add WebFXTreeItems to it. Once all items has been added
document.write is used to generate the html code and insert it into the page.
var tree = new WebFXTree('Root');
tree.add(new WebFXTreeItem('Tree Item 1'));
tree.add(new WebFXTreeItem('Tree Item 2'));
tree.add(new WebFXTreeItem('Tree Item 3'));
document.write(tree);
Folders
A folder is created by adding a new tree item to a already created tree item. However since we need to keep
a reference to this tree item object (so that we can add tree items to it, and make it a folder) we cannot
create the new object inside the add method. So instead we first create the new tree item object and then
we add it to the tree.
var tree = new WebFXTree('Root');
/* Add tree item to tree */
tree.add(new WebFXTreeItem('1'));
/* Create a new folder and add it to tree */
var folder = new WebFXTreeItem('2')
tree.add(folder);
/* Add tree items to folder */
folder.add(new WebFXTreeItem('2.1'));
folder.add(new WebFXTreeItem('2.2'));
folder.add(new WebFXTreeItem('2.3'));
/* Add another tree item to tree */
tree.add(new WebFXTreeItem('3'));
document.write(tree);
Explorer behavior
Since I first published this tree control I've been getting a lot of requesters about making it contain
only folders. So I added a setBehavior method to it. The example below is an exact copy of the one above,
with the one exception that this uses tree.setBehavior('explorer');
var tree = new WebFXTree('Root');
/* Change the behavior of the tree */
tree.setBehavior('explorer');
/* Add tree item to tree */
tree.add(new WebFXTreeItem('1'));
/* Create a new folder and add it to tree */
var folder = new WebFXTreeItem('2')
tree.add(folder);
/* Add tree items to folder */
folder.add(new WebFXTreeItem('2.1'));
folder.add(new WebFXTreeItem('2.2'));
folder.add(new WebFXTreeItem('2.3'));
/* Add another tree item to tree */
tree.add(new WebFXTreeItem('3'));
document.write(tree);
Custom Icons
Some times you might want to combine the two styles, or make some of the folders/items have a different
icon than the default. To achieve that set the object.icon property to an uri, or to a javascript
variable containing one. To change the open icons for folders use object.openIcon.
var tree = new WebFXTree('Root');
tree.setBehavior('explorer');
tree.icon = 'http://webfx.eae.net/images/notepad.gif';
tree.add(new WebFXTreeItem('1'));
var folder = new WebFXTreeItem('2')
tree.add(folder);
var t21 = new WebFXTreeItem('2.1');
/* Change the icon */
t21.icon = webFXTreeConfig.fileIcon;
folder.add(t21);
var t22 = new WebFXTreeItem('2.2');
/* Change the icon */
t22.icon = webFXTreeConfig.fileIcon;
folder.add(t22);
var t23 = new WebFXTreeItem('2.3');
/* Change the icon */
t23.icon = webFXTreeConfig.fileIcon;
folder.add(t23);
tree.add(new WebFXTreeItem('3'));
document.write(tree);
History & Introduction
Usage
API
Implementation
Demo
Download
