Cuando hablamos de efectos de cierre, no referimos a la forma en que "se ocultará" un objeto contenedor en nuestra web. Entendemos por objeto contenedor a la etiqueta <DIV></DIV>.
La idea es que inicialmente "el contenedor" se muestre hasta tanto el visitante solicite "ocultarlo", en ese momento le cerramos "el contenedor" y todo su contenido aplicando alguno de los efectos de cierre que ofrece Scriptaculous.
Entonces comenzamos por crear un objeto contenedor, identificándolo mediante el atributo id:
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, una imagen, etc.
<div id="contenedor">
Este es el contenido de mi contenedor
</div>
Ahora debemos mostrar nuestro contenedor, para esto utilizamos el atributo display:block 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:block;'>
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 cerrar 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 ocultar nuestro contenedor. Supongamos que la función se llama ocultar_contenido:
<div id="contenedor" style='display:block;'>
Este es el contenido de mi contenedor
</div>
<input type="button" value="Ver contenido" onclick="ocultar_contenido()">
Ahora veamos nuestra función javascript:
<javascript>
function ocultar_contenido(){
$('contenedor').hide();
}//fin ocultar_contenido
</javascript>
$('contenedor') es la función Prototype que nos permite identificar a nuestro contenedor dentro del DOM de nuestra página y hide() 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 ocultar_contenido(){
$('contenedor').show();
}//fin ocultar_contenido
</javascript>
<style>
#contenedor{
width: 200px;
height: 200px;
background-color: #CCCCCC;
}
</style>
</head>
</head>
<body>
<div id="contenedor" style='display:block;'>
Este es el contenido de mi contenedor
</div>
<input type="button" value="Ver contenido" onclick="ocultar_contenido()">
</body>
</html>
No hay comentarios:
Publicar un comentario