Ver ficha con pestañas
noelia
27 de Mayo del 2004
hola amig@s necesito ayuda para hacer una cosita en java script.
Quiero mostrar una ficha en la que el numero de datos a mostrar es muy grande.
La idea es hacer una pagina con los datos separados en grupos y organizarlo en pantalla con pestañas, estilo windows en las propiedades de un fichero.
Tengo entendido que esto es javascript pero no estoy segura. Alguien me podria echar una mano?
Muchas gracias, un sludo a tod@s.
Quiero mostrar una ficha en la que el numero de datos a mostrar es muy grande.
La idea es hacer una pagina con los datos separados en grupos y organizarlo en pantalla con pestañas, estilo windows en las propiedades de un fichero.
Tengo entendido que esto es javascript pero no estoy segura. Alguien me podria echar una mano?
Muchas gracias, un sludo a tod@s.
rsalvadores
27 de Mayo del 2004
Hay muchas formas de hacer lo de las pestañas, te envio una simple que te servirá para ver el funcionamineto, después puede complicarlo todo lo que tu quieras.
Una forma que queda muy bien, consiste en que las pestañas sean imagenes de todo el menu, con la opción elgida vista,separadas con barra inclinada... etc, y según cual este activa ocultas las demás para dejar esa visible. Si te lo curras un poco puede quedar muy bien.
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
function cambia(_num){
for (i=1;i<=4;i++) document.getElementById("Layer"+i+"").style.display="none"
for (i=1;i<=4;i++) document.getElementById("Layer5"+i+"").style.background="#CCCCCC"
document.getElementById("Layer"+_num+"").style.display="block"
document.getElementById("Layer5"+_num+"").style.background="#999999"
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div id="Layer1" style="position:absolute; left:53px; top:92px; width:216px; height:183px; z-index:1; ;background-color: #999999; layer-background-color: #999999; border: 1px none #000000;display:bloque">
<p align="center"> </p>
<p align="center"><font size="7" color="#FF0000">1</font></p>
</div>
<div id="Layer2" style="position:absolute; left:53px; top:92px; width:216px; height:183px;z-index:2; background-color: #999999; layer-background-color: #999999; border: 1px none #000000;display:none">
<p align="center"> </p>
<p align="center"><font color="#FF0000" size="7">2</font></p>
</div>
<div id="Layer3" style="position:absolute; left:53px; top:92px; width:216px; height:183px;z-index:2; background-color: #999999; layer-background-color: #999999; border: 1px none #000000;display:none">
<p align="center"> </p>
<p align="center"><font color="#FF0000" size="7">3</font></p>
</div>
<div id="Layer4" style="position:absolute; left:53px; top:92px; width:216px; height:183px; z-index:2; background-color: #999999; layer-background-color: #999999; border: 1px none #000000;display:none">
<p align="center"> </p>
<p align="center"><font size="10" color="#FF0000">4</font></p>
</div>
<div id="Layer5" style="position:absolute; left:53px; top:73px; width:216px; height:20px; z-index:3">
<div id="Layer51" style="position:absolute; left:0px; top:0px; width:54px; height:20px; z-index:1; background-color: #999999; layer-background-color: #999999; border-style:solid;border-width:1;border-color:999999">
<div align="center" onclick="javascript:cambia('1')">Uno</div>
</div>
<div id="Layer52" style="position:absolute; left:54px; top:0px; width:54px; height:20px; z-index:1; background-color: #CCCCCC; layer-background-color: #CCCCCC; border-style:solid;border-width:1;border-color:999999">
<div align="center" onclick="javascript:cambia('2')">Dos</div>
</div>
<div id="Layer53" style="position:absolute; left:108px; top:0px; width:54px; height:20px; z-index:1; background-color: #CCCCCC; layer-background-color: #CCCCCC; border-style:solid;border-width:1;border-color:999999">
<div align="center" onclick="javascript:cambia('3')">Tres</div>
</div>
<div id="Layer54" style="position:absolute; left:162px; top:0px; width:54px; height:20px; z-index:1; background-color: #CCCCCC; layer-background-color: #CCCCCC; border-style:solid;border-width:1;border-color:999999">
<div align="center" onclick="javascript:cambia('4')">Cuatro</div>
</div>
</div>
</body>
</html>
Suerte
rsalvadores
Una forma que queda muy bien, consiste en que las pestañas sean imagenes de todo el menu, con la opción elgida vista,separadas con barra inclinada... etc, y según cual este activa ocultas las demás para dejar esa visible. Si te lo curras un poco puede quedar muy bien.
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
function cambia(_num){
for (i=1;i<=4;i++) document.getElementById("Layer"+i+"").style.display="none"
for (i=1;i<=4;i++) document.getElementById("Layer5"+i+"").style.background="#CCCCCC"
document.getElementById("Layer"+_num+"").style.display="block"
document.getElementById("Layer5"+_num+"").style.background="#999999"
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div id="Layer1" style="position:absolute; left:53px; top:92px; width:216px; height:183px; z-index:1; ;background-color: #999999; layer-background-color: #999999; border: 1px none #000000;display:bloque">
<p align="center"> </p>
<p align="center"><font size="7" color="#FF0000">1</font></p>
</div>
<div id="Layer2" style="position:absolute; left:53px; top:92px; width:216px; height:183px;z-index:2; background-color: #999999; layer-background-color: #999999; border: 1px none #000000;display:none">
<p align="center"> </p>
<p align="center"><font color="#FF0000" size="7">2</font></p>
</div>
<div id="Layer3" style="position:absolute; left:53px; top:92px; width:216px; height:183px;z-index:2; background-color: #999999; layer-background-color: #999999; border: 1px none #000000;display:none">
<p align="center"> </p>
<p align="center"><font color="#FF0000" size="7">3</font></p>
</div>
<div id="Layer4" style="position:absolute; left:53px; top:92px; width:216px; height:183px; z-index:2; background-color: #999999; layer-background-color: #999999; border: 1px none #000000;display:none">
<p align="center"> </p>
<p align="center"><font size="10" color="#FF0000">4</font></p>
</div>
<div id="Layer5" style="position:absolute; left:53px; top:73px; width:216px; height:20px; z-index:3">
<div id="Layer51" style="position:absolute; left:0px; top:0px; width:54px; height:20px; z-index:1; background-color: #999999; layer-background-color: #999999; border-style:solid;border-width:1;border-color:999999">
<div align="center" onclick="javascript:cambia('1')">Uno</div>
</div>
<div id="Layer52" style="position:absolute; left:54px; top:0px; width:54px; height:20px; z-index:1; background-color: #CCCCCC; layer-background-color: #CCCCCC; border-style:solid;border-width:1;border-color:999999">
<div align="center" onclick="javascript:cambia('2')">Dos</div>
</div>
<div id="Layer53" style="position:absolute; left:108px; top:0px; width:54px; height:20px; z-index:1; background-color: #CCCCCC; layer-background-color: #CCCCCC; border-style:solid;border-width:1;border-color:999999">
<div align="center" onclick="javascript:cambia('3')">Tres</div>
</div>
<div id="Layer54" style="position:absolute; left:162px; top:0px; width:54px; height:20px; z-index:1; background-color: #CCCCCC; layer-background-color: #CCCCCC; border-style:solid;border-width:1;border-color:999999">
<div align="center" onclick="javascript:cambia('4')">Cuatro</div>
</div>
</div>
</body>
</html>
Suerte
rsalvadores