|
||||
|
|
|
|
|
|
|
|||
|
|
|||
|
||||
Home - WebScript - Capas - Cajas 1 - 1 - 2 - 3
Cajasl 1 (III)
por Luciano Moreno, del departamento de diseño web de BJS Software.
Opción en VBScript.-
En el caso de usar Visual Basic Script el código cambia poco, salvo las limitaciones que impone este lenguaje, y que comentamos abajo.
Decir que en este caso deberemos usar Internet Explorer, ya que los navegadores Nestcape Navigator no admiten este tipo de código (salvo que se les añada el plugin adecuado), por lo que queda limitado su uso a trabajos con tecnología ASP bajo plataformas Windows con Internet Explorer.
El código necesario en este caso es el que sigue:
<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:450;height:250;clip:rect(0 450 250
0);
position:absolute;left:150;top:50;
}
.caja
{
background-color:white;layer-background-color:white;
width:450;height:230;clip:rect(0 450 230
0);
position:absolute;left:0;top:18;z-index:1;
border:1px solid
#006600;
font-size:11px;font-family:Verdana,Helvetica;color:black;
padding-left:10px;padding-right:10px;padding-top:20px;padding-bottom:20px;
}
.visto
{
background-color:white;layer-background-color:white;
width:150;height:19;clip:rect(0 150 19
0);
position:absolute;top:0;z-index:3;padding-top:1px;
border-left:1px solid #006600;border-top:1px solid #006600;border-right:1px
solid
#006600;
font-size:11px;font-family:Verdana,Helvetica;color:black;text-align:center;
}
.oculto{
background-color:#ffff99;layer-background-color:#ffff99;
width:150;height:18;clip:rect(0 150 18
0);
position:absolute;top:0;z-index:3;padding-top:2px;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;}
</style>
<script
language="VBScript">
Function
Menu1()
menu10.style.visibility =
"visible"
menu21.style.visibility
= "visible"
menu31.style.visibility =
"visible"
caja1.style.visibility =
"visible"
menu11.style.visibility
= "hidden"
menu20.style.visibility
= "hidden"
menu30.style.visibility
= "hidden"
caja2.style.visibility
= "hidden"
caja3.style.visibility
= "hidden"
End Function
Function
Menu2()
menu11.style.visibility =
"visible"
menu20.style.visibility
= "visible"
menu31.style.visibility =
"visible"
caja2.style.visibility =
"visible"
menu21.style.visibility
= "hidden"
menu10.style.visibility
= "hidden"
menu30.style.visibility
= "hidden"
caja1.style.visibility
= "hidden"
caja3.style.visibility
= "hidden"
End Function
Function
Menu3()
menu11.style.visibility =
"visible"
menu21.style.visibility
= "visible"
menu30.style.visibility =
"visible"
caja3.style.visibility =
"visible"
menu10.style.visibility
= "hidden"
menu20.style.visibility
= "hidden"
menu31.style.visibility
= "hidden"
caja1.style.visibility
= "hidden"
caja2.style.visibility
= "hidden"
End Function
</script>
</head>
<body bgcolor="#ffff99">
<div
id="ventana">
<div id="caja1" class="caja">Contenido de la caja
correspondiente al menu 1</div>
<div id="caja2" class="caja"
style="visibility:hidden;">Contenido de la caja correspondiente al menu
2</div>
<div id="caja3" class="caja"
style="visibility:hidden;">Contenido de la caja correspondiente al menu
3</div>
<div id="menu10" class="visto">menu
1</div>
<div id="menu11" class="oculto"><A class="enlace"
href="#" onClick="Menu1">menu 1</A></div>
<div id="menu20"
class="visto">menu 2</div>
<div id="menu21"
class="oculto"><A class="enlace" href="#" onClick="Menu2">menu
2</a></div>
<div id="menu30" class="visto">menu
3</div>
<div id="menu31" class="oculto"><A class="enlace"
href="#" onClick="Menu3">menu
3</a></div>
</div>
</body>
</html>
El resultado lo tenéis en esta ventana.
Consideraciones:
1) La definición de estilos y capas es la misma que en el caso de JavaScript, ya que los elementos propios de HTML puro no se ven afectados por el lenguaje de script usado.
2) Aparte de usar la sintaxis propia de VBScript para funciones, destacar que en este lenguaje para acceder a las capas no se debe usar "document.all(id)...", ya que los objetos document y all son propios de JavaScript. Para acceder a una capa basta llamarla por su identificador directamente, accediendo luego a sus propiedades de forma análoga a como lo hacemos con JavaScript.
3) Por último, para llamar a las funciones desde los enlaces, no usamos en este caso paréntesis, ya que no se deben usar estos al llamar a subrutinas. Si tuvieramos que pasar argumentos a la función, la sintaxis a usar sería:
onClick = 'Mostrar "capa1" '
Si tenéis dudas podéis consultar la sección de VBScript, y si persisten, escribidme un correo.
 |