JQuery: Asignar un controlador al evento click de un enlace

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:
Ejecucion de Ejemplo2 de JQuery.

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.

Anuncios

Acerca de gonzasilve
Freelance Web Developer.

2 Responses to JQuery: Asignar un controlador al evento click de un enlace

  1. Pingback: JQuery | Annotary

  2. Pingback: JQuery UI: Como usar el control Tab con MySql « .::programming notes::. Gonzalo Silverio

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: