Foros del Web » Programando para Internet » Javascript »

Arbol expansible

 Estas en el tema de Arbol expansible en el foro de Javascript en Foros del Web. Hola buenas, estoy creando un árbol expansible y a la hora de la verdad me surgen varios problemas. Os coloco el código que he creado ...
  #1 (permalink)  
Antiguo 03/12/2008, 05:12
 
Fecha de Ingreso: noviembre-2008
Mensajes: 10
Antigüedad: 15 años, 5 meses
Puntos: 0
Arbol expansible
Hola buenas, estoy creando un árbol expansible y a la hora de la verdad me surgen varios problemas. Os coloco el código que he creado de ejemplo y os remarco en donde me estan surgiendo problemas haber si me podeis hechar una mano.

Código: 
<html>

<head>

<title>Arbol de foros</title>

<style>
DIV.clTop{position:absolute; width:350px}
DIV.clSub{position:absolute; left:0px; top:25px; width:350px}
#foro{position:relative; left:0px; top:0px; height:400px; width:350px;}
A.clMain{font-family:Arial; font-size:15px; text-decoration:none; font-weight:bold; color:black}
A.clSubb{font-family:Arial; font-size:13px; text-decoration:none; color:black}
#divMain{position:absolute}
</style>

<script language="JavaScript">

var Estado=false
var exImg=new Image(); exImg.src='file:///Y:/Documentos%20de%20trabajo/imagenes_peoplesoft/iconos%20pequeños/expandir.gif'
var unImg=new Image(); unImg.src='file:///Y:/Documentos%20de%20trabajo/imagenes_peoplesoft/iconos%20pequeños/contraer.gif'

var n = (document.layers) ? 1:0;
var ie = (document.all) ? 1:0;
var navegador=((n || ie) && parseInt(navigator.appVersion)>=4)


function makeMenu(obj,nest){
	nest=(!nest) ? '':'document.'+nest+'.'										
	this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style')					
   	this.ref=(n) ? eval(nest+'document.'+obj+'.document'):eval('document');		
	this.height=n?this.ref.height:eval(obj+'.offsetHeight')
	this.x=(n)? this.css.left:this.css.pixelLeft;this.y=(n)? this.css.top:this.css.pixelTop;							
	this.hideIt=ocultar;	
	this.showIt=mostrar; 
	this.vis=visualizar; 
	this.moveIt=posicion											
	return this
}

function mostrar(){this.css.visibility="visible"}
function ocultar(){this.css.visibility="hidden"}
function visualizar(){if(this.css.visibility=="hidden" || this.css.visibility=="hide") return true;}
function posicion(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y}

function menu(num){
	if(navegador){
		if(!Estado){
			for(i=0;i<tema.length;i++){
				if(i!=num){
					tema[i].hideIt()
					grupo[i].ref["imgA"+i].src=unImg.src
				}
			}
			for(i=1;i<grupo.length;i++){
				grupo[i].moveIt(0,grupo[i-1].y+grupo[i-1].height)
			}
		}
		if(tema[num].vis()){
			tema[num].showIt()
			grupo[num].ref["imgA"+num].src=exImg.src
		}else{
			tema[num].hideIt()
			grupo[num].ref["imgA"+num].src=unImg.src
		}
		for(i=1;i<grupo.length;i++){ 
			if(!tema[i-1].vis()) grupo[i].moveIt(0,grupo[i-1].y+grupo[i-1].height+tema[i-1].height) 
			else grupo[i].moveIt(0,grupo[i-1].y+grupo[i-1].height)
		}
	}
}


function init(){

	grupo=new Array();
	grupo[0]=new makeMenu('parte1','foro');
	grupo[1]=new makeMenu('parte2','foro');
	grupo[2]=new makeMenu('parte3','foro');

	tema=new Array();
	tema[0]=new makeMenu('Sub1','foro.document.parte1');
	tema[1]=new makeMenu('Sub2','foro.document.parte2');
	tema[2]=new makeMenu('Sub3','foro.document.parte3');
	for(i=0;i<tema.length;i++){ tema[i].hideIt() }
	for(i=1;i<grupo.length;i++){ grupo[i].moveIt(0,grupo[i-1].y+grupo[i-1].height) }
}



if(navegador) onload=init;
</script></head>

<body>
<div id="foro">

<!-- PRIMER GRUPO -->
<div id="parte1" class="clTop"><a href="#" onclick="menu(0); return false">
<table style="width: 100%">
<td style="width: 1915px; height: 23px;"><img src=contraer.gif name="imgA0" alt="" border="0" width="12" height="11">
<a class="clMain"> PRIMER GRUPO</a></td> 
<td style="width: 291px; height: 23px;"><a class="clTop href="">&nbsp;<img src="file:///Y:/Documentos%20de%20trabajo/imagenes_peoplesoft/iconos%20pequeños/PersonasRol.gif" width="15" height="17" alt="Ver personas del rol"></a>
<a class="clTop href="">&nbsp;<img src="file:///Y:/Documentos%20de%20trabajo/imagenes_peoplesoft/iconos%20pequeños/Globo.gif" width="19" height="19" alt="Nuevo tema"></a><br></td>
</table>

<!-- DIVISIÓN DE LOS TEMAS DEL GRUPO -->
<div id="Sub1" class="clSub"> 
<table style="width: 100%">
<tr>
	<td style="width: 291px; height: 23px;"><a href="" class="clSubb">
	<IMG SRC="file:///Y:/Documentos%20de%20trabajo/imagenes_peoplesoft/iconos%20pequeños/Boton_tema.gif"  BORDER="0" VALIGN=middle HSPACE=8 width="15" height="15" alt="Ver tema">Primer enlace</a><br></td>
	<td style="width: 12px; height: 23px;" class="clSubb">5</td>
</tr>

<tr>
	<td style="width: 291px; height: 23px;"><a href="" class="clSubb">
	<IMG SRC="file:///Y:/Documentos%20de%20trabajo/imagenes_peoplesoft/iconos%20pequeños/Boton_tema.gif"  BORDER="0" VALIGN=middle HSPACE=8 width="15" height="15" alt="Ver tema">Segundo enlace</a><br></td>
	<td style="width: 12px; height: 23px;" class="clSubb">5</td>
</tr>

<tr>
	<td style="width: 291px; height: 23px;"><a href="" class="clSubb">
	<IMG SRC="file:///Y:/Documentos%20de%20trabajo/imagenes_peoplesoft/iconos%20pequeños/Boton_tema.gif"  BORDER="0" VALIGN=middle HSPACE=8 width="15" height="15" alt="Ver tema">Tercer enlace</a><br></td><td style="width: 12px; height: 23px;" class="clSubb">5</td>
</tr>

</table>
</div><BR>
</div>
-Primer Problema. Si a la función init la modifico de tal forma para rellenar un array el arbol ya no funciona, yo creo que es por los parámetros que paso.
Código: 
function init(N,T){

	grupo=new Array();
           for(i=0;i=N;i++){
	grupo[i]=new makeMenu('parte'+(i+1),'foro');}

	tema=new Array();
           for (i=0;i=T;i++){
	tema[i]=new makeMenu('Sub'+(i+1),'foro.document.parte'+(i+1));}

	for(i=0;i<tema.length;i++){ tema[i].hideIt() }
	for(i=1;i<grupo.length;i++){ grupo[i].moveIt(0,grupo[i-1].y+grupo[i-1].height) }
}

if(navegador) onload=init(2,3);

- Segundo Problema. Si en el body del cuerpo le inserto una tabla por ordenación de las imagenes que inserto resulta que los enlaces de las mismas y lo que se encuentra dentro del grupo se comporta igual que el expandir o contraer el árbol y no redirigiendome a la pagina deseada. Sin embargo, si quito las tablas del código los enlaces funcionan correctamente.

Código: 
<div id="parte1" class="clTop"><a href="#" onclick="menu(0); return false">
<table style="width: 100%">
<td style="width: 1915px; height: 23px;"><img src=contraer.gif name="imgA0" alt="" border="0" width="12" height="11">
<a class="clMain"> PRIMER GRUPO</a></td> 
<td style="width: 291px; height: 23px;"><a class="clTop href="">&nbsp;<img src="file:///Y:/Documentos%20de%20trabajo/imagenes_peoplesoft/iconos%20pequeños/PersonasRol.gif" width="15" height="17" alt="Ver personas del rol"></a>
<a class="clTop href="">&nbsp;<img src="file:///Y:/Documentos%20de%20trabajo/imagenes_peoplesoft/iconos%20pequeños/Globo.gif" width="19" height="19" alt="Nuevo tema"></a><br></td>
</table>

<!-- DIVISIÓN DE LOS TEMAS DEL GRUPO -->
<div id="Sub1" class="clSub"> 
<table style="width: 100%">
<tr>
	<td style="width: 291px; height: 23px;"><a href="" class="clSubb">
	<IMG SRC="file:///Y:/Documentos%20de%20trabajo/imagenes_peoplesoft/iconos%20pequeños/Boton_tema.gif"  BORDER="0" VALIGN=middle HSPACE=8 width="15" height="15" alt="Ver tema">Primer enlace</a><br></td>
	<td style="width: 12px; height: 23px;" class="clSubb">5</td>
</tr>
</table>
  #2 (permalink)  
Antiguo 04/12/2008, 00:56
 
Fecha de Ingreso: noviembre-2008
Mensajes: 10
Antigüedad: 15 años, 5 meses
Puntos: 0
Respuesta: Arbol expansible
oyeeeeee ¿nadie me puede echar un cable?
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 22:56.