jQuery / Desarrollando plug-ins / 3ra. parte

Bienvenidos sean a este post, hoy continuaremos con este tema.

Proveyendo parametros de metodos flexibles

Cuando hablamos de usar un plug-in este post, una de las cosas que pudimos hacer es dar una mejor conducta de que realmente queriamos gracias a los parametros, vimos que un plug-in bien realizado puede ser mas maleable a traves de valores predeterminados establecidos por nosotros pero que a su vez pueden ser modificados cuando queramos, esto es algo a tener en cuenta al momento de crear nuestros plug-in.

Para entender este concepto vamos a hacerlo mediante un ejemplo y para ello tomaremos el ejemplo que estuvimos hasta el post anterior, en caso de no tenerlo les dejo un link para descargar los archivos:

Simplemente en un directorio extraigan todo los archivos, con esto realizado vamos a trabajar en el ejemplo, para este caso vamos a hacer algo que se podria realizar tranquilamente con CSS pero para ponerlo en practica vamos a realizarlo mediante script, para ello iremos al archivo plugin.js y agregaremos el siguiente codigo dentro del entorno jQuery:

$.fn.sombra = function() {		
	return this.each(function() {
		var $elemento = $(this);
		for (var i=0; i < 5; i++) {
			$elemento
			.clone()
			.css({
				position: 'absolute',
				left: $elemento.offset().left + i,
				top: $elemento.offset().top + i,
				margin: 0,
				zIndex: -1,
				opacity: 0.1
			})
			.appendTo('body');
		}
	});
};

Aqui definimos un metodo llamado sombra, observen que usamos lo visto en el post anterior donde cada elemento que procese lo devolvera, nuestro primer paso sera crear un objeto con el elemento actual que se obtiene mediante this, despues tenemos un ciclo donde haremos cinco pasadas, en este caso primero tomamos el objeto a trabajar, le aplicamos el metodo clone para copiarlo, despues mediante el metodo css le estableceremos un nuevo estilo, este es basicamente el encargado de hacer la magia de la sombra, y por ultimo lo agregamos al body, como pueden ver de una manera sencilla lo logramos ahora para aplicarlo vamos al archivo codigo.js y agregaremos el siguiente codigo:

$(document).ready(function() {
	$('h1').sombra();
});

En este caso sera simplemente aplicar el nuevo metodo al titulo que se encuentra en el body de la pagina, si lo probamos se vera de la siguiente forma

Ya tenemos nuestro metodo base, lo siguiente sera comenzar a trabajar con ellos, para eso debemos pasar al siguiente tema.

Las opciones del objeto

Vamos a aplicar algo similar a lo que vimos en los posts de ajax, donde pasabamos parametros por medio de propiedades aca sera algo similar pero debemos hacer algunas modificaciones pequeñas, para ello vamos a ir primero al archivo codigo.js y modificaremos el bloque anterior de la siguiente forma:

$(document).ready(function() {
	$('h1').sombra({
		copias: 3,
		opacidad: 0.2
	});
});

Observen que la unica modificacion fue agregar entre llaves las propiedades que contendran los parametros para nuestro metodo, nuestra siguiente modificacion sera en el archivo plugin.js donde cambiaremos a la funcion de la sombra de la siguiente manera:

$.fn.sombra = function(opciones) {		
	return this.each(function() {
		var $elemento = $(this);
		for (var i=0; i < opciones.copias; i++) {
			$elemento
			.clone()
			.css({
				position: 'absolute',
				left: $elemento.offset().left + i,
				top: $elemento.offset().top + i,
				margin: 0,
				zIndex: -1,
				opacity: opciones.opacidad
			})
			.appendTo('body');
		}
	});
};

Primero agregamos el argumento opciones para poder trabajar las propiedades que establecimos en el codigo anterior, el primero uso sera en el bucle for donde eliminamos la cantidad de vueltas y aqui usamos a copias desde opciones y el otro cambio es en opacidad donde usaremos la propiedad opacidad, si lo prueban ahora se vera de la siguiente forma

Entonces ahora ya tenemos un metodo que permite variar en base a los parametros que le pasemos pero esto lo podemos mejorar aun mas, pasemos al proximo tema.

Valores de parametros predeterminados

Como dice el titulo vamos a establecer unos valores predeterminados para cuando el usuario no informe alguno, para ello primero modificaremos al metodo sombra de la siguiente manera:

$.fn.sombra = function(opc) {
	var predet = {
		copias: 5,
		opacidad: 0.1
	};
	var opciones = $.extend(predet, opc);
		
	return this.each(function() {
		var $elemento = $(this);
		for (var i=0; i < opciones.copias; i++) {
			$elemento
			.clone()
			.css({
				position: 'absolute',
				left: $elemento.offset().left + i,
				top: $elemento.offset().top + i,
				margin: 0,
				zIndex: -1,
				opacity: opciones.opacidad
			})
			.appendTo('body');
		}
	});
};

Primero cambiaremos el nombre del argumento que recibe las propiedades para las opciones, primero definiremos un objeto con las propiedades iguales a las que recibimos pero estableceremos un valor para cada uno, despues definiremos un objeto llamado opciones, igual al codigo anterior, donde usaremos extend para recibir los valores predeterminados que establecimos antes y los valores que podemos pasar por medio del llamado al metodo, el resto del metodo sigue siendo el mismo que antes, pero la diferencia radica en que ahora nunca estaremos sin un valor, antes de probarlo vamos a cambiar el bloque de codigo.js donde llamamos a sombra de la siguiente manera:

$(document).ready(function() {
	$('h1').sombra({
		opacidad: 0.25
	});
});

En este caso solo le pasaremos la opacidad pero tomaremos el valor de copias de los valores predeterminados, si lo probamos ahora se vera de la siguiente manera

Ya podemos pasar valores, tenemos valores predeterminados para cuando no lo informen pero esto esta lejos de terminar, pasemos al siguiente tema.

Funciones callback

Hasta aca hemos cubierto parametros que son solo valores pero si necesitamos manipular informacion mas compleja? bueno en este caso entran en accion las funciones callback, dado que nos permiten manejar una gran cantidad de informacion sin necesidad de modificar mucho al plug-in, para esto solo debemos aceptar al objeto function como parametro, para entender el concepto vamos a modificar al metodo sombra de la siguiente forma:

$.fn.sombra = function(opc) {
	var predet = {
		copias: 5,
		opacidad: 0.1,
		copiarOffset: function(indice) {
			return {x: indice, y: indice};
		}
	};
	var opciones = $.extend(predet, opc);
		
	return this.each(function() {
		var $elemento = $(this);
		for (var i=0; i < opciones.copias; i++) {
			var offset = opciones.copiarOffset(i);
			$elemento
			.clone()
			.css({
				position: 'absolute',
				left: $elemento.offset().left + offset.x,
				top: $elemento.offset().top + offset.y,
				margin: 0,
				zIndex: -1,
				opacity: opciones.opacidad
			})
			.appendTo('body');
		}
	});
};

Con respecto al codigo anterior tenemos pocas variaciones, primero agregarmos una nueva propiedad llamada copiarOffset, este sera un tipo function y recibira un valor, este valor lo devolveremos en dos parametros llamado x e y de lo cual hablaremos en un rato, nuestro siguiente cambio sera dentro del bucle for donde ahora estableceremos un objeto llamado offset y este almacenara los valores de copiarOffset y como parametro le pasaremos el valor de cada pasada, la siguiente modificacion sera en left y top donde reemplazaremos el incremento de i con el offfset.x y offset.y respectivamente, si lo prueban deberia seguir funcionando de la misma forma, ahora vamos a cambiar a copiarOffset de la siguiente forma:

copiarOffset: function(indice) {
	return {x: -indice, y: -2 * indice};
}

Esto cambiara la ubicacion de nuestras sombras, por lo tanto si vuelven a probar la pagina se vera de la siguiente forma

Observen como de una forma muy simple cambiamos la orientacion de la sombra, y asi como esto podemos variar otras particularidades de nuestro metodo, solo nos resta hablar sobre un tema.

Valores predeterminados personalizables

En este post vimos como establecer unos valores predeterminados por fuera del metodo del plug-in, en esta ultima parte veremos como podemos agregar esta opcion a nuestro metodo, para ello debemos ir al archivo plugin.js y modificaremos el metodo sombra de la siguiente forma:

$.fn.sombra = function(opc) {
	var opciones = $.extend({}, $.fn.sombra.predet, opc);
		
	return this.each(function() {
		var $elemento = $(this);
		for (var i=0; i < opciones.copias; i++) {
			var offset = opciones.copiarOffset(i);
			$elemento
			.clone()
			.css({
				position: 'absolute',
				left: $elemento.offset().left + offset.x,
				top: $elemento.offset().top + offset.y,
				margin: 0,
				zIndex: -1,
				opacity: opciones.opacidad
			})
			.appendTo('body');
		}
	});
};

$.fn.sombra.predet = {
	copias: 5,
	opacidad: 0.1,
	copiarOffset: function(indice) {
		return {x: indice, y: indice};
	}
};

Los cambios son pocos pero muy evidentes, primero «eliminamos» a la variable predet, aunque no es tan asi, despues modificamos a la variable opciones, primero pasamos un objeto vacio al cual modificaremos con la funcion extend, de lo contrario trabajara sobre sombra y no queremos esto, despues pasamos los nuevos valores predeterminados, observen que pasamos una ruta completa que incluye al nombre de sombra, y luego pasamos las opciones recibidas como argumento, con esto tenemos todos los valores en opciones sean predeterminados o pasados como argumento, el resto sigue igual que antes pero despues del metodo tenemos el nuevo bloque, en este caso definiremos el objeto de los valores predeterminados, basicamente es el mismo que teniamos en la variable anterior que eliminamos, pero observen que ahora x e y solo reciben el valor del argumento, nuestro siguiente paso sera ir al archivo codigo.js y modificaremos el bloque donde llamamos a sombra de la siguiente manera:

$(document).ready(function() {
	$.fn.sombra.predet.copias = 10;
	$('h1').sombra({
		copiarOffset: function(index) {
			return {x: -index, y: index};
		}
	});
});

Observen que antes de llamar a sombra establecemos el valor predeterminado de copias, despues al momento de llamar a sombra establecemos una nueva formula para copiarOffset, con esta modificacion realizada podemos ver como quedo ahora nuestra pagina

Ahora pueden probar de jugar modificando el objeto de copiarOffset o establecer otros valores predeterminados para ver como varia, ahora si tiene realmente un plug-in completo y funcional, antes de finalizar les dejo un archivo con todos los archivos del proyecto y codigos finales de este post:

En resumen, hoy hemos visto como agregar metodos para trabajar con los elementos DOM, hemos pasado desde uno muy basico hasta uno muy completo que no solo tiene valores predeterminados sino que podemos establecer unos propios, 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.