Te hemos preparado varios ejemplos en esta página.

Ejemplo 1 – Opacidad imagen

En este efecto puedes ver la transición de dos imágenes. Para ello, necesitamos dos imágenes superpuestas. Una encima de la otra. Al pasar por encima variamos la opacidad de la que queda por encima y así vemos la imagen de abajo.

El código HTML del ejemplo:

<div style=”height: 320px;” >
<div style=”position: relative; margin: 20px;”>
<div style=”width: 400px; height: 300px; position:absolute; top:0; left: 0;”>
<img src=”paisaje.jpg” width=”400″ height=”300″/>
</div>
<div style=”width: 400px; height: 300px; position:absolute; top:0; left: 0;”>
<img src=”paisaje_bn.jpg” width=”400″ height=”300″/>
</div>
</div>

El código js:

<script type=”text/javascript”>
$(“.img_bn”).bind( “mouseenter”, function(e)
{
$(this).stop();
$(this).animate({ opacity: 0.0 }, 500 );
});
$(“.img_bn”).bind( “mouseleave”, function(e)
{
$(this).stop();
$(this).animate({ opacity: 1 }, 500 );
});
</script>

Como puedes ver asociamos los eventos mouseenter y mouseleave a dos funciones que varían la opacidad de la imagen a 0 o 1. Para ello llamamos a la función animate pasando los cambios que queramos aplicar al CSS y el tiempo en milisegundos que ha de tardar el efecto.

La función stop() sirve para parar todos los efectos que están en marcha sobre uno o varios objetos.

Ejemplo 2 – Tamaño de imagen

En este ejemplo aplicamos un cambio de tamaño a la imagen. Para ello el código js es:

<script type=”text/javascript”>
$(“#ej_img”).bind( “mouseenter”, function(e)
{
$(this).stop();
$(this).animate({ height: 300, width: 400 }, 500 );
});
$(“#ej_img”).bind( “mouseleave”, function(e)
{
$(this).stop();
$(this).animate({ height: 150, width: 200 }, 500 );
});
</script>

Ejemplo 3 – Tamaño de texto

Aquí puedes ver como variamos el tamaño de la fuente del texto. El código js es:

<script type=”text/javascript”>
$(“#ej3_p”).bind( “mouseenter”, function(e)
{
$(this).stop();
$(this).animate({ fontSize: 20 }, 500 );
});
$(“#ej3_p”).bind( “mouseleave”, function(e)
{
$(this).stop();
$(this).animate({ fontSize: 10 }, 500 );
});
</script>

Ejemplo 4 – Varios efectos en uno

Podemos hacer que se ejecuten varios efectos. Uno después del otro. Para ello solo iremos concatenando los efectos. En el ejemplo el código js es:

<script type=”text/javascript”>
$(“#ej4_div”).bind( “click”, function(e)
{
$(this).animate({ left: 150 }, 500 )
.animate({ top:50, left:200 }, 250 )
.animate({ top:0, left: 250 }, 1500 )
.animate({ left: 400 }, 500 )
.animate({ top: 400 }, 500 )
.animate({ left: 200 }, 500 )
.animate({ top: 0, left: 0 }, 500 );
});
</script>

Hay varias formas de asignar una función a un evento. Nosotros usaremos al método bind de Jquery. Este evento recibe ( obligatoriamente ) dos parametros.

bind( evento, funcion )

Los posibles eventos son: blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick,  mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select,  submit, keydown, keypress, keyup, error.

Os hemos preparado cuatro ejemplos para que comprobéis la sencillez de su uso. Podéis verlos en acción en este enlace. Cualquier duda que os surja no dudéis en comentarla.

Ejemplo 1 – Click \ Dblclick

En este ejemplo enlazamos los eventos click y doble click a un div. Cuando se lanza el evento llamamos a una función que cambia el texto que hay dentro del segundo div.

HTML:

<div style=”position: relative; height: 100px; margin: 20px;”>
<div id=”div_ejemplo1″ style=”width: 100px; height: 100px; background:#FF0000; position:absolute; top:0; left: 0;”></div>
<div id=”div_ejemplo1_texto” style=”padding: 10px; height: 80px; position:absolute; top:0; left: 110px; “>Haz click o doble click en el cuadrado</div>
</div>

Javascript:

<script type=”text/javascript”>
$(“#div_ejemplo1″).bind( “click”, function(e)
{
var str = “Has echo click en el cuadrado en el punto (” + e.pageX + “,” + e.pageY + “)”;
$(“#div_ejemplo1_texto”).text( str );
});
$(“#div_ejemplo1″).bind( “dblclick”, function(e)
{
var str = “Has echo doble click en el cuadrado en el punto (” + e.pageX + “,” + e.pageY + “)”;
$(“#div_ejemplo1_texto”).text( str );
});
</script>

Ejemplo 2 – Mouseenter \ Mouseleave

En este ejemplo puedes ver como cambiamos la clase del primer div al entrar y salir en el div.

HTML:

<div style=”position: relative; height: 100px; margin: 20px;”>
<div id=”div_ejemplo2″ style=”width: 100px; height: 100px; position:absolute; top:0; left: 0;”></div>
<div id=”div_ejemplo2_texto” style=”padding: 10px; height: 80px; position:absolute; top:0; left: 110px; “>Pasa por encima del cuadrado</div>
</div>

CSS:

<style>
#div_ejemplo2 { background: #FF0000; }
#div_ejemplo2.over { background: #00FF00; }
</style>

Javascript:

<script type=”text/javascript”>
$(“#div_ejemplo2″).bind( “mouseenter mouseleave”, function(e)
{
$(“#div_ejemplo2″).toggleClass(“over”);
});
</script>

Ejemplo 3 – Añadir \ Eliminar eventos

Igual que enlazamos eventos con el método bind, también puedes eliminar este enlace. Para ello llamaremos al método unbind. En este ejemplo:

$(“#div_ejemplo3″).unbind( “mouseenter” );

Ejemplo 4 – Alternar funciones en Click

La verdad es que no le veo la utilidad a esta función. Con ella puedes ejecutar varias funciones con el evento click de un objeto. Las funciones no se ejecutan a la vez, sino que van alternándose. Una cada vez. Para ello llamaremos a la función toggle. En el ejemplo lo utilizamos para ir cambiando el color de fondo del div. El código js es:

<script type=”text/javascript”>
$(“#div_ejemplo4″).toggle(
function() { $(“#div_ejemplo4″).css({“background”:”#099000″ })},
function() { $(“#div_ejemplo4″).css({“background”:”#00FF00″ })},
function() { $(“#div_ejemplo4″).css({“background”:”#000990″ })},
function() { $(“#div_ejemplo4″).css({“background”:”#0000FF” })},
function() { $(“#div_ejemplo4″).css({“background”:”#900009″ })},
function() { $(“#div_ejemplo4″).css({“background”:”#FF0000″ })}
);
</script>

En este caso, te vamos a mostrar varios de ellos que están incluidos en Jquery User Interface. Para poder usar estos widgets en tus webs puedes descargarte la librería en este enlace. Deberas incluir los scripts en tus páginas añadiendo a tu cabecera HTML:

<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript” src=”jquery-ui-1.7.2.custom.min.js”></script>
<link type=”text/css” href=”css/smoothness/jquery-ui-1.7.2.custom.css” rel=”stylesheet” />

Puedes ver los ejemplos en este enlace.

Ejemplo 1 – Acordeón

Este widget te permite poner varios divs que se muestran y esconden haciendo un efecto de acordeón. Para crear este widget necesitas una parte del código en HTML

<div id=”div_acordeon”>
<h3><a href=”#”>Contenido 1</a></h3>
<div>
<p>Aquí puedes poner el contenido de la primera division.</p>
</div>
<h3><a href=”#”>Contenido 2</a></h3>
<div>
<p>Aquí puedes poner el contenido de la segunda division.</p>
</div>
<h3><a href=”#”>Contenido 3</a></h3>
<div>
<p>Aquí puedes poner el contenido de la tercera division.</p>
Campo 1: <input type=”text” name=”texto” /><br/>
Campo 2: <input type=”password” name=”pass” />
</div>
</div>

La otra parte del código es javascript:

$(document).ready(function(){ $(“#div_acordeon”).accordion(); });

Con esta linea de js definimos que el div con identificador div_acordeon es el que contiene todos los títulos y los divs que se mostrarán y esconderán.

Ejemplo 2 – Calendario

Puedes añadir un calendario facilmente con este widget. Hay dos opciones. Definir el calendario sobre un div, siempre sera visible, o definirlo sobre un campo de texto, el calendario se mostrara cuando entren en el campo.

Para ello tenemos los codigos HTML:

<div id=”div_calendario”></div>
Campo de fecha: <input id=”text_calendario” type=”text”></p>

El código js para crear el calendario es:

$(document).ready(function(){ $(“#div_calendario”).datepicker({ dateFormat: ‘dd/mm/yy’ }); });
$(document).ready(function(){ $(“#text_calendario”).datepicker({ dateFormat: ‘dd/mm/yy’ }); });

Ejemplo 3 – Diálogo

Para los diálogos modales deberemos crear un div para cada uno de ellos con el contenido de estos. En el ejemplo hemos creado estos tres

<div id=”dialogo” title=”Titulo del diálogo modal”>
<p>Aquí puedes escribir el texto que desees</p>
</div>

<div id=”confirmacion” title=”Titulo de la confirmación modal”>
<p><span style=”float:left; margin:0 7px 20px 0;”></span>Texto de confirmación. Esta seguro?</p>
</div>

<div id=”formulario” title=”Titulo del formulario”>
<form>
<fieldset>
<label for=”name”>Nombre</label><br/>
<input type=”text” name=”name” id=”name” /><br/>
<label for=”email”>Correo</label><br/>
<input type=”text” name=”email” id=”email” value=”" /><br/>
<label for=”password”>Contraseña</label><br/>
<input type=”password” name=”password” id=”password” value=”" />
</fieldset>
</form>
</div>

El código js es:

$(function() {
$(“#dialogo”).dialog({ bgiframe: true, modal: true, autoOpen: false });
});

$(function() {
$(“#confirmacion”).dialog({ bgiframe: true, modal: true, autoOpen: false,
overlay: { backgroundColor: ‘#000′, opacity: 0.5 },
buttons: { ‘Aceptar’: function() { $(this).dialog(‘close’); },
‘Cancelar’: function() { $(this).dialog(‘close’); }
} }); });

$(“#formulario”).dialog({ bgiframe: true, autoOpen: false, height: 300, modal: true, resizable: false,
buttons: { ‘Aceptar’: function() { $(this).dialog(‘close’); },
‘Cancelar’: function() { $(this).dialog(‘close’); }
}, });

Para abrir un diálogo utilizamos el código js siguiente

$(“#dialogo”).dialog(‘open’);

Ejemplo 4 – Pestañas

El código HTML es:

<div id=”div_tabs”>
<ul>
<li><a href=”#tab1″>Pestaña 1</a></li>
<li><a href=”#tab2″>Pestaña 2</a></li>
<li><a href=”#tab3″>Pestaña 3</a></li>
</ul>
<div id=”tab1″>
<p>Aquí puedes poner el contenido de la primera pestaña.</p>
</div>
<div id=”tab2″>
<p>Aquí puedes poner el contenido de la segunda pestaña.</p>
</div>
<div id=”tab3″>
<p>Aquí puedes poner el contenido de la tercera pestaña.</p>
</div>
</div>

Y el js:

$(function() { $(“#div_tabs”).tabs(); });

Ejemplo 5 – Cambiar los themes, CSS

Puedes cambiar el estilo de los widgets modificando el fichero CSS. Otra forma más fácil de crear tu propio tema es utilizando la herramienta ThemeRoller que Jquery pone a tu disposición. Puedes modificar el estilo en linea y cuando sea de tu agrado descargarte el fichero CSS que lo define.

Puedes probar esta herramienta en este ejemplo y modificar el estilo de todos los ejemplos.

Como siempre, puedes ver los ejemplos en funcionamiento en una página a parte. Pulsa este enlace si quieres verlos.

Ejemplo 1 – Mostrar / Ocultar

En este ejemplo puedes ver como se muestran y ocultan unos divs. El efecto hace que se oculten y muestren por el borde superior izquierdo. Para ello estamos utilizando el código:

• $(‘.div_ejemplo1′).show(“5″): Muestra todos los objetos de la clase div_ejemplo1.
• $(‘.div_ejemplo1′).hide(“5″): Oculta todos los objetos de la clase div_ejemplo1.
• $(‘.div_ejemplo1′).toggle(“5″): Muestra o oculta, alternando según el estado en el que se encuentren, todos los objetos de la clase div_ejemplo1.

Como ves, utilizamos los selectores que os explicamos en el post Jquery, escribe menos, haz más. Por lo tanto los efectos se pueden aplicar sobre un solo objeto, sobre varios, todos los de la misma clase…

Ejemplo 2 – Deslizar

Este ejemplo es similar al anterior pero el efecto muestra y oculta los divs deslizandolos a la parte superior. Utilizamos el código:

• $(‘.div_ejemplo2′).slideDown(): Muestra todos los objetos de la clase div_ejemplo2.
• $(‘.div_ejemplo2′).slideUp(): Oculta todos los objetos de la clase div_ejemplo2.
• $(‘.div_ejemplo2′).slideToggle(): Muestra o oculta, alternando según el estado en el que se encuentren, todos los objetos de la clase div_ejemplo1.

Ejemplo 3 – Opacidad

Este ejemplo utiliza la opacidad de los divs para crear el efecto. El código:

• $(‘.div_ejemplo3′).fadeIn(): Muestra todos los objetos de la clase div_ejemplo3.
• $(‘.div_ejemplo3′).fadeOut(): Oculta todos los objetos de la clase div_ejemplo3.

Ejemplo 4

En este ejemplo puedes ver como los efectos no solo funcionan sobre divs. Aquí los utilizamos con un párrafo y con un enlace.

Estas librerías te ayudan a acceder a los objetos que forman tu pagina web, controlar los eventos, crear animaciones, ajax…

Puedes descargarte la ultima versión de la librería en la página oficial de Jquery. Una vez la tengas debes incluirla en el código HTML de tu página. Para ello, ya sabes que debes incluir en la cabecera el siguiente código:

<script type=”text/javascript” src=’jquery.js’></script>

Ahora ya estas listo para empezar.

Selectores de objetos

Si no utilizas ninguna librería, puedes seleccionar un objeto del DOM utilizando alguna de las sentencia:

• document.getElementById( ‘Identificador’ )
• document.getElementByName( ‘nombre )
• document.getElementByTagName( ‘nombre )

Con Jquery seleccionamos los objetos utilizando $(”). Puedes seleccionar utilizando:

• $( ‘#div_cabecera’ ): Esta sentencia nos devuelve el conjunto de objetos con identificador div_cabecera.
• $( ‘div’ ): Nos devuelve el conjunto de objetos del tipo div.
• $( ‘.div_cabecera’ ): Nos devuelve el conjunto de objetos de la clase div_cabecera. Podemos escribir varias clases a la vez, $( ‘.clas1.clas2′ ), y nos devolverá el conjunto de objetos que tienen ambas clases.
• $( ‘*‘ ): Nos devuelve el conjunto de todos los objetos.

Podemos utilizar varios selectores separados por comas en la misma sentencia. Podemos escribir $( ‘#cabecera, div’ ) para trabajar con todos los objetos con identificador cabecera mas todos los divs.

Puedes ver mas sobre los selectores en la documentación de Jquery

Seguiré hablando de Jquery en los siguientes Post.