Yo tengo un arbol de carpetas hecho con javascript y lo que quiero es que dependiendo del boton que pulse se expanda o se contraiga el arbol, mi codigo es este:
HTML
Código :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" href="css/popup.css" /> <title>Explorador de Carpetas</title> </head> <body> <script type="text/javascript" src="js/tree-carpetas.js"></script> <script type="text/javascript"> var opc; var Tree = new Array; // Tree[element] = "nodeId | parentNodeId | nodeName | nodeUrl" Tree[0] = "1|0|Carpeta 1|javascript: seleccionarCarpeta('Carpeta 1');"; Tree[1] = "1.1|1|Carpeta 1.1|javascript: seleccionarCarpeta('Carpeta 1.1');"; Tree[2] = "1.1a|1.1|Carpeta 1.1a|javascript: seleccionarCarpeta('Carpeta 1.1a');"; Tree[3] = "1.1b|1.1|Carpeta 1.1b|javascript: seleccionarCarpeta('Carpeta 1.1b');"; Tree[4] = "2|0|Expedientes|javascript: seleccionarCarpeta('Expedientes');"; Tree[5] = "2.0|2|Viejos|javascript: seleccionarCarpeta('Viejos');"; Tree[6] = "2.1|2|2007|javascript: seleccionarCarpeta('2007');"; Tree[7] = "2.2|2|2008|javascript: seleccionarCarpeta('2008');"; Tree[8] = "3|0|Resoluciones|javascript: seleccionarCarpeta('Resoluciones');"; Tree[9] = "3.1|3|GROP|javascript: seleccionarCarpeta('GROP');"; Tree[10] = "3.2|3|REP1|javascript: seleccionarCarpeta('REP1');"; Tree[11] = "3.3|3|REP2|javascript: seleccionarCarpeta('REP2');"; Tree[12] = "3.4|3|CART|javascript: seleccionarCarpeta('CART');"; Tree[13] = "3.5|3|MIPP|javascript: seleccionarCarpeta('MIPP');"; Tree[14] = "3.6|3|SOLD|javascript: seleccionarCarpeta('SOLD');"; function seleccionarCarpeta(opc){ window.parent.opener.document.forms[0].nombreCarpeta.value = "2008"; window.parent.opener.document.forms[0].rutaCarpeta.value = "/Expedientes"; window.close(); } function arbol(opcion) { } </script> <form method="post" action="#"> <div class="seccion"> <div id="divArbol" class="arbol"> <script type="text/javascript">createTree(Tree, 0, 'none', 'Ruta de acceso');</script> </div> <p></p> <ul class="botones"> <li><input class="boton" type="button" name="expandir" value="Expandir" onclick="arbol('expandir');" /></li> <li><input class="boton" type="button" name="colapsar" value="Colapsar" onclick="arbol('colapsar');" /></li> </ul> </div><!-- /seccion --> </form> <div id="botones-pagina"> <ul class="botones"> <li><input class="boton-pagina" type="button" name="cancelar" value="Cancelar" onclick="window.close();" /></li> </ul> </div><!-- /botontes-pagina --> </body> </html>
JS
Código :
// Arrays for nodes and icons var nodes = new Array();; var openNodes = new Array(); var icons = new Array(6); // Loads all icons that are used in the tree function preloadIcons() { icons[0] = new Image(); icons[0].src = "images/tree/plus.gif"; icons[1] = new Image(); icons[1].src = "images/tree/plusbottom.gif"; icons[2] = new Image(); icons[2].src = "images/tree/minus.gif"; icons[3] = new Image(); icons[3].src = "images/tree/minusbottom.gif"; icons[4] = new Image(); icons[4].src = "images/tree/folder.gif"; icons[5] = new Image(); icons[5].src = "images/tree/folderopen.gif"; } // Create the tree function createTree(arrName, startNode, openNode, rootNode) { nodes = arrName; if (nodes.length > 0) { preloadIcons(); if (startNode == null) startNode = 0; if (openNode != 0 || openNode != null){ if (openNode == 'all'){ setOpenAllNodes(); }else{ setOpenNodes(openNode); } } if (startNode !=0) { var nodeValues = nodes[getArrayId(startNode)].split("|"); document.write("<a href=\"" + nodeValues[3] + "\" onmouseover=\"window.status='" + nodeValues[2] + "';return true;\" onmouseout=\"window.status=' ';return true;\"><img src=\"images/tree/folderopen.gif\" align=\"absbottom\" alt=\"\" />" + nodeValues[2] + "</a><br />"); } else document.write("<img src=\"images/tree/device.gif\" align=\"absbottom\" alt=\"\" />" + rootNode + "<br />"); var recursedNodes = new Array(); addNode(startNode, recursedNodes); } } // Returns the position of a node in the array function getArrayId(node) { for (i=0; i<nodes.length; i++) { var nodeValues = nodes[i].split("|"); if (nodeValues[0]==node) return i; } } // Puts in array nodes that will be open function setOpenNodes(openNode) { for (i=0; i<nodes.length; i++) { var nodeValues = nodes[i].split("|"); if (nodeValues[0]==openNode) { openNodes.push(nodeValues[0]); setOpenNodes(nodeValues[1]); } } } // Coloca en el array de nodos a abrir, todos los nodos function setOpenAllNodes() { for (i=0; i<nodes.length; i++) { var nodeValues = nodes[i].split("|"); openNodes.push(nodeValues[0]); } } // Checks if a node is open function isNodeOpen(node) { for (i=0; i<openNodes.length; i++) if (openNodes[i]==node) return true; return false; } // Checks if a node has any children function hasChildNode(parentNode) { for (i=0; i< nodes.length; i++) { var nodeValues = nodes[i].split("|"); if (nodeValues[1] == parentNode) return true; } return false; } // Checks if a node is the last sibling function lastSibling (node, parentNode) { var lastChild = 0; for (i=0; i< nodes.length; i++) { var nodeValues = nodes[i].split("|"); if (nodeValues[1] == parentNode) lastChild = nodeValues[0]; } if (lastChild==node) return true; return false; } // Adds a new node to the tree function addNode(parentNode, recursedNodes) { for (var i = 0; i < nodes.length; i++) { var nodeValues = nodes[i].split("|"); if (nodeValues[1] == parentNode) { var ls = lastSibling(nodeValues[0], nodeValues[1]); var hcn = hasChildNode(nodeValues[0]); var ino = isNodeOpen(nodeValues[0]); // Write out line & empty icons for (g=0; g<recursedNodes.length; g++) { if (recursedNodes[g] == 1) document.write("<img src=\"images/tree/line.gif\" align=\"absbottom\" alt=\"\" />"); else document.write("<img src=\"images/tree/empty.gif\" align=\"absbottom\" alt=\"\" />"); } // put in array line & empty icons if (ls) recursedNodes.push(0); else recursedNodes.push(1); // Write out join icons if (hcn) { if (ls) { document.write("<a href=\"javascript: oc('" + nodeValues[0] + "', 1);\"><img id=\"join" + nodeValues[0] + "\" src=\"images/tree/"); if (ino) document.write("minus"); else document.write("plus"); document.write("bottom.gif\" align=\"absbottom\" alt=\"Open/Close node\" /></a>"); } else { document.write("<a href=\"javascript: oc('" + nodeValues[0] + "', 0);\"><img id=\"join" + nodeValues[0] + "\" src=\"images/tree/"); if (ino) document.write("minus"); else document.write("plus"); document.write(".gif\" align=\"absbottom\" alt=\"Open/Close node\" /></a>"); } } else { if (ls) document.write("<img src=\"images/tree/joinbottom.gif\" align=\"absbottom\" alt=\"\" />"); else document.write("<img src=\"images/tree/join.gif\" align=\"absbottom\" alt=\"\" />"); } // Start link document.write("<a href=\"" + nodeValues[3] + "\" onmouseover=\"window.status='" + nodeValues[2] + "';return true;\" onmouseout=\"window.status=' ';return true;\">"); // Write out folder & page icons if (hcn) { document.write("<img id=\"icon" + nodeValues[0] + "\" src=\"images/tree/folder") if (ino) document.write("open"); document.write(".gif\" align=\"absbottom\" alt=\"Folder\" />"); } else document.write("<img id=\"icon" + nodeValues[0] + "\" src=\"images/tree/folderopen.gif\" align=\"absbottom\" alt=\"Page\" />"); // Write out node name document.write("<span>" + nodeValues[2] + "</span>"); // End link document.write("</a><br />"); // If node has children write out divs and go deeper if (hcn) { document.write("<div id=\"div" + nodeValues[0] + "\""); if (!ino) document.write(" style=\"display: none;\""); document.write(">"); addNode(nodeValues[0], recursedNodes); document.write("</div>"); } // remove last line or empty icon recursedNodes.pop(); } } } // Opens or closes a node function oc(node, bottom) { var theDiv = document.getElementById("div" + node); var theJoin = document.getElementById("join" + node); var theIcon = document.getElementById("icon" + node); if (theDiv.style.display == 'none') { if (bottom==1) theJoin.src = icons[3].src; else theJoin.src = icons[2].src; theIcon.src = icons[5].src; theDiv.style.display = ''; } else { if (bottom==1) theJoin.src = icons[1].src; else theJoin.src = icons[0].src; theIcon.src = icons[4].src; theDiv.style.display = 'none'; } } // Push and pop not implemented in IE if(!Array.prototype.push) { function array_push() { for(var i=0;i<arguments.length;i++) this[this.length]=arguments[i]; return this.length; } Array.prototype.push = array_push; } if(!Array.prototype.pop) { function array_pop(){ lastElement = this[this.length-1]; this.length = Math.max(this.length-1,0); return lastElement; } Array.prototype.pop = array_pop; }
Gracias de antemano.
Un saludo.