<Menus em árvore dinâmicos ⁄ >

var myCustomTree1=new jktreeview("tree1");
 
var no1=myCustomTree1.addItem("Menu 1","" );
var no2=myCustomTree1.addItem("Menu 2","" );
var no3=myCustomTree1.addItem("Menu 1.1",no1,"http://www.pedrocorreia.net");
var no4=myCustomTree1.addItem("Menu 2.1",no2 ,"http://www.slbenfica.pt");
 
myCustomTree1.treetop.draw(); //REQUIRED LINE: Initalize tree

-- Table "navegacao" DDL
CREATE TABLE `navegacao` (
  `id` tinyint(4) NOT NULL AUTO_INCREMENT,
  `pertence` tinyint(4) NOT NULL DEFAULT '0',
  `descricao` varchar(50) NOT NULL DEFAULT '',
  `link` varchar(75) DEFAULT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

INSERT INTO navegacao (id, pertence, descricao, link) VALUES (1, 0, "Menu 1", "NULL");
INSERT INTO navegacao (id, pertence, descricao, link) VALUES (2, 0, "Menu 2", "NULL");
INSERT INTO navegacao (id, pertence, descricao, link) VALUES (3, 0, "Menu 3", "NULL");
INSERT INTO navegacao (id, pertence, descricao, link) VALUES (4, 0, "Menu 4", "NULL");
INSERT INTO navegacao (id, pertence, descricao, link) VALUES (5, 1, "Menu 1.1", "NULL");
INSERT INTO navegacao (id, pertence, descricao, link) VALUES (6, 2, "Menu 2.1", "http://www.iol.pt");
INSERT INTO navegacao (id, pertence, descricao, link) VALUES (7, 3, "Menu 2.3", "http://www.portugaldiario.iol.pt");
INSERT INTO navegacao (id, pertence, descricao, link) VALUES (8, 4, "Menu 2.4", "http://www.record.pt");
INSERT INTO navegacao (id, pertence, descricao, link) VALUES (10, 0, "Menu 5", "NULL");
INSERT INTO navegacao (id, pertence, descricao, link) VALUES (9, 10, "Menu 5.1", "http://www.pedrocorreia.net");
INSERT INTO navegacao (id, pertence, descricao, link) VALUES(11, 5, "Menu 1.1.1", "http://www.abola.pt");

<?php
/**
 * Efectuar ligação à BD
 *
 * @return ligação
 */
function connectDB(){
  $db = mysql_connect("db_server", "db_username", "db_password");
  mysql_select_db("db_name",$db) or die("<b><br>Impossivel aceder á base de dados</b><BR>");
  return $db;
}
?>

<?php
 
/**
 * Construir menu
 *
 * @param String $tabela
 * @param String $treeName
 * @param String $div
 * @return String
 */
function DoMenu($tabela,$treeName,$div){
  $db=connectDB();
 
  $sql=mysql_query("Select id, descricao, link, pertence From $tabela");
 
  while($myrow=mysql_fetch_array($sql)){
    $content.=DoMenuNode($treeName,$myrow["id"],$myrow["descricao"],$myrow["pertence"],$myrow["link"]);
  }
  mysql_close($db);
 
  return "
var $treeName=new jktreeview(\"$div\");\r\n
$content
$treeName.treetop.draw(); //REQUIRED LINE: Initalize tree\r\n
";
}
 
/**
 * Construir nó (função auxiliar da função DoMenu)
 *
 * @param String $treeName
 * @param int $nodeNumber
 * @param String $nodeDescription
 * @param int $nodeBelongsTo
 * @param String $nodeLink
 * @return String
 */
function DoMenuNode($treeName,$nodeNumber,$nodeDescription,$nodeBelongsTo,$nodeLink){
  $nodeBelongsTo=($nodeBelongsTo>0)?"no$nodeBelongsTo":"\"\"";
  $nodeLink=($nodeLink)?(",\"$nodeLink\""):"";
 
  return "var no$nodeNumber=$treeName.addItem(\"$nodeDescription\",$nodeBelongsTo $nodeLink);\r\n";
}
 
?>

<?php
/**
 * Construir menu recursivamente
 *
 * @param String $tabela
 * @param String $parent
 * @param String $level
 * @return String
 */
function DoMenuRecursive($tabela, $parent=0, $level=0){
  $indent = "";
  if(!$db) $db=connectDB();
 
  for ($i=0; $i<$level; $i++) $indent .= "[+]"; //fazer "identação"
 
  $sql = mysql_query("SELECT id, descricao, link FROM $tabela WHERE pertence='$parent'");
  while ($myrow = mysql_fetch_array($sql)){
    $descricao=$myrow["descricao"];
    $link=$myrow["link"];
    $nodeName="lnkNode_$myrow[id]";
 
    $node=(!$myrow["link"])?$descricao:DoHref($link,$descricao,$nodeName,"_blank");
    $str.="$indent $node<br>";
    $str.=DoMenuRecursive($tabela,$myrow["id"], intval($level) + 1);
  }
 
  return $str;
}
/**
 * Construir <a> (função auxiliar da função DoRecursiveMenu)
 *
 * @param String $hrefLink
 * @param String $hrefDescription
 * @param String $hrefName
 * @param String $hrefTarget
 * @param String $hrefClass
 * @param String $hrefStyle
 * @return String
 */
function DoHref($hrefLink,$hrefDescription,$hrefName,$hrefTarget="",$hrefClass="",$hrefStyle=""){
  $hrefClass=(!$hrefClass)?$hrefClass:" class='$hrefClass' ";
  $hrefStyle=(!$hrefStyle)?$hrefStyle:" style='$hrefStyle' ";
  $hrefTarget=(!$hrefTarget)?$hrefTarget:" target='$hrefTarget' ";
  $hrefAlt=" alt='$hrefDescription' title='$hrefDescription' ";
  $hrefName=(!$hrefName)?$hrefName:" name='$hrefName' id='$hrefName' ";
 
  return "<a href='$hrefLink' $hrefAlt $hrefClass $hrefStyle $hrefTarget $hrefName>$hrefDescription</a>";
}
?>

<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Tree View</title>
 
    <link rel="stylesheet" type="text/css" href="css/multi/tree.css">
    <script type="text/javascript" src="build/yahoo.js" ></script>
    <script type="text/javascript" src="build/event.js"></script>
    <script type="text/javascript" src="build/treeview.js" ></script>
    <script type="text/javascript" src="build/jktreeview.js" ></script>
 
    <!-- Below is Style sheet for demos. Removed if desired -->
    <style type="text/css">
      body {font: normal 11px verdana, sans-serif; color: #333; line-height: 19px;}
      a { text-decoration: underline; color: #46546C; }
      a:hover { text-decoration: underline; color: #4d77c3; }
      #tree1 {width:250px;padding: 10px;float:left;}
      #tree2 {width:250px;padding: 10px;float:left;}
      #tree3 {width:250px;padding: 10px;float:left;}
    </style>
  </head>
 
  <body>
 
    <h2>Folding TreeView Menu demo: <a href="http://www.javascriptkit.com/script/treeview/">More info</a></h2>
 
    <!--Empty DIV tags to contain the treeview demos -->
    <div id="tree1"><!-- exemplo da tree 1--></div>
    <div id="tree2"><!-- exemplo da tree 2--></div>
    <div id="tree3" class="treemenu"><!-- exemplo da tree 3--></div>
 
    <script type="text/javascript">
    <?php
    //todo o código daqui para cima é fornecido no ficheiro de exemplo ...
    //aqui vai o nosso código ...
    include_once("DoMenu.php");
    include_once("DoMenuRecursive.php");
    include_once("Connection.php");
 
 
 
    echo DoMenu("navegacao","myCustomTree1","tree1");
    echo DoMenu("navegacao","myCustomTree2","tree2");
    echo DoMenu("navegacao","myCustomTree3","tree3");
    ?>
    </script>
 
    <div style="clear:both">
    <h2>Implementação recursiva, but no so visualy ... pretty ;)</h2>
    <?php
    echo DoMenuRecursive("navegacao");
    ?>
    </div>
  </body>
</html>