Advanced Treeview Tree Menu

In addition to a node executing a link upon a mouse click it is also possible to make a node execute a JavaScript function.

This is done by setting the Target property of the node specification to a value of "javascript" and then entering the function to be executed in the URL property of the node.

It is also vital that "mayscript" is present within the <applet> tag.

The tree nodes in this demo have been set to execute a little JavaScript function which hides or shows a table. Click on the nodes in the tree to see the effect.

View the node data here »

(if you do not see the tree above
click here»)

Here is the code of the JavaScript function used in the above demo:-

<SCRIPT LANGUAGE="JavaScript">

var table='c1';
function combo(table) {

if (table=='c1') {
if (document.all.c1.style.visibility=="hidden") {
document.all.c1.style.visibility="visible";
}
else {document.all.c1.style.visibility="hidden";}
}

if (table=='c2') {
if (document.all.c2.style.visibility=="hidden") {
document.all.c2.style.visibility="visible";
}
else {document.all.c2.style.visibility="hidden";}
}

if (table=='c3') {
if (document.all.c3.style.visibility=="hidden") {
document.all.c3.style.visibility="visible";
}
else {document.all.c3.style.visibility="hidden";}
}

}

</SCRIPT>

The colors, fonts and various other properties of the tree are set via HTML Param tags. Here is the HTML code for the above tree:-

<applet code="TreeApplet" width="220" height="200" archive="Treemenu.jar" mayscript>

<!-- Tree Properties -->
<param name="backgroundColor" value="#FFEECC">
<param name="borderWidth" value="1">
<param name="borderColor" value="#CCBB88">
<param name="underlineLinks" value="false">
<param name="scrollBarBgColor" value="#FFAA00">
<param name="statusBar" value="false">
<param name="connectingLines" value="true">
<param name="connectingLinesColor" value="#887744">
<param name="connectingLinesStyle" value="2">
<param name="highTextColor" value="#FFFFFF">
<param name="highBgColor" value="#0000FF">
<param name="nodeOffset" value="25">
<param name="nodegap" value="0">

<!-- Default Node Settings -->
<param name="defaultTarget" value="_top">
<param name="defaultFont" value="Arial,N,10">
<param name="defaultColor" value="#000000">
<param name="defaultExpanded" value="false">
<param name="defaultNormalImage" value="closedfolder">
<param name="defaultExpandedImage" value="openfolder">
<param name="defaultMouseImage" value="point">

<!-- Images -->
<param name="image1" value="closedfolder|./iconimages/closedfolder.gif">
<param name="image2" value="openfolder|./iconimages/openfolder.gif">
<param name="image3" value="document|./iconimages/document.gif">
<param name="image4" value="point|./iconimages/point.gif">

<!-- Node File -->
<param name="Nodedata" value="javascriptnodes.txt">

</applet>

In the next demo we show how to use the Tree Menus Dynamic Methods - next demo»