Zend Certified Engineer

phpguru.org

Quality PHP and Javascript code
Download RGraph: HTML5 canvas graph library... Home ~ Downloads ~ FAQs ~ Licensing
RSS Feed RSS Feed
Follow me on Twitter Follow me on Twitter

Add to Google...

HTML5 & CSS3

Articles

Javascript

PHP5

PHP4






Bookmark with delicious tweet this site Post to Google Buzz! Stumble! this site

Tree menu

This PHP/Javascript combo allows you to easily create a tree menu. With capable browsers, the menu is dynamic and allows the branches to be expanded/collapsed. This works AFAIK with Internet Explorer 4+, Mozilla, and Netscape Navigator 6+. With other browsers, Opera for example, the menu is static. Also, with Internet Explorer 5+, the status of the expanded/collapsed branches is persistent, (ie it survives a refresh). Each node can have an optional link and icon.

This code is available here There are two sets of icons supplied, one Windows 9x-2000 style, and the other Windows XP style. Examples of both are below.

Check out this survey of menu scripts: http://www.chipchapin.com/WebTools/MenuTools/

The code used to produce the below tree structures is below.

 

PHP

<?php
require_once('HTML/TreeMenu.php');

$icon 'folder.gif';

$menu  = new HTML_TreeMenu();

$node1 = new HTML_TreeNode(array('text' => "First level",
                                 
'link' => "test.php",
                                 
'icon' => $icon));

$foo   = &$node1->addItem(new HTML_TreeNode(array('text' => "Second level",
                                                  
'link' => "test.php",
                                                  
'icon' => $icon)));

$bar   = &$foo->addItem(new HTML_TreeNode(array('text' => "Third level",
                                                
'link' => "test.php",
                                                
'icon' => $icon)));

$blaat = &$bar->addItem(new HTML_TreeNode(array('text' => "Fourth level",
                                                
'link' => "test.php",
                                                
'icon' => $icon)));

$blaat->addItem(new HTML_TreeNode(array('text' => "Fifth level",
                                        
'link' => "test.php",
                                        
'icon' => $icon,
                                        
'cssClass' => 'treeMenuBold')));

$node1->addItem(new HTML_TreeNode(array('text' => "Second level, item 2",
                                        
'link' => "test.php",
                                        
'icon' => $icon)));

$node1->addItem(new HTML_TreeNode(array('text' => "Second level, item 3",
                                        
'link' => "test.php",
                                        
'icon' => $icon)));

$menu->addItem($node1);
$menu->addItem($node1);

// Create the presentation class
$treeMenu = &new HTML_TreeMenu_DHTML($menu, array('images' => '/images/treemenu/',
                                                  
'defaultClass' => 'treeMenuDefault'));
$listBox  = &new HTML_TreeMenu_Listbox($menu);
?>

HTML

<style type="text/css">
<!--
    .treeMenuBold {
        font-weight: bold;
    }
// -->
</style>

<table border="0" width="100%">
    <tr>
        <td width="50%" valign="top">
            <?$treeMenu->printMenu()?>
            <?$listBox->printMenu()?>
        </td>

        <td width="50%" valign="top">
            <?php
                $treeMenu
->images '/images/treemenuAlt';
                
$treeMenu->printMenu()
            
?>
        </td>
    </tr>
</table>



RGraph: HTML5 canvas graph library

Example graph made using RGraph

If you're interested in web development, then you may also be interested in RGraph: HTML5 canvas graph library. It uses HTML5 features to produce a wide variety of graph types. Because it moves the creation of graphs from the server to the client, it can significantly reduce the load on your server and your bandwidth usage.