Ejemplo de efectos e interacción en jQuery
En el siguiente ejemplo vamos a mostrar un uso sencillo de las funciones de efectos de jQuery. Vamos a implementar un
simple efecto de ocultar y mostrar un elemento de la página web.
Podemos ver el ejemplo en marcha en una página aparte.
Como hemos podido ver, vamos a tener una capa y un par de enlaces. Con jQuery haremos que al pulsar los enlaces se
oculte y se muestre la capa, con las funciones de la librería Effects.
Para comenzar, este es el código HTML del ejemplo, que comprende tanto la capa como los enlaces.
<div id="capaefectos" style="background-color: #cc7700; color:fff; padding:10px;">
Esto es una capa que nos servirá para hacer efectos!
</div>
<p>
<a href="#" id="ocultar">Ocultar la capa</a> |
<a href="#" id="mostrar">Mostrar la capa</a>
</p>
Ahora viene la parte interesante, que es en la que asociamos eventos a estos dos enlaces y codificamos las llamadas a las
funciones de Effects, que harán que se muestre y oculte la capa.
El código Javascript, que hace uso de jQuery sería el siguiente:$(document).ready(function(){
$("#ocultar").click(function(event){
event.preventDefault();
$("#capaefectos").hide("slow");
});
$("#mostrar").click(function(event){
event.preventDefault();
$("#capaefectos").show(3000);
});
});
Como se puede ver, primero tenemos que definir el evento ready del objeto $(document), para hacer cosas cuando el documento está preparado para recibir acciones. Luego se define el evento click sobre cada uno de los dos enlaces. Para ello invoco el método click sobre el enlace, que hemos seleccionado con jQuery a través del identificador de la etiqueta A.
$("#ocultar").click(function(event){
Con esto estoy definiendo el evento clic sobre el elemento con id="ocultar".
Nota: leer el artículo anterior Pasos para utilizar jQuery en tu página web, en el que hablábamos sobre eventos y otras generalidades de este
framework Javascript. Podremos encontrar explicaciones más detalladas sobre cómo definir eventos Javascript con jQuery.
Dentro de la función a ejecutar cuando se hace clic, se coloca la llamada a la función de los efectos.
$("#capaefectos").hide("slow");
Esto hace que nuestra capa, a la que habíamos puesto el identificador (atributo id) "capaefectos", se oculte. Pasamos el
parámetro "slow" porque queremos que el efecto sea lento.
Ahora veamos la función de los efectos con otra llamada:
$("#capaefectos").show(3000);
Esto hace que se muestre el elemento con id "capaefectos", y que el proceso de mostrarse dure 3000 milisegundos.
No hay más complicaciones, así que si habéis entendido esto ya sabéis hacer efectos simples pero atractivos con jQuery en
vuestra página web. Ahora podréis ver el código completo de este ejemplo creado por DesarrolloWeb.com para demostrar el
uso de efectos.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Efectos con jQuery</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#ocultar").click(function(event){
event.preventDefault();
$("#capaefectos").hide("slow");
});
$("#mostrar").click(function(event){
event.preventDefault();
$("#capaefectos").show(3000);
});
});
</script>
</head>
<body>
<div id="capaefectos" style="background-color: #cc7700; color:fff; padding:10px;">
Esto es una capa que nos servirá para hacer efectos!
<br>
<br>
Pongo este texto simplemente de prueba
</div>
<p>
<a href="#" id="ocultar">Ocultar la capa</a> |
<a href="#" id="mostrar">Mostrar la capa</a>
</p>
</body>
</html>
Por último, pongo el enlace de nuevo al ejemplo en marcha.
Como se ha podido comprobar, hacer efectos con jQuery es bastante sencillo. Claro que hay otros detalles importantes y
otros tipos de efectos y funcionalidades de personalización de los mismos, pero esto nos ha servido para demostrar lo
sencillo que es trabajar con este framework Javascript. En siguientes artículos seguiremos explorando casos de uso típicos de
jQuery.
No hay comentarios:
Publicar un comentario