File: navtree001_sample.php

<?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>
&lt?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 &lttBR&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 &ltA HREF="$href"&gt$desc&lt/A&gt
    //-----
    $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 &ltDIV id="$div_id"&gt 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
    //-----------------------------------------------------------
?&gt
</CODE></PRE>
<BR>
<HR>
<A NAME="QUICKSTARTHTML">
<H2>QUICK START - HTML</H2>
<PRE><CODE>
&ltHTML&gt
...
&lt?php  .... read in your PHP portion of tree data ... ?&gt
...
&ltdiv id=NAVMENU1&gt
&lt?php $navtree->PrintTree($tree_menu1); ?&gt
&lt/div&gt
....
&ltdiv id=NAVMENU2&gt
&lt?php $navtree->PrintTree($tree_menu2); ?&gt
&lt/div&gt
...
&lt/HTML&gt
</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:

    &ltdiv id=NAVMENU2 style="width:200px; height:200px"&gt

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>