TreeMap con Javascript
Llevo un par de días buscando un treeMap en javascript para poder incluir en un proyecto, el problema no es que no haya treemaps hechos, sino que no encuentro el adecuado para mi.
La mayoría requieren muchos archivos, son muy pesados, contienen mucho más de lo que necesito y un sin fin de cosas que no los hacen adecuados a mis necesidades actuales.
Es por ello que he decidido hacerme uno propio, uno sencillito, que a lo mejor con el tiempo pueda ir mejorando y agrandando pero que de momento me sirve para lo que necesito.
Para llevarlo a cabo, he decidido incluir todo en un mismo archivo, para no tener que depender de un .js un .css y el html. Seguramente si sigo haciendo mejoras al treemap acabaré separandolo en varios ficheros.
He utilizado el artículo que escribí hace algunos meses sobre mostrar y ocultar capas con javascript, a partir de él no ha sido difícil crear unas capas, darles estilo y obtener un treemap de lo más sencillito.
<!--
***********************************************
TREEMAP V1.0 POR EMILIO-JOSÉ (http://emilio.aesinformatica.com)
***********************************************
**** CONFIGURACIÓN: **** -->
<script type="text/javascript">
var ocultarcapas = true; //false-> despliega un nodo | true-> despliega un nodo y cierra los que estén abiertos
</script>
<!-- ********************************* -->
<style type="text/css">
.nodo {
position: relative;
margin-right: auto;
margin-left: 0;
}
.subNodo {
position: relative;
margin-right: auto;
margin-left: 10;
}
</style>
<script type="text/javascript">
function mostrarOcultar(capa){
var obj = document.getElementById(capa);
if(obj.style.display == 'block') obj.style.display = 'none';
else {
if(ocultarcapas)ocultarCapas(capa.substring(7,8));
obj.style.display = 'block';
}
}
function ocultarCapas(capaActual){
var capa="subNodo";
for(i=1;document.getElementById(capa+i)!=null;++i){
if(capaActual!=i) document.getElementById(capa+i).style.display='none'
}
}
</script>
<html>
<body>
<div class="nodo">
<a onClick='mostrarOcultar("subNodo1")' href="#">Nodo1</a>
</div>
<div class="subNodo" id="subNodo1" style="display:none">
hola, esto es un subnodo<br>
hola, esto es un subnodo
</div>
<div class="nodo">
<a onClick='mostrarOcultar("subNodo2")' href="#">Nodo2</a>
</div>
<div class="subNodo" id="subNodo2" style="display:none">
hola, esto es un subnodo<br>
hola, esto es un subnodo
</div>
</body>
</html>Espero que sea útil 
Comparte este artículo
Trackbacks / Pingbacks
2 Comentarios
Deja un comentario
Hola bichejo, hoy vengo a hacerte un poco de publicidad de mi nuevo blog QUE NO HE CERRADO EL OTRO, EH?? lo que pasa es que hay que renoVarse O MORIR EN EL INTENTO!
Bueno, de todas formas, te dejo el link aquí más abajo por si quieres jadear un poco…. huy!!! he dicho jadear??? Bueno, bueno… miraló tu mismo!
Besos!
http://inaicoolwebsex.blogspot.com/
Escrito el 05/02/08 a las 19:47:18 (#1) ( responder)
Pues me parece muy bien, esos temas tienen mucha pegada, te deseo mucha suerte en tu nuevo blog
Escrito el 06/02/08 a las 08:41:19 (#2) ( responder)