139 lines
5.3 KiB
HTML
Executable File
139 lines
5.3 KiB
HTML
Executable File
<!--
|
|
(Please keep all copyright notices.)
|
|
This frameset document includes the Treeview script.
|
|
Script found at: http://www.treeview.net
|
|
Author: Marcelino Alves Martins
|
|
|
|
Instructions:
|
|
- Follow the steps labeled SECTION1, SECTION2, etc. in this file
|
|
-->
|
|
|
|
|
|
<html>
|
|
|
|
<head>
|
|
|
|
<title>Frameless JavaScript Tree</title>
|
|
|
|
<!-- SECTION 1 -->
|
|
<style>
|
|
/* styles for the tree */
|
|
SPAN.TreeviewSpanArea A {
|
|
font-size: 10pt;
|
|
font-family: verdana,helvetica;
|
|
text-decoration: none;
|
|
color: black
|
|
}
|
|
SPAN.TreeviewSpanArea A:hover {
|
|
color: '#820082';
|
|
}
|
|
/* rest of the document */
|
|
BODY {background-color: white}
|
|
TD {
|
|
font-size: 10pt;
|
|
font-family: verdana,helvetica;
|
|
}
|
|
</style>
|
|
|
|
|
|
|
|
<!-- SECTION 2: Replace everything (HTML, JavaScript, etc.) from here until the beginning
|
|
of SECTION 3 with the pieces of the head section that are needed for your site -->
|
|
|
|
<script>
|
|
//This script is not related with the tree itself, just used for my example
|
|
function getQueryString(index)
|
|
{
|
|
var paramExpressions;
|
|
var param
|
|
var val
|
|
paramExpressions = window.location.search.substr(1).split("&");
|
|
if (index < paramExpressions.length)
|
|
{
|
|
param = paramExpressions[index];
|
|
if (param.length > 0) {
|
|
return eval(unescape(param));
|
|
}
|
|
}
|
|
return ""
|
|
}
|
|
</script>
|
|
|
|
<!-- SECTION 3: These four scripts define the tree, do not remove-->
|
|
<script src="ua.js"></script>
|
|
<script src="ftiens4.js"></script>
|
|
<script src="demoFramelessNodes.js"></script>
|
|
</head>
|
|
|
|
|
|
<!-- SECTION 4: Change the body tag to fit your site -->
|
|
<body bgcolor=white leftmargin=0 topmargin=0 marginheight="0" marginwidth="0" onResize="if (navigator.family == 'nn4') window.location.reload()">
|
|
|
|
|
|
<!-- SECTION 5: Replace all the HTML from here until the beginning of SECTION 6 with the pieces of the head section that are needed for your site -->
|
|
|
|
<MAP NAME="ButtonsMap">
|
|
<AREA SHAPE="rect" ALT="Home" COORDS="297,0,340,23" HREF="http://www.treeview.net/" target=_top>
|
|
<AREA SHAPE="rect" ALT="Demo" COORDS="352,0,402,23" HREF="http://www.treeview.net/treemenu/demos.asp" target=_top>
|
|
<AREA SHAPE="rect" ALT="Download" COORDS="417,0,487,23" HREF="http://www.treeview.net/treemenu/download.asp">
|
|
<AREA SHAPE="rect" ALT="Install" COORDS="507,0,550,23" HREF="http://www.treeview.net/treemenu/instructions.asp" target=_top>
|
|
<AREA SHAPE="rect" ALT="Visual Build" COORDS="570,0,650,23" HREF="http://www.treeview.net/treemenu/treeview_builder.asp" target=_top>
|
|
<AREA SHAPE="rect" ALT="FAQ" COORDS="670,0,694,23" HREF="http://www.treeview.net/treemenu/faq.asp" target=_top>
|
|
<AREA SHAPE="rect" ALT="Contact" COORDS="712,0,767,23" HREF="http://www.treeview.net/treemenu/contact.asp" target=_top>
|
|
</MAP>
|
|
|
|
<table cellpadding=0 cellspacing=0 border=0 width=772><tr><td width=772>
|
|
<img src=http://www.treeview.net/treemenu/layout/topbar_menustrip.gif width=772 height=24 USEMAP="#ButtonsMap" border=0></td></tr></table>
|
|
|
|
|
|
<table cellpadding=0 cellspacing=0 border=0 width=772>
|
|
<tr>
|
|
<td width=178 valign=top>
|
|
<table cellpadding=4 cellspacing=0 border=0 width=100%><tr><td bgcolor=#ECECD9>
|
|
<img src=http://www.treeview.net/treemenu/layout/t.gif width=170 height=1><br>
|
|
<table cellspacing=0 cellpadding=2 border=0 width=100%><tr><td bgcolor=white>
|
|
|
|
<!-- SECTION 6: Build the tree. -->
|
|
|
|
<!-- By making any changes to this code you are violating your user agreement.
|
|
Corporate users or any others that want to remove the link should check
|
|
the online FAQ for instructions on how to obtain a version without the link -->
|
|
<!-- Removing this link will make the script stop from working -->
|
|
<table border=0><tr><td><font size=-2><a style="font-size:7pt;text-decoration:none;color:silver" href="http://www.treemenu.net/" target=_blank>JavaScript Tree Menu</a></font></td></tr></table>
|
|
|
|
<span class=TreeviewSpanArea>
|
|
<script>initializeDocument()</script>
|
|
<noscript>
|
|
A tree for site navigation will open here if you enable JavaScript in your browser.
|
|
</noscript>
|
|
</span>
|
|
|
|
|
|
<!-- SECTION 7: Continuation of the body of the page, after the tree. Replace whole section with
|
|
your site's HTML. -->
|
|
|
|
</td></tr></table></table>
|
|
</td>
|
|
<td bgcolor=white valign=top>
|
|
<table cellpadding=10 cellspacing=0 border=0 width=100%><tr><td>
|
|
|
|
<script>
|
|
//This code is only needed for the demo, not for your site
|
|
var picURL
|
|
picURL = getQueryString(0)
|
|
if (picURL.length > 0)
|
|
document.write("<img src=http://www.treeview.net/treemenu/demopics/" + picURL + "><br><br>");
|
|
</script>
|
|
|
|
<h4>Frameless Layout For Treeview</h4>
|
|
This is the demo for the frameless configuration of the tree menu. For instructions on this type of layout and others check the <A HREF="http://www.treeview.net/treemenu/instructions.asp">install</A> page.<p>
|
|
|
|
For simplification of the demo, most links on the tree actually reload the same page (only with different arguments for different pics.) In your site you will probably be linking to different pages, and many of them will also contain the tree. This way the user can jump from page to page clicking the tree.<p>
|
|
|
|
Note how some of the expandable/collapsible nodes have an hyperlink on their name (the folder itself can load a page) and others don't. The two types were mixed here for demo purposes.
|
|
|
|
</td></tr></table></td></tr></table>
|
|
|
|
</body>
|
|
</html>
|