JQuery: Asignar un controlador al evento click de un enlace
16 agosto 2012 2 comentarios
Sencillo ejemplo que muestra como ejecutar una funcion al hacer click en un enlace con JQuery. El ejemplo basicamente consiste en dos enlaces y dos capas (DIVS), el primer enlace al darle click calcula un numero aleatorio y lo muestra en las dos capas. Cada capa inicialmente tiene una hoja de estilos diferente. El segundo enlace al darle click intercambia las hojas de estilos de cada capa.
A continuacion copio el codigo completo del ejemplo:
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>.::Ejemplo2 con JQuery::.</title>
<script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
var miPaginaWeb = $(document);
miPaginaWeb.ready(inicializaJQuery);
function inicializaJQuery() {
$('#capa1').html("Contenido DIV1"); //Texto por default de capa1
$('#capa2').html("Contenido DIV2"); //Texto por default de capa2
var miEnlace = $('#enlace');
//Asignar funcion controladora a evento click del enlace 1
miEnlace.click(actualizaNumAleatorio);
var miEnlace2 = $('#enlace2');
//Asignar funcion controladora a evento click del enlace 2
miEnlace2.click(intercambiaClases);
}
//Funcion controladora de evento del enlace 1
function actualizaNumAleatorio() {
var miCapa = $('#capa1');
var num = Math.random()*100; //Calcular primer numero
miCapa.html("Numero aleatorio: "+num);
var miCapa2 = $('#capa2');
var num = Math.round(Math.random()*100); //Calcular y redondear segundo numero
miCapa2.html("Otro aleatorio: "+num);
}
//Funcion controladora de evento click del enlace 2
function intercambiaClases() {
var miCapa = $('#capa1');
var miCapa2 = $('#capa2');
//Obtener el nombre de la clase asignada al Div1
var claseActual = $('#capa1').attr('class');
if( claseActual=='estilo1' ) {
miCapa.removeClass("estilo1");
miCapa.addClass("estilo2");
miCapa2.removeClass("estilo2");
miCapa2.addClass("estilo1");
}
else {
miCapa.removeClass("estilo2");
miCapa.addClass("estilo1");
miCapa2.removeClass("estilo1");
miCapa2.addClass("estilo2");
}
}
</script>
</head>
<style type="text/css">
<!--
.estilo1 {
font-size:22px;
color:#FF8800;
font-weight:bold;
text-shadow:1px 1px 1px #8BD4EF;
}
.estilo2 {
font-size:16px;
color:#9F28D6;
font-weight:bold;
text-shadow:1px 1px 1px #CCFF66;
}
-->
</style>
<body>
<div class="estilo1" id="capa1"> </div>
<br/>
<div class="estilo2" id="capa2"> </div>
<br/><br/>
<a href="#" id="enlace">Generar Numero Aleatorio</a>
<br/>
<a href="#" id="enlace2">Intercambiar estilos (clases)</a>
</body>
</html>
A continuacion una breve explicacion de las partes mas importantes del ejemplo:
En la linea 6 se importa la libreria JQuery que esta un nivel abajo de donde esta el archivo de este ejemplo (por eso los .. del atributo src).
<script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script>
En la linea 09 y 10 se crea un objeto asociado al documento y se le asigna a su evento ready la funcion inicializaJQuery la cual se encarga, en resumen, de asignar a cada enlace una funcion distinta para controlar su evento Click:
function inicializaJQuery() {
$('#capa1').html("Contenido DIV1"); //Texto por default de capa1
$('#capa2').html("Contenido DIV2"); //Texto por default de capa2
var miEnlace = $('#enlace');
//Asignar funcion controladora a evento click de enlace 1
miEnlace.click(actualizaNumAleatorio);
var miEnlace2 = $('#enlace2');
//Asignar funcion controladora a evento click de enlace 2
miEnlace2.click(intercambiaClases);
}
En la primera y segunda linea de la funcion que copie anteriormente se crea un objeto asociado a cada capa y se ejecuta inmediatamente su metodo html() para establecer un texto por defecto en cada capa.
A continuacion se crea un objeto asociado al enlace 1 y se le asigna la funcion actualizaNumAleatorio a su evento click. Ahora la funcion actualizaNumAleatorio es el controlador del evento click del enlace 1.
Esta funcion como se observa a continuacion crea primeramente un objeto de la capa1, calcula un numero aleatoriamente y se lo asigna a la capa1 a travez de su metodo html(). Los mismo hace para la capa2 con la unica diferencia de que no redondea el numero:
//Funcion controladora de evento click del enlace 1
function actualizaNumAleatorio() {
var miCapa = $('#capa1');
var num = Math.random()*100; //Calcular primer numero
miCapa.html("Numero aleatorio: "+num);
var miCapa2 = $('#capa2');
var num = Math.round(Math.random()*100); //Calcular y redondear segundo numero
miCapa2.html("Otro aleatorio: "+num);
}
La funcion intercambiaClases es el controlador de evento click del enlace 2. Esta funcion como se observa, crea un objeto por cada capa y a continuacion recupera el nombre del estilo de la capa1. Observe como se recupera el valor de un atributo de un objeto; para esto se utiliza el metodo attr(), la sintaxis es objeto.attr(‘nomAtributo’) en este caso se recupera el atributo ‘class’ del objeto asociado a la capa1. Si el estilo que tiene la capa1 se llama ‘estilo1’ entonces se quita el estilo1 y se asigna la clase estilo2. A la capa2 se le quita el estilo2 y se le asigna el estilo1. Creo que es muy facil de entender, asi que ya no explico mas:
//Funcion controladora de evento click de enlace2
function intercambiaClases() {
var miCapa = $('#capa1');
var miCapa2 = $('#capa2');
//Obtener el nombre de la clase asignada al Div1
var claseActual = miCapa.attr('class');
if( claseActual=='estilo1' ) {
miCapa.removeClass("estilo1");
miCapa.addClass("estilo2");
miCapa2.removeClass("estilo2");
miCapa2.addClass("estilo1");
}
else {
miCapa.removeClass("estilo2");
miCapa.addClass("estilo1");
miCapa2.removeClass("estilo1");
miCapa2.addClass("estilo2");
}
}
Espero que hayas entendido la mayoria del codigo del ejemplo, ¿Sencillo, no?. A continuacion pongo una imagen del ejemplo ejecutandose en Chrome:
Para ver en funcionamiento el ejemplo da click en el siguiente enlace: index.html
Bueno pues, aqui termina el pequeño ejemplo, y como siempre que escribo algo; espero que ha alguien le sirva. Si gustas dejar un comentario constructivo sera bien recibido.
Saludos cordiales.
.::programming notes::. Gonzalo Silverio 
Comentarios recientes