Cuando hablamos de efectos de apertura, no referimos a la forma en que "aparecerá" un objeto contenedor en nuestra web. Entendemos por objeto contenedor a la etiqueta <DIV></DIV>.
La idea es que inicialmente "el contenedor" no se muestre hasta tanto el visitante solicite "verlo", en ese momento le mostramos "el contenedor" y todo su contenido aplicando alguno de los efectos de apertura que ofrece Scriptaculous.
Entonces comenzamos por crear un objeto contenedor, identificándolo mediante el atributo id:
<div id="contenedor"></div>
Luego incluimos algún contenido a nuestro contenedor, un texto, una tabla, un formulario, etc.
<div id="contenedor">
Este es el contenido de mi contenedor
</div>
Ahora debemos ocultar nuestro contenedor, para esto utilizamos el atributo display:none de css. Es importante aplicar este atributo en la definición del contenedor. Si lo hacemos desde una hoja de estilos el efecto de Scriptaculous no funcionará.
<div id="contenedor" style='display:none;'>
Este es el contenido de mi contenedor
</div>
Podemos utilizar una hoja de estilo o definir estilos para darle forma a nuestro contenedor
#contenedor{
width: 200px;
height: 200px;
background-color: #CCCCCC;
}
Ahora demos la oportunidad al visitante de ver nuestro contenido oculto, por ejemplo utilizando un botón. La función de éste es llamar a una función javascript que se encargará de mostrar nuestro contenedor oculto. Supongamos que la función se llama mostrar_contenido:
<div id="contenedor" style='display:none;'>
Este es el contenido de mi contenedor
</div>
<input type="button" value="Ver contenido" onclick="mostrar_contenido()">
Ahora veamos nuestra función javascript:
<javascript>
function mostrar_contenido(){
$('contenedor').show();
}//fin mostrar_contenido
</javascript>
$('contenedor') es la función Prototype que nos permite identificar a nuestro contenedor oculto dentro del DOM de nuestra página y show() es el efecto Scriptaculous que se aplica al contenedor identificado. Show es el efecto más básico, más adelante mostraremos efectos de apertura más interesantes.
Lo único que nos falta para que esto funciones es definir correctamente nuestro encabezado HTML e incluir las librerías de Prototype y Sriptaculous
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous/scriptaculous.js"></script>
</head>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous/scriptaculous.js"></script>
</head>
Finalmente el código de este ejemplo nos quedaría así:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous/scriptaculous.js"></script>
<javascript>
function mostrar_contenido(){
$('contenedor').show();
}//fin mostrar_contenido
</javascript>
<style>
#contenedor{
width: 200px;
height: 200px;
background-color: #CCCCCC;
}
</style>
</head>
</head>
<body>
<div id="contenedor" style='display:none;'>
Este es el contenido de mi contenedor
</div>
<input type="button" value="Ver contenido" onclick="mostrar_contenido()">
</body>
</html>
No hay comentarios:
Publicar un comentario