Expandir/Colapsar
Publicado por germano (1 intervención) el 09/06/2008 12:19:44
Hola a todos, llevo un tiempo intentado hacer esto pero no hay manera asi que haber si me podeis echar un cable.
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
<!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 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
// 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;
}
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
<!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 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
// 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;
}
Valora esta pregunta
0