Tree menus con PHP
En esta oportunidad veremos una librería para PHP que nos permite crear menús tipo árbol (Tree menus) como los del explorador de windows usando PHP. La librería en cuestión es HTML_TreeMenu que forma parte de la conocida librería de componentes de PHP, PEAR.
Entre las características de HTML_TreeMenu podemos encontrar:
->> Podemos generar diferentes tipos de menus: HTML dinamico (DHTML), Estático y ListBox.
->> Permite crear menús compatibles con los principales navegadores de la actualidad.
->> Es posible generar múltiples menús por página.
->> Podemos configurar el estilo para cada nodo del árbol, al igual que el link y los eventos generados al expandir y contraer el nodo.
Veamos un ejemplo para aclarar las ideas:
prueba.php
<?php //incluimos la libreria require_once('../TreeMenu.php'); // seteamos los iconos $icon = 'folder.gif'; $expandedIcon = 'folder-expanded.gif'; //creamos el menu $menu = new HTML_TreeMenu(); // creamos los nodos // se puede ver que para cada nodo es posible configurar los eventos onclick y onexpand $node1 = new HTML_TreeNode(array('text' => "Primer nivel", 'link' => "test.php", 'icon' => $icon, 'expandedIcon' => $expandedIcon, 'expanded' => true), array('onclick' => "alert('foo'); return false", 'onexpand' => "alert('Expanded')") ); //creamos los sub nodos $node1_1 = &$node1->addItem(new HTML_TreeNode(array('text' => "Segundo nivel", 'link' => "test.php", 'icon' => $icon, 'expandedIcon' => $expandedIcon)) ); $node1_1_1 = &$node1_1->addItem(new HTML_TreeNode(array('text' => "Tercer nivel", 'link' => "test.php", 'icon' => $icon, 'expandedIcon' => $expandedIcon))); $node1_1_1_1 = &$node1_1_1->addItem(new HTML_TreeNode(array('text' => "Cuarto nivel", 'link' => "test.php", 'icon' => $icon, 'expandedIcon' => $expandedIcon))); $node1_1_1_1->addItem(new HTML_TreeNode(array('text' => "Quinto nivel", 'link' => "test.php", 'icon' => $icon, 'expandedIcon' => $expandedIcon, 'cssClass' => 'treeMenuBold'))); //agregamos al menu 2 nodos principales $menu->addItem($node1); $menu->addItem($node1); // creamos la clase de presentacion $treeMenu = &new HTML_TreeMenu_DHTML($menu, array('images' => '../imagesAlt', 'defaultClass' => 'treeMenuDefault')); ?>
luego agregamos el siguiente código HTML donde incluimos la librería javascript.
continuación prueba.php
.... .... <html> <head> <style type="text/css"> body { font-family: Verdana; font-size: 10pt; } .treeMenuDefault { font-style: italic; } .treeMenuBold { font-style: italic; font-weight: bold; } </style> <script src="../TreeMenu.js" language="JavaScript" type="text/javascript"> </script> </head> <body> <?php $treeMenu->printMenu()?><br /><br /> </body> </html>
Podemos ver un ejemplo del menu creado en este link DEMO Tree menu
La librería HTML_TreeMenu tiene algunos métodos muy útiles como el createFromStructure(array $params) que acepta un array con una estructura de árbol predefinida, las soportadas son la de Richard Heyes disponible en PHPGuru y la de Wolfram Kriesings disponible en PEAR .
Otro método importante es el createFromXML que permite crear el menu a partir de un string que contiene un formato XML.
Finalmente, HTML_TreeMenu nos provee una clase abstracta HTML_TreeMenu_Presentation la cual podemos extender y crear nuestros propios tipos de menús lo que nos ofrece de una gran libertad para personalizar al máximo nuestros menús.
Como siempre, recomendamos leer la documentación oficial para poder aprovechar totalmente la librería y esperamos que esta introducción les haya sido útil.
Más información:
Documentación oficial
