PHP Classes

File: navtree001_sample.php

Recommend this page to a friend!
  Classes of Mark Quah   NavTree   navtree001_sample.php   Download  
File: navtree001_sample.php
Role: Example script
Content type: text/plain
Description: V001 demo and documentation
Class: NavTree
Explorer-like tree
Author: By
Last change: Added leader line
Date: 21 years ago
Size: 15,630 bytes
 

Contents

Class file image Download
<?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>