<?php
include_once "class_navtree.php";
// SCREENSHOT: http://www.markquah.per.sg/CLASS_NAVTREE/navtree001_sample.html
/* TREE OPTION: background-image:background-image:background-repeat:background-repeat:background-repeat:
define("NAV_HIDEROOT", 1); // HIDE Root Node
define("NAV_NOICON", 2); // HIDE ICON
define("NAV_NODESC", 4); // HIDE DESCRIPTION
define("NAV_STATIC", 8); // STATIC TREE
define("NAV_SETALL", 16); // SHOW EXPAND ALL/COLLAPSE ALL ICON
define("NAV_NOINDENT", 32); // SHOW EXPAND ALL/COLLAPSE ALL ICON
*/
// specified image directory
$navtree = new NAVTREE("./IMAGE/NAVTREE");
// THREE CSS Style to control display, this is the global default
// navs_action: control appearance of expand/collapse all font
/*
$navtree->SetStyle('navs_action',
'font-size: 8pt; font-family: Verdana; font-weight: bold;'.
'width: 80%; margin: 10px 10px 30px 10px;'.
'background: black; color: white; text-align: center');
// navs_tree: table format that box-up the entries
$navtree->SetStyle('navs_tree',
'font-size: 8pt; font-family: Arial, Helvetica;');
// navs_content: description box
$navtree->SetStyle('navs_content',
'border: 2 groove; padding: 5; font-size: 8pt; '.
'font-family: Arial, Helvetica; background: #FFCCFF');
*/
//----- define the node type and the image to use
$t_folder = $navtree->CreateType("folder");
$t_document = $navtree->CreateType("document");
//----- demonstrate drop down menu
// DOCUMENTATION TREE
$menu1 = $navtree->CreateNode(-1, $t_folder, "close" , "DOCUMENTATION",
"How to use NavTree");
$node1 = $navtree->CreateLinkNode($menu1, "#QUICKSTARTPHP", "Quick Start - PHP",
"PHP portion of NavTree");
$node2 = $navtree->CreateLinkNode($menu1, "#QUICKSTARTHTML", "Quick Start - HTML",
"HTML portion of NavTree");
$node3 = $navtree->CreateLinkNode($menu1, "#DIVCONTROL", "Control Tree Box Appearence",
"How to control the general appearance of the Tree.");
$node4 = $navtree->CreateLinkNode($menu1, "#STYLECONTROL", "Control Display in Tree",
"How to specify font style for various components in tree");
$node5 = $navtree->CreateLinkNode($menu1, "#TREECONTROL", "Control Components in Tree",
"How to turn off components in tree");
$tree_menu1 = $navtree->CreateTree($menu1, "NAVMENU1", 0);
// $navtree->SetTreeStyle($tree_menu1, 'navs_tree', 'font-size: 8pt; font-family: serif;');
// SAMPLE MENU
$menu2 = $navtree->CreateNode(-1, $t_folder, "open", "Sample Menu", "List of various sample");
$node1 = $navtree->CreateLinkNode($menu2, "#NAVSAMPLE1", "Default Display",
"No fanciful addition.");
$node1 = $navtree->CreateLinkNode($menu2, "#NAVSAMPLE2", "Control Text Display",
"Control Text dislay through SetTreeStyle");
$node1 = $navtree->CreateLinkNode($menu2, "#NAVSAMPLE3", "Control Text Option",
"Control Text dislay through SetTreeStyle");
$tree_menu2=$navtree->CreateTree($menu2, "NAVMENU2", 0);
// $navtree->SetTreeStyle($tree_menu2, 'navs_content',
// 'border: groove 2; background:lightblue; font-size: 8pt; font-family: tahoma;');
//----- Sample 1: plain tree
$data_node = $navtree->CreateNode(-1, $t_folder, "open", "SAMPLE1", "text data");
$data1 = $navtree->CreateNode($data_node, $t_folder, "open" ,"data 1", "text data");
$data2 = $navtree->CreateNode($data_node, $t_folder, "open" ,"data 2", "text data");
$data3 = $navtree->CreateNode($data2, $t_folder,"open" ,"data 3", "text data");
$data4 = $navtree->CreateNode($data2, $t_folder,"open" ,"data 4", "text data");
$data5 = $navtree->CreateNode($data3, $t_folder,"open" ,"data 5", "text data");
$data6 = $navtree->CreateNode($data4, $t_folder,"open" ,"data 6", "text data");
$sample1 = $navtree->CreateTree($data_node, "SAMPLE1", 0);
//----- Sample 2: controlling text
$data_node = $navtree->CreateNode(-1, $t_folder, "open", "SAMPLE2", "text data");
$data1 = $navtree->CreateNode($data_node, $t_folder, "open" ,"data 1", "text data");
$data2 = $navtree->CreateNode($data_node, $t_folder, "open" ,"data 2", "text data");
$data3 = $navtree->CreateNode($data2, $t_folder,"open" ,"data 3", "text data");
$data4 = $navtree->CreateNode($data2, $t_folder,"open" ,"data 4", "text data");
$data5 = $navtree->CreateNode($data3, $t_folder,"open" ,"data 5", "text data");
$data6 = $navtree->CreateNode($data4, $t_folder,"open" ,"data 6", "text data");
$sample2 = $navtree->CreateTree($data_node, "SAMPLE2", NAV_SETALL|NAV_NOLEADLINE);
$navtree->SetTreeStyle($sample2, 'navs_content',
'background:lightblue;font-size: 8pt; font-family: IMPACT;');
$navtree->SetTreeStyle($sample2, 'navs_tree',
'font-size: 12pt; font-family: Verdana; font-weight: bold');
$navtree->SetTreeStyle($sample2, 'navs_action',
'font-size: 8pt; font-family: IMPACT; font-weight: bold; color: red');
//----- Sample 3: STATIC TREE WITH NO ROOT NODE
$data_node = $navtree->CreateNode(-1, $t_folder, "open", "SAMPLE3", "text data");
$data1 = $navtree->CreateNode($data_node, $t_folder, "open" ,"data 1", "text data");
$data2 = $navtree->CreateNode($data_node, $t_folder, "open" ,"data 2", "text data");
$data3 = $navtree->CreateNode($data2, $t_folder,"open" ,"data 3", "text data");
$data4 = $navtree->CreateNode($data2, $t_folder,"open" ,"data 4", "text data");
$data5 = $navtree->CreateNode($data3, $t_folder,"open" ,"data 5", "text data");
$data6 = $navtree->CreateNode($data4, $t_folder,"open" ,"data 6", "text data");
$sample3 = $navtree->CreateTree($data_node, "SAMPLE3", NAV_STATIC|NAV_HIDEROOT);
// OK Now load the data
$navtree->LoadData();
?>
<HEAD>
<TITLE>Navigation Tree</TITLE>
<style>
H1 {background: #CCFFCC; WIDTH: 100%; TEXT-ALIGN: CENTER}
H2 {background: #CCCCFF; WIDTH: 100%; TEXT-ALIGN: CENTER}
</STYLE>
</HEAD>
<BODY>
<CENTER><H1>Navigation Tree</H1></CENTER>
<TABLE WIDTH=70% ALIGN=CENTER>
<TR HEIGHT=50px BORDER=0 CELLSPACING=0 CELLPADDING=0 MARGIN=0>
<TD>
<div id=NAVMENU1 style="position:absolute; border:1, solid;
background: #FF6666; padding:3; z-index:99;"
>
<?php $navtree->PrintTree($tree_menu1); ?>
</div>
<TD>
<div id=NAVMENU2 style="position:absolute; border:1, solid; background: #6666FF;
padding:3; z-index:99;">
<?php $navtree->PrintTree($tree_menu2); ?>
</div>
</TABLE>
<HR>
<A NAME="QUICKSTARTPHP">
<H2>QUICK START - PHP</H2>
<PRE><CODE>
<?php
//-----------------------------------------------------------
//----- initiate class first
//-----------------------------------------------------------
// specify the image directory
$navtree = new NAVTREE("./IMAGE/NAVTREE");
//-----------------------------------------------------------
//----- define the node icon
//----- expected in the directory:
//----- nav_spacer.gif nav_plus.gif nav_minus.gif
//----- for each icon, four images are required
//----- {icon}_expand.gif, {icon}_collapse.gif,
//----- {icon}_open.gif, {icon_close}.gif
//-----------------------------------------------------------
$t_folder = $navtree->CreateType("folder");
$t_document = $navtree->CreateType("document");
//-----------------------------------------------------------
//----- create node array
//----- Use the following functions to create a node
//----- The highest level (root) nodes have parent = -1
//-----
//----- Create a basic node
//----- function CreateNode($parent, $type, $state, $header, $content)
//----- $parent: parent node ID
//----- $type: icon to be used
//----- $state: initial state: open or close
//----- $header: header text info
//----- $content: text in the content box.
//----- Note that cannot have mulitple line. Use <tBR&tt instead.
//----- Create a HREF link node using wrapper functon:
//----- function CreateLinkNode($parent, $href, $desc, $text, $type=0)
//----- $parent: as in above, type is default to be the first definition
//----- $state is always open
//----- $header becomes <A HREF="$href">$desc</A>
//-----
$branch = $navtree->CreateNode(-1, $t_folder,"close" ,"Branch 1", "text data");
$node1 = $navtree->CreateLinkNode($branch, "http://www.phpclasses.org", "Goto PHP Classes", "Get this package");
$node2 = $navtree->CreateLinkNode($branch, "http://www.php.net", "Goto PHP net", "Browse PHP module.");
$node3 = $navtree->CreateLinkNode($branch, "http://www.apache.org", "Goto Apache Web Site", "Get Apache");
$branch2 = $navtree->CreateNode(-1, $t_folder,"close" ,"Branch 2", "text data");
$node1 = $navtree->CreateLinkNode($branch2, "http://www.phpclasses.org", "Goto PHP Classes", "Get this package");
$node2 = $navtree->CreateLinkNode($node1, "http://www.php.net", "Goto PHP net", "Browse PHP module.");
$node3 = $navtree->CreateLinkNode($node2, "http://www.apache.org", "Goto Apache Web Site", "Get Apache");
//-----------------------------------------------------------
//----- Create trees specifying which DIV id it is using and the option
//-----
//----- function CreateTree($root_node, $div_id, $option=0,
//----- $indent_width=20, $indent_height=10)
//----- $root_node: highest level node
//----- $div_id: tree will be display in <DIV id="$div_id"> box
//----- $option: refer to TREE option
//----- $indent_width, $indent_height: indentation spacing
//-----------------------------------------------------------
$tree_menu1 = $navtree->CreateTree($branch, "NAVMENU1",
NAV_NOINDENT);
$tree_menu2 = $navtree->CreateTree($branch2, "NAVMENU2",
NAV_NOINDENT);
//-----------------------------------------------------------
//----- Now load in the JSscript and the pre-generated data
//-----------------------------------------------------------
$navtree->LoadData();
//-----------------------------------------------------------
//----- End of PHP portion. This must be called prior to HTML content
//-----------------------------------------------------------
?>
</CODE></PRE>
<BR>
<HR>
<A NAME="QUICKSTARTHTML">
<H2>QUICK START - HTML</H2>
<PRE><CODE>
<HTML>
...
<?php .... read in your PHP portion of tree data ... ?>
...
<div id=NAVMENU1>
<?php $navtree->PrintTree($tree_menu1); ?>
</div>
....
<div id=NAVMENU2>
<?php $navtree->PrintTree($tree_menu2); ?>
</div>
...
</HTML>
</CODE></PRE>
<HR>
<A NAME="DIVCONTROL">
<H2>Control Tree Box Appearance</H2>
<H3>FIX/STATIC box</H3>
To create a fix box, ie no shrinking or expanding, specify the height and
width of the box:
<div id=NAVMENU2 style="width:200px; height:200px">
Sometime I use a table to wrap around the DIV box for better control.
<H3>DROP-DOWN MENU</H3>
To create a drop down menu, the division must be specify with style="
position:absolute". But using this will cause the left position to be zero,
ie left edge. In such a case, use a table wrapped down to display multiple
column.
The main node is typically started with the node state ="close" so the menu
will not be fully expand.
</CODE></PRE>
<BR>
<HR>
<A NAME="STYLECONTROL">
<H2>Control Display in Tree</H2>
<PRE><CODE>
There are three main style that is being used:
navs_tree : control the header text
navs_content : control the description box
navs_action : control the expand/collapse all boxes
To set it as a default style for all trees. This will be overwritten
by the individual tree style settings below:
$navtree->SetStyle('navs_action',
'font-size: 8pt; font-family: Verdana; font-weight: bold;'.
'width: 80%; margin: 10px 10px 30px 10px;'.
'background: black; color: white; text-align: center');
$navtree->SetStyle('navs_tree',
'font-size: 8pt; font-family: Arial, Helvetica;');
$navtree->SetStyle('navs_content',
'border: 2 groove; padding: 5; font-size: 8pt; '.
'font-family: Arial, Helvetica; background: #FFCCFF');
To set individual tree style settings:
$tree_menu2 = $navtree->CreateTree($menu2, "NAVMENU2",
NAV_NOINDENT);
$navtree->SetTreeStyle($tree_menu2, 'navs_tree',
'font-size: 8pt; font-family: Verdana;');
</CODE></PRE>
<BR>
<HR>
<A NAME="TREECONTROL">
<H2>Control Components in Tree</H2>
<PRE><CODE>
NavTree support various option for control of a particular tree.
The option is specified during Tree creation:
$tree_menu2 = $navtree->CreateTree($menu2, "NAVMENU2",
NAV_NOINDENT|NAV_HIDEROOT);
NAV_HIDEROOT // HIDE Root Node
The top level root will not be displayed in the tree.
This is useful if the root node is just merely a container
NAV_NOICON: // HIDE ICON
This option turned off the display of the icon just before the
header text. A space saver for crammed space.
NAV_NODESC: // HIDE DESCRIPTION
By default, if there is no description entered the description box
will not be displayed. This option enforced that the description
box cannot be displayed even if text is entered.
NAV_STATIC // STATIC TREE
Disable the expand/collapse (plus or minus sign usually) such that
the user cannot control the appearance. A separate option NAV_SETALL
can be used to control expand/collapse of the whole branch.
NAV_SETALL // SHOW EXPAND ALL/COLLAPSE ALL ICON
Display two icons for expand all/collapse all. One click you will close
all the trees.
NAV_NOINDENT // SHOW EXPAND ALL/COLLAPSE ALL ICON
Display the tree without any indentation. I don't know why I think of
this but it may come in handy.
NAV_NOLEADLINE // HIDE LEADER LINE BEFORE ICON
Leader line make clearer distinction of icon link. But if you don't
want it. Turn it off using this option.
</CODE></PRE>
<BR>
<HR>
<A NAME="NAVSAMPLE1">
<H2>Sample 1: Default Tree</H2>
A plain tree without any fanciful set up, except the background for distinction:
<BR>
<BR>
<div id=SAMPLE1 style="background:lightgreen"
>
<?php $navtree->PrintTree($sample1); ?>
</div>
<BR>
<HR>
<A NAME="NAVSAMPLE2">
<H2>Sample 2: Controlling text</H2>
A tree with various text output changed.
<BR>
<BR>
<div id=SAMPLE2 style="background:lightgreen">
<?php $navtree->PrintTree($sample2); ?>
</div>
<BR>
<HR>
<A NAME="NAVSAMPLE3">
<H2>Sample 3: Controlling Tree Components</H2>
A tree with NAV_STATIC|NAV_HIDEROOT option sets:
<BR>
<BR>
<BR>
<div id=SAMPLE3 style="background:lightgreen">
<?php $navtree->PrintTree($sample3); ?>
</div>
<BR>
</BODY></HTML>
|