Ahora mostramos el código completo del ejemplo de creación de una interfaz de árbol dinámica.
En el Manual de Interfaz de árbol dinámico en PHP venimos explicando los pasos para la creación de un árbol de contenidos DHTML, que responde a las acciones del usuario para expandir y contraer sus ramas.
En el primer artículo explicamos las generalidades de esta propuesta del framework PHP PEAR para la creación de la interfaz de árbol. Por su parte, en el segundo artículo mostramos paso por paso el procedimiento para la creación del árbol utilizando este paquete de PEAR.
Ahora veremos el código completo de una página PHP, con la que hemos construido el árbol que hemos utilizado de ejemplo de uso de la librería. Antes de continuar, os sugiero ver el ejemplo en marcha en una página aparte, para que luego se pueda entender mejor el código.<?php
error_reporting(0);
require_once('TreeMenu.php');
$icon = 'folder.gif';
$expandedIcon = 'folder-expanded.gif';
$menu = new HTML_TreeMenu();
$nodo1 = new HTML_TreeNode(array('text'=>'Directorio','link'=>'http://www.desarrolloweb.com/directorio', 'icon' => $icon, 'expandedIcon' => $expandedIcon));
$menu->addItem($nodo1);
$nodo1_1 = new HTML_TreeNode(array('text'=>'Programación','link'=>'http://www.desarrolloweb.com/directorio/programacion', 'icon' => $icon, 'expandedIcon' => $expandedIcon), array('ontoggle'=>'alert("Has cambiado la rama Programación");'));
$nodo1->addItem($nodo1_1);
$nodo1_1_1 = new HTML_TreeNode(array('text'=>'HTML','link'=>'http://www.desarrolloweb.com/directorio/programacion/html/', 'icon' => $icon, 'expandedIcon' => $expandedIcon));
$nodo1_1->addItem($nodo1_1_1);
$nodo1_1_2 = new HTML_TreeNode(array('text'=>'javascript','link'=>'http://www.desarrolloweb.com/directorio/programacion/javascript/', 'icon' => $icon, 'expandedIcon' => $expandedIcon));
$nodo1_1->addItem($nodo1_1_2);
$nodo1_1_3 = new HTML_TreeNode(array('text'=>'PHP','link'=>'http://www.desarrolloweb.com/directorio/programacion/php/', 'icon' => $icon, 'expandedIcon' => $expandedIcon), array('onexpand'=>'alert("Has expandido la rama PHP");', 'oncollapse'=>'alert("Has cerrado la rama PHP");'));
$nodo1_1->addItem($nodo1_1_3);
$nodo1_1_3_1 = new HTML_TreeNode(array('text'=>'Scripts PHP','link'=>'http://www.desarrolloweb.com/directorio/programacion/php/scripts_en_php/', 'icon' => $icon, 'expandedIcon' => $expandedIcon));
$nodo1_1_3->addItem($nodo1_1_3_1);
$nodo1_1_3_2 = new HTML_TreeNode(array('text'=>'Manuales PHP','link'=>'http://www.desarrolloweb.com/directorio/programacion/php/manuales_de_php/', 'icon' => $icon, 'expandedIcon' => $expandedIcon));
$nodo1_1_3->addItem($nodo1_1_3_2);
$nodo1_2 = new HTML_TreeNode(array('text'=>'Sistemas','link'=>'http://www.desarrolloweb.com/directorio/sistemas', 'icon' => $icon, 'expandedIcon' => $expandedIcon));
$nodo1->addItem($nodo1_2);
$nodo1_3 = new HTML_TreeNode(array('text'=>'Bases de datos','link'=>'http://www.desarrolloweb.com/directorio/bases_de_datos/', 'icon' => $icon, 'expandedIcon' => $expandedIcon));
$nodo1->addItem($nodo1_3);
//Crear la presentación del árbol
$treeMenu = new HTML_TreeMenu_DHTML($menu, array('images' => 'imagesAlt2', 'defaultClass' => 'treeMenuDefault'));
?>
<html>
<head>
<style type="text/css">
body {
font-family: Trebuchet MS,Helvetica,Verdana,Arial,sans-serif;;
font-size: 10pt;
}
.treeMenuDefault {
font-style: italic;
}
</style>
<script src="TreeMenu.js" language="JavaScript" type="text/javascript"></script>
</head>
<body>
<?$treeMenu->printMenu()?><br /><br />
</body>
</html>
Nota: Este archivo de ejemplo está preparado, por las rutas de los includes, para ser colocado en la misma carpeta donde se encuentra la librería TreeMenu.php y el archivo Javascript TreeMenu.js y con la estructura de carpetas que viene en el archivo de descarga del paquete HTML_TreeMenu.
Eso es todo. Esperamos que se pueda entender y poner en marcha sin problemas esta manera de crear una interfaz de árbol dinámico en páginas web con soporte a PHP.
Fuente:enlace
No hay comentarios:
Publicar un comentario