| # Advanced Treeview Tree Menu
[ Tree Home] [ Buy Now ] [ Documentation ] [ Examples & Demos ] [ Help & Support ]
## Advanced Treeview Tree Menu Demos and Examples
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»)
Click the nodes of the tree to show / hide the tables
Table 1
Table 2
Table 3
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»
« back to Demo Index « back to Getting Started
[ Tree Home] [ Buy Now ] [ Documentation ] [ Examples & Demos ] [ Help & Support ]
Getting Started Documentation Examples First Tree Menu Adding more Nodes Background Image Tree Menu and Frames Overriding Default Node Properties Interacting with JavaScript Dynamic Methods Dynamic Node Generation Greek Demo