menu al estilo outlook

chalchis · #1 (**permalink**) 12/12/2007, 01:57

hola amigos estoy implementadon este menu acordeon

menu div tipo outlook
http://blog.paranoidferret.com/index...cordion-menus/

menu arbol
http://www.destroydrop.com/javascripts/tree/

el detalle es que deseo modificarlo al estilo outlook es decir que cuando abra una opcion del acordeon, mande a las otras opciones hasta abajo de la pagina

estos son mis frames
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PIA Centro Universitario Hispano Mexicano</title>
</head>

<frameset rows="100,*,30" cols="*" frameborder="no" border="0" framespacing="0">
<frame src="cabezera.php" name="" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />
<frameset cols="200,*,175" frameborder="no" border="0" framespacing="0">
<frame src="menu.php" id="frmenu" name="frmenu" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame" />
<frame src="contenido.php" name="frcontenido" id="mainFrame" title="mainFrame" />
<frame src="actividades.php" name="fractividad" scrolling="No" noresize="noresize" id="rFrame" title="rFrame" />
</frameset>
<frame src="estatus.php" name="frestatus" scrolling="No" noresize="noresize" id="pieFrame" title="topFrame" />
</frameset>
<noframes><body>
</body>
</noframes></html>

*****************************
en menu.php implemente el menu de la liga que les acabo de mencionar

el problema es que cuando se abren, solo es hasta cierta altura como le podria hacer para hacer algo como outlook

http://webscripts.softpedia.com/scri...ots-23620.html

saludos espero sus respuestas

chalchis · #2 (**permalink**) 13/12/2007, 15:11

porfin quedo namas hay que optimizar el codigo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="Css/menu.css" rel="stylesheet" type="text/css" />
<link href="Css/dtree.css" rel="stylesheet" type="text/css" />
<script language="javascript">
function maximo()
{
//alert("mensaje ejecutado desde el frame menu");
adaptarAlto();
}
</script>
<title>Documento sin título</title>
</head>
<body >
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" background="../Imagen/inter_menu_bg.jpg">
<table width="191"border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div id="contenedor_menu">
<div id="AccordionContainer" class="AccordionContainer">
<div onclick="expander(1)">
<div class="AccordionTitle">
Accordion 1
</div>
</div>
<div id="Accordion1Content" class="AccordionContent">
<table border="0">
<tr>
<td>
<script type="text/javascript">
dd = new dTree('dd');
dd.add(0,-1,'Procesos');
dd.add(17,0,'Node 17','example01.html');
dd.add(18,0,'Node 18','example01.html');
dd.add(19,0,'Node 19','example01.html');
dd.add(20,0,'Node 20','example01.html');
dd.add(21,0,'Node 21','example01.html');
dd.add(22,0,'Node 22','example01.html');
dd.add(23,0,'Node 23','example01.html');
dd.add(24,0,'Node 24','example01.html');
dd.add(25,17,'Node 25','example01.html');
document.write(dd);
</script>
</td>
</tr>
</table>
</div>
<div onclick="expander(2)">
<div class="AccordionTitle">
Accordion 2
</div>
</div>
<div id="Accordion2Content" class="AccordionContent">
<table width="400" id="tabla_arbol" border="0">
<tr>
<td>
<script type="text/javascript">
d = new dTree('d');
d.add(0,-1,'Catalagos');
d.add(1,0,'Node 1','example01.html');
d.add(2,0,'Node 2','example01.html');
d.add(3,1,'Node 1.1','example01.html');
d.add(4,0,'Node 3','example01.html');
d.add(5,3,'Node 1.1.1','example01.html');
d.add(6,5,'Node 1.1.1.1','example01.html');
d.add(7,0,'Node 4','example01.html');
d.add(8,1,'Node 1.2','example01.html');
d.add(9,0,'My Pictures','example01.html','Pictures I\'ve taken over the years','','','../Imagen/Tree_img/imgfolder.gif');
d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir');
d.add(11,9,'Mom\'s birthday','example01.html');
d.add(12,0,'Node 1.2 Bin','example01.html','','','img/trash.gif');
d.add(13,5,'Node 1.2 Bin1','example01.html');
d.add(14,5,'Node 1.2 Bin2','example01.html');
d.add(15,14,'Node 1.2 Bin2','example01.html');
d.add(16,15,'Node 1.2 Bin2','example01.html');
document.write(d);
</script>
</td>
</tr>
<tr>
<td>
<script type="text/javascript">
ddd = new dTree('ddd');

ddd.add(0,-1,'Consultas');
ddd.add(17,0,'0009','example01.html');
ddd.add(18,17,'00010','example01.html');
ddd.add(19,18,'00020','example01.html');
ddd.add(20,19,'00030','example01.html');
ddd.add(21,0,'00040','example01.html');
ddd.add(22,0,'00050','example01.html');
ddd.add(23,17,'00060','example01.html');

document.write(ddd);
</script>
</td>
</tr>
</table>
</div>
<div onclick="expander(3);">
<div class="AccordionTitle" onselectstart="return false;">
Accordion 3
</div>
</div>
<div id="Accordion3Content" class="AccordionContent">
<table width="400" border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

</div>
<div onclick="expander(4);">
<div class="AccordionTitle" onselectstart="return false;">
Accordion 4
</div>
</div>
<div id="Accordion4Content" class="AccordionContent">
I Am Accordion 4.
</div>
<div onclick="expander(5);">
<div class="AccordionTitle" onselectstart="return false;">
Accordion 5
</div>
</div>
<div id="Accordion5Content" class="AccordionContent">
I Am Accordion 5.
</div>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<script language="javascript">

window.onload = verificarAlto;

var largamiento;
var anterior_modulo;

function verificarAlto()
{
var altoframe=parent.document.getElementById('frmenu') .offsetHeight;
//alert("el frame mide:"+altoframe);
var altocontenedor=document.getElementById('AccordionC ontainer').offsetHeight;
//alert("el contenedor del menu mide:"+altocontenedor);
largamiento=altoframe-altocontenedor;
document.getElementById('contenedor_menu').style.h eight=altoframe+"px";
}

function adaptarAlto()
{
//alert("adaptando");
var nwaltoframe=parent.document.getElementById('frmenu ').offsetHeight;
//alert("el frame mide ahora:"+nwaltoframe);

if(anterior_modulo!=null)
{
document.getElementById(anterior_modulo).style.hei ght=0+"px";
var nwaltocontenedor=document.getElementById('Accordio nContainer').offsetHeight;
//alert("el contenedor ahora mide: "+nwaltocontenedor);
largamiento=0;
var nwlarge=nwaltoframe-nwaltocontenedor;
largamiento=nwlarge;
//alert(nwlarge);
document.getElementById(anterior_modulo).style.hei ght=nwlarge+"px";
}
else
{
//document.getElementById(anterior_modulo).style.hei ght=0+"px";
largamiento=0;
var nwaltocontenedor=document.getElementById('Accordio nContainer').offsetHeight;
var nwlarge=nwaltoframe-nwaltocontenedor;
largamiento=nwlarge;
//alert(nwlarge);
//document.getElementById(anterior_modulo).style.hei ght=nwlarge+"px";
}

}

function expander(indice_modulo)
{
//alert("largo es:"+largamiento);
var idmodulo = "Accordion" + indice_modulo + "Content";
//alert(idmodulo);

if(anterior_modulo!=null)
{

document.getElementById(anterior_modulo).style.hei ght=0+"px";
document.getElementById(anterior_modulo).style.dis play='none';
//alert("anterior es:"+anterior_modulo);
}

if(idmodulo!=anterior_modulo)
{
//alert(largamiento);
document.getElementById(idmodulo).style.height=lar gamiento+"px";
document.getElementById(idmodulo).style.display='b lock';
anterior_modulo=idmodulo;
}
else
{
anterior_modulo=null;
}

}
</script>
</body>
</html>

chalchis · #3 (**permalink**) 13/12/2007, 15:13

en el frame central, la pagina que carga
que se llama
contenido.php

puse este para cuando la ventana cambie de tamaño

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">

</style>
<script language="javascript">
function llamar()
{
top.frmenu.maximo();
}
window.onresize = llamar;
</script>
</head>
<body>
</body>
</html>

chalchis · #4 (**permalink**) 13/12/2007, 15:22

saludos espero sus comentarios

gracias

Jose_Augusto · #5 (**permalink**) 22/02/2008, 06:57

Hola amigos tengo una necesidad,estoy realizando un proyecto y necesito hacer un arbol tipo explorador de windowspero con ciertas caracteristicas peculiares, que se vaya cargando dinamicamente, el proyecto se trata de un arbol de procesos en donde cada proceso contiene "x"cantidad de subprocesos incluidos(hijos) y a la vez cada uno de esos subprocesos tendra x cantidad subprocesos y asi sucesivamente.... como cada proceso tiene sus caracteristicas asociadas necesito que cuando se haga click sobre el nombre de un proceso se carguen sus caracteristicas y cuando se haga click sobre la imagen del signo "+" se desplieguen sus hijos(asi para cada uno de los procesos y subprocesos cargados en el arbol). si alguien entendio esta explicacion y puede darme una posible solucion de antemano se lo agradezco.Saludos desde Venezuela.

Jose_Augusto · #6 (**permalink**) 22/02/2008, 07:05

Ah se me olvidava.. los procesos y subprocesos estan en una base de datos, basicamenteeste arbol quie necesito es una consulta.Saludos

chalchis · #7 (**permalink**) 22/02/2008, 21:01

Pues mira en base ah este script

http://www.destroydrop.com/javascripts/tree/

en base ah ese script hice mi tabla

tambien eh estado observando este

http://dhtmlx.com/docs/products/docs...bbar&type=smpl

saludos