jQuery / Interaccion de eventos

Bienvenidos sean a este post, hoy veremos un par de particularidades de los eventos y como interactuar con el usuario, pasemos a la primera.

Simulando una interaccion del usuario

En algunas ocasiones debemos ejecutar codigo que esta relacionado a un evento aunque estas no esten ocurriendo, supongamos con el codigo que vimos en los posts anteriores deseamos que el contenedor de los botones salga cerrado, aqui tenemos dos opciones:

• podemos usar la propiedad de oculto por medio de la funcion hide
• podemos simular un click sobre este

Vamos a trabajar con el segundo caso y para ello deben descargar el codigo que vimos en el post anterior:

Extraigan todos los archivos en un solo directorio, una vez realizado vayan al archivo codigo.js y agreguen este bloque:

$(document).ready(function() {
	$('#cambiador').trigger('click');
});

En este caso usamos el metodo trigger sobre cambiador, esto nos permite ejecutar el evento que le pasemos, como en este caso el click, si abrimos la pagina ahora se vera de la siguiente forma

Si lo prueban seguira funcionando de la misma forma pero con nuestro menu colapsado, a su vez tambien poseemos un version abreviada como ocurre con otros:

$(document).ready(function() {
	$('#cambiador').click();
});

Es simplemente el nombre pero sin ninguna funcion asociada, con esto comentado podemos pasar al siguiente tema.

Eventos del teclado

Otra buena posibilidad es de interceptar la interaccion con el teclado paa crear acceso mas rapidos a algunos de los eventos que tenemos en la pagina, estos se denomina como eventos de teclado y disponemos de dos tipos:

• directa, este esta relacionado con keyup y keydown, y usualmente se relaciona con la tecla presionada por el usuario
• ingreso de texto, esta relacionado con keypress, y este esta relacionado mas al caracter que aparecio en pantalla, por ejemplo porque se presiono Shift + x para mostrar a X

Un pequeño inconveniente que podemos encontrar a la hora de trabajar con los elementos es como enfocarnos en ellos, dado que el mouse nos permite hacerlo de manera sencilla pero con el teclado debemos usar la tecla tab para desplazarnos hacia ellos, si bien algunos funcionan internamente en otros no, para evitar ellos debemos trabajar con la propiedad tabIndex de cada uno de ellos, para entenderlo vamos a trabajar con nuestra pagina para que podamos aplicar las clases por medio de unas teclas, volvamos al archivo codigo.js y comencemos agregando este segmento de codigo:

$(document).ready(function() {
	var teclas = {
		D: 'default',
		C: 'chico',
		G: 'grande'
	};
	$(document).keyup(function(evento) {
		var tecla = String.fromCharCode(evento.which);
		if (tecla in teclas) {
			$('#el-' + teclas[tecla]).click();
		}
	});
});

Primero definimos un mapa donde asignamos la letra que sera la clave y el valor asociado a este, en este caso las tres clases que aplicamos en la pagina y la inicial de cada una de ellas, lo siguiente sera usar el evento keyup sobre la pagina y en ella primero definiremos una variable llamada tecla donde obtendremos la tecla que se presiono mediante fromCharCode y el valor devuelto por el evento, lo siguiente es por medio de un condicional donde verificaremos si el valor de la tecla esta entre las teclas, si es verdad procedemos a seleccionar el boton que corresponde y procedemos a emular el click sobre este, veamos como trabaja ahora la pagina mediante el siguiente video

Con esto tenemos una pagina con todo lo visto anteriormenet y ahora podemos modificar su estilo con las teclas, por ultimo vamos a hacer una mejora estetica de nuestro codigo y para ello vamos a modificarlo de la siguiente manera:

$(document).ready(function() {
	var cambiar=function(evento){
		if (!$(evento.target).is('button')) {
			$('#cambiador button')
			.toggleClass('oculto');
		}
	};
	var clases=function(ev) {
		var e = ev.split('-')[1];
		$('body').removeClass()
		.addClass(e);
		$('#cambiador button')
		.removeClass('seleccionado');
		$(ev).addClass('seleccionado');
	};
	var teclas = {
		D: 'default',
		C: 'chico',
		G: 'grande'
	};
	$('#cambiador').hover(function() {
		$(this).addClass('flotar');
	}, function() {
		$(this).removeClass('flotar');
	});
	$('#el-default').addClass('seleccionado');
	$('#cambiador').on('click',cambiar);
	$('#cambiador button').click(function(){
		$('#cambiador').off('click');
		switch(this.id)
		{
			case "el-default":
				$('#cambiador').on('click',cambiar);
				clases('#' + this.id);
				break;
			default:
				clases('#' + this.id);
				break;
		}
	});
	$('#cambiador').trigger('click');
	$(document).keyup(function(evento) {
		var tecla = String.fromCharCode(evento.which);
		if (tecla in teclas) {
			$('#el-' + teclas[tecla]).click();
		}
	});
});

Este es simplemente una version mas ordenada de nuestro codigo, en lugar de tener tres llamados a ready lo hicimos en uno solo, si lo prueban deberia funcionar como vimos en el video anterior, antes de finalizar les dejo el codigo final que vimos en este post:

En resumen, hoy hemos visto como interactuar mejor con los eventos, en el primer caso hemos visto como «simular» una interaccion del usuario, en el segundo caso hemos visto como hacerlo con el teclado y en conjunto con el anterior trabajar con la pagina como si fuera el mouse, espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.