Getting Started with ApPHP TreeMenu (v3.0.0 or above)
- 1. Common Notices
- 1.1 Syntax.
- 1.2 Common notes.
- 2. Getting Started
- 2.1 Step 1. Creating TreeMenu object.
- 2.2 Step 2. General settings.
- 2.3 Step 3. Adding nodes.
- 2.4 Step 4. Scanning content of folders.
- 2.5 Step 5. Drawing TreeMenu.
Common Notices
Syntax.
We use:
## - for comments
/// - for lines, that may be uncommented (optional)
Common notes.
• Please, use a $treeMenu->Debug(true); to debug your application
• Do not place ApPHP TreeMenu code inside another HTML Form: <form>...</form>
Getting Started
Step 1. Creating TreeMenu object
Make sure you define a valid relative (virtual) path to the treemenu.class.php file.
## *** define a relative (virtual) path to treemenu.class.php file define ('TREEMENU_DIR', ''); ## *** include TreeMenu class require_once(TREEMENU_DIR.'treemenu.class.php');There are two classes in this package: the TreeMenu class creates the tree structure and the Node class is used for each node. First you must create a TreeMenu object.
## *** create TreeMenu object $treeMenu = new TreeMenu();
Step 2. General Settings
Set unique numeric (integer-valued) identifier for TreeMenu.
## *** (if you want to use several independently configuredSet a style for TreeMenu.
TreeMenu objects on single page) $treeMenu->SetId('tree');
## *** "default" or "xp" or "vista" or "paneled" or your own style $treeMenu->SetStyle('default');Set a caption for TreeMenu.
$tm_caption = 'ApPHP TreeMenu Pro v'.$treeMenu->Version(); $treeMenu->SetCaption($tm_caption);Defines whether the debug mode is turned on or not.
## *** show debug info - false|true $treeMenu->Debug(false);You may define a method for data submission type (PostBack type). Possible values are: "get", "post" or "ajax".
## *** set form submission type: "get", "post" or "ajax" $treeMenu->SetPostBackMethod('post');If you need to store parameters, that were passed to your page in URL, you have to save them between calls of TreeMenu by using following method: SetHttpVars(). This guarantees that these parameters will not be lost while your work with TreeMenu control.
## *** set variables that used to get access to the pageThere is also an option to display number of sub-nodes to the left of every node in brackets (like: MainNode(10)).
(like: my_page.php?act=34&id=56 etc.) $treeMenu->SetHttpVars(array('act', 'id'));
## *** show number of subnodes to the left of every node - false|true $treeMenu->ShowNumSubNodes(false);'Expand all' and 'Collapse all' buttons may be displayed.
*** show 'expand all' and 'collapse all' buttons - false|true $treeMenu->ShowExpandCollapseAllButtons(false);SetAppearEffect function is used to employ special visual effects when the nodes appear/disappear. You can also set a speed for the appearance to 'fast', 'normal' or 'slow' or a number of milliseconds.
*** set effect for expanding/collapsing nodes - none|slow|normal|fast|integer number - delay in ms $treeMenu->SetAppearEffect("normal");You can use an anchor to navigate to the treemenu after a node is clicked.
## *** use anchor $treeMenu->UseAnchor(true);The anchor can be created automatically.
## *** create anchor automatically $treeMenu->CreateAnchorAuto(true);If the previous option is set to false, you have to create the anchor manually by putting this line anywhere in the HTML-code.
<!-- create anchor manually --> <a name='treemenu'></a>The TreeMenu supports both (ltr) left-to-right and (rtl) right-to-left layout. To change that use the SetDirection function.
## set TreeMenu direction: left-to-right or right-to-left $treeMenu->SetDirection('rtl');
Step 3. Adding nodes.
Now you can add nodes by using the method AddNode()
## *** add nodes
## arguments:
## arg #1 - node's caption
## arg #2 - file associated with this node (optional)
## arg #3 - icon associated with this node (optional)
## Example 1: $treeMenu->AddNode('Title');
## Example 2: $treeMenu->AddNode('Title', 'text.txt');
## Example 3: $treeMenu->AddNode('Title', 'text.txt', 'icon.gif');
The method returns Node object which supports AddNode() method as well so you can create multilevel tree-menu.
## *** add nodes $pictures = $treeMenu->AddNode('Pictures'); $europe = $pictures->AddNode('Europe'); $america = $pictures->AddNode('America'); $europe->AddNode('Eiffel Tower','content/paris.jpg','img/france.gif'); $europe->AddNode('Big Ben','content/london.jpg','img/britain.gif'); $colosseum=$europe->AddNode('The Colosseum','content/rome.jpg','img/italy.jpg'); $liberty=$america->AddNode('Liberty','content/washington.jpg','img/usa.jpg'); $treeMenu->AddNode('HTML','content/table.htm'); $treeMenu->AddNode('Text','content/text.txt');You may associate nodes not with files but with HTML code snippets.
## *** associate nodes with HTML code snippets $america->SetInnerHTML("<div onclick='alert(\"Alert\")'>HTML</div> code snippet");A node may open its file in a new window.
## *** open a node in a new window $liberty->OpenNewWindow(true);You can also set a tooltip for a node.
## *** set a tooltip for a node $america->SetTooltip('Ray Bradbury\'s homeland');You can sort the sub-nodes of a given node by name.
*** sort node's subnodes by name (recursively - true|false) $europe->SortByName(true);There is also an option to specify which of the sub-nodes will be selected by default when you click on the given node.
## *** set sub-node which will be selected by default when you click on a node $europe->SetDefaultNode($colosseum);
Step 4. Scanning content of a folders
Build a tree menu from contents of a folder.
$treeMenu->BuildFromFolder('styles');
Use default icons for folder nodes: false or true.
$treeMenu->UseDefaultFolderIcons(true);
Use default icons for file nodes: false or true.
$treeMenu->UseDefaultFileIcons(true);
Step 5. Drawing TreeMenu
Now you can draw tree-menu on the screen.
## *** drawing tree-menu $treeMenu->ShowTree(); $treeMenu->ShowContent();