|
||||
|
|
|
|
|
|
|
|||
|
|
|||
|
||||
Home - WebScript - Capas - Cajas 1 - 1 - 2 - 3
Cajas 1 (II)
por Luciano Moreno, del departamento de diseño web de BJS Software.
Opción en JavaScript.-
Vamos pués a crearnos un contenedor principal en el que vamos a incluir cada una de las 3 partes que van a formar nuestra página, situando encima de él 3 pestañas que van a funcionar como elementos de menú.
La idea es que inicialmente se mostrará la capa 1, que contendrá la primera parte de la información a mostrar, quedando las otras dos secciones ocultas. Paralelamente a esto, situaremos encima 6 capas que van a formas las pestañas, 2 por cada opción de menú, una para el estado activo y otra para el inactivo, conteniendo cada una de estas últimas un enlace que llamará a la función encargada de mostrar y ocultar las capas correspondientes.
El código completo, usando JavaScript cross-browser, es el siguiente, que comentamos luego:
<html>
<head>
<title>Untitled</title>
<style type="text/css">
.enlace{font-size:11px;font-family:Verdana,Helvetica;color:#006600;text-decoration:none;}
#ventana{
background-color:white;layer-background-color:white;
width:450px;height:250px;clip:rect(0,450,250,0);
position:absolute;left:75px;top:50px;
}
.caja
{
background-color:#006600;layer-background-color:#006600;
width:450px;height:230px;clip:rect(0,450,230,0);
position:absolute;left:0px;top:18px;z-index:1;
font-size:11px;font-family:Verdana,Helvetica;color:black;
padding-left:10px;padding-right:10px;padding-top:20px;padding-bottom:20px;
}
.fondo{
background-color:white;layer-background-color:white;
width:448px;height:228px;clip:rect(0,448,228,0);
position:absolute;left:1px;top:1px;z-index:1;
font-size:11px;font-family:Verdana,Helvetica;color:black;
padding-left:10px;padding-right:10px;padding-top:20px;padding-bottom:20px;
}
.visto
{
background-color:#006600;layer-background-color:#006600;
width:150;height:19;clip:rect(0 150 19
0);
position:absolute;top:0;z-index:3;padding-top:1px;
font-size:11px;font-family:Verdana,Helvetica;color:black;text-align:center;
}
.oculto{
background-color:white;layer-background-color:white;
width:150;height:18;clip:rect(0 150 18
0);
position:absolute;top:0;z-index:3;padding-top:2px;text-align:center;
}
.fondo2{
background-color:white;layer-background-color:white;
width:148px;height:18px;clip:rect(0,148,18,0);
position:absolute;top:1px;left:1px;
font-size:11px;font-family:Verdana,Helvetica;color:black;text-align:center;
}
#menu10{left:0;}
#menu20{left:150;visibility:hidden;}
#menu30{left:300;visibility:hidden;}
#menu11{visibility:hidden;left:0;}
#menu21{left:150;}
#menu31{left:300;}
#caja1{visibility:visible;}
#caja2{visibility:hidden;}
#caja3{visibility:hidden;}
</style>
<SCRIPT
language="JavaScript">
<!--
n4 = (document.layers)? true:false
ie = (document.all)? true:false
n6 = (document.getElementById)? true:false
function show(id)
{
if (n4)
document.ventana.document.layers[id].visibility =
"show"
else if (ie)
document.all[id].style.visibility =
"visible"
else if (n6)
document.getElementById(id).style.visibility =
"visible"
}
function hide(id)
{
if (n4)
document.ventana.document.layers[id].visibility = "hide"
else if (ie)
document.all[id].style.visibility
= "hidden"
else if (n6)
document.getElementById(id).style.visibility =
"hidden"
}
function
Menu1()
{
show('menu10');
show('menu21');
show('menu31');
hide('menu11');
hide('menu20');
hide('menu30');
show('caja1');
hide('caja2');
hide('caja3');
}
function
Menu2()
{
show('menu11');
show('menu20');
show('menu31');
hide('menu21');
hide('menu10');
hide('menu30');
show('caja2');
hide('caja1');
hide('caja3');
}
function
Menu3()
{
show('menu11');
show('menu21');
show('menu30');
hide('menu10');
hide('menu20');
hide('menu31');
hide('caja1');
hide('caja2');
show('caja3');
}
//-->
</SCRIPT>
</head>
<body>
<div id="ventana">
<div
id="caja1" class="caja"><div class="fondo">Contenido de la caja
correspondiente al menu 1</div></div>
<div id="caja2"
class="caja"><div class="fondo">Contenido de la caja correspondiente al
menu 2</div></div>
<div id="caja3" class="caja"><div
class="fondo">Contenido de la caja correspondiente al menu
3</div></div>
<div id="menu10" class="visto"><div
class="fondo2">menu 1</div></div>
<div id="menu11"
class="oculto"><A class="enlace" href="#" onClick="Menu1()">menu
1</A></div>
<div id="menu20" class="visto"><div
class="fondo2">menu 2</div></div>
<div id="menu21"
class="oculto"><A class="enlace" href="#" onClick="Menu2()">menu
2</a></div>
<div id="menu30" class="visto"><div
class="fondo2">menu 3</div></div>
<div id="menu31"
class="oculto"><A class="enlace" href="#" onClick="Menu3()">menu
3</a></div>
</div>
</body>
</html>
Y el resultado podéis verlo en esta ventana.
Consideraciones:
1) Definimos un contenedor general padre, ventana, dentro del cual vamos a colocar los demás elementos, y que nos va a permitir posicionar con comodidad todo el conjunto.
2) Dentro de él situamos las cajas que van a contener los datos a presentar, caja1, caja2 y caja3, situando dentro de cada una de ellas otra capa, fondo, que nos va a servir para establecer un borde de 1 pixel de color verde alrededor de las cajas.
3) Para implementar las pestañas de menú superior creamos 6 capas prácticamente iguales, 3 para el estado activo (menu10, menu20 y menu30), dentro de las cuales situamos otra capa, con clase fondo2, para crear el borde de 1 pixel, y 3 para el estado inactivo (menu11, menu21 y menu31), que no llevan borde y tienen el color del fondo de la página.
4) Una vez creadas y posicionadas las capas nos metemos con el código JavaScript. Establecemos unas variables globales para manejar cada navegador (ie, n4 y n6), y establecemos primero dos funciones generales, show() e hide(), cuya misión va a ser mostrar u ocultar una capa genérica que reciben como argumento. Esta función debe ser compatible con los 3 navegadores, por lo que accedemos a las capas de forma diferente según el que use nuestro visitante.
5) El paso final es crear una función concreta para cada enlace de menú, que se va a encargar de mostrar y ocultar las capas adecuadas en cada caso.
Creo que si lo estudiáis bien no tendréis ningún problema en entenderlo.
 |
 |