How other pages can manipulate the tree
The menu in the bottom-left corner shows four common options that manipulate the tree programmatically. Download the Treeview ZIP to get access to these functions and to all the code in this demo. The last two buttons in the menu activate nodes in the tree. With these functions it is possible to keep the tree in synch with what is happening in the right frame, by opening folders and selecting documents without any actual mouse click on them. Links and buttons to trigger these operations are more commonly found in the right frame than really in a menu.
Imagine for example a tree of photos. You may want to let the user load a photo by clicking on the tree or by clicking on a "Next" link in the right frame, under the photo. This "Next" link should not only load the next photo in sequence like in a slideshow, but should also select the correspondent node in the tree. You can accomplish this by putting in the HREF of the "Next" link something similar to what is found in the onClick parameter of the "Load Map of Europe" button in this demo.
Note that the "Load Map of Europe" button not only selects the node and loads the image, but it also scrolls down the tree frame. To see the scroll function working, we are going to do a couple of steps that are only really needed in this example because of the small dimensions of this tree. (You may want to first read through the whole next paragraph one time, and, later, to return to this page, press "Flags and maps".)
Start by making the browser window really small such that, above the menu, you can only see the root folder and maybe the Flags folder; now press "Open All"; now press "Load Map of Europe". See how the tree scrolled down to show the Europe node?
How a node can execute a function
Instead of actual pages, images, etc., the folders and "documents" in the tree can be made to call JavaScript functions. Three of such links can be found inside the "javascript: links" folder. To learn more about exactly what is the definition of these functions and how they are called by the tree nodes, see the comments in the code of these pages.
One simple case where a node needs to call a function is when the window for the new page should not have menu bar, status bar, etc. In this demo we created a generic function that takes the URL of the page to load as an argument, we and are using it with the "Window w/o bars" link.
The other two links, including the final folder, simply call the built-in function "alert". They show how you can pass strings to functions and how it is possible for these strings to have the characters " and ' (which are reserved in JavaScript.)