Treeview

The JavaScript tree menu
Dynamic HTML (IE & NN)
     Awarded:


There are many possible ways of displaying and using the links in the tree, and they are all configurable by you. The four main folders in this demo try to show the more relevant variations for a frame-based layout (for more info see online instructions.)

Photos Example organizes photos and maps. You can put any other type of document in the tree: html, asp, movies, sounds, etc. You can even fill the outliner with data from a database or list the files and directories of a computer drive.

Types of folders illustrates the two roles the folder plays in the Treeview script: it is used to contain others entries, but it may also be itself a link. Folders with entries inside show the +/- icon, which is used to expand it or collapse it. Clicking on the folder icon also expands its contents. For those "linked" folders, clicking on the folder icon not only expands it but also loads a page. "Europe" and "United States" in the "Photos example" are linked folders that, when clicked, load maps of the continents.

Targets shows the different places where the linked page may be loaded: right frame, blank window, top frame (removes frameset), and the self frame. Additionaly, instead of an http link, you may have a node in the tree that calls a JavaScript function (a javascript: link.)

The fourth folder has an icon that was customized, and so was the icon of the document inside of it. Your tree may use a custom icon uniformly (all folders with same icon, for example) or apply different icons on a node-by-node basis.

The last folder exemplifies ways of changing the default format used for the entries' text. The default font, size, etc. in the left frame are specified by CSS for the generic TD and A. For the "Formats" folder, the colors were specified by embedding HTML tags within the Title argument of the gLnk function itself. For the "CSS Class" link, the the name was enclosed in a <DIV> tag that points to a predefined style sheet class.


These combinations are just examples of what can be done with Treeview. Check the documentation and see how to set-up the tree for your particular site-navigation needs.

   How to install the applet in your web site