Thinking in programming

Esta vez voy a “retroceder un poco en el tiempo” con el fin de mostrar cómo crear un plug-in jQuery muy básico, con suerte, será útil para aquellas personas que buscan entrar en el mundo de la creación de plug-ins jQuery.

synchHeights está diseñado para sincronizar las alturas de los elementos HTML que coincidan con el selector CSS dado.

La funcionalidad va a ser muy básica, se asignará la altura del elemento más alto a todos los elementos del conjunto. Este plugin debe aprovechar el poder de los selectores de jQuery y la forma de usarlo debe ser muy sencilla, en fin, será algo así:

$('.elemento1-class, #elemento2_id, mas_selectores_CSS').synchHeights();

Entonces, comencemos con la acción:

/**
 * jQuery.synchHeights plugin v1.0
 * Copyright 2010, Roger Padilla - @rogerjose81@gmail.com
 * Licenciado bajo Apache Licence v 2.0
 * Este plug-in sincroniza las alturas de los elementos seleccionados por el selector CSS dado
 */
$.fn.synchHeights = function() {

	// el objeto 'this' es un objeto jQuery el cual mantiene referencias a los elementos del DOM en el conjunto
	var elemsSet = this;
	
	
	// llamado a la función que obtiene la mayor altura
	var maxHeight = getMaximumHeight(elemsSet);
	
	// llamado a la función que sincroniza las alturas de los elementos
	synchHeights(elemsSet, maxHeight);
	

	// recorre cada elemento en el conjunto en búsqueda de la mayor altura
	function getMaximumHeight(elemsSet){
		var maxHeight = 0, item;
		elemsSet.each(function(){
			item = $(this);
			if (item.height() > maxHeight) {
				maxHeight = item.height();
			}
		});
		return maxHeight;
	}

	/*
	 * Sincroniza las altura de los elementos del conjunto con la mayor altura calculada previamente
	 */
	function synchHeights(elemsSet, maxHeight) {
		// para IE6, usamos la propiedad 'height' ya que ese navegador no soporta 'min-height'
		if ($.browser.msie && $.browser.version == 6.0) {
			elemsSet.css({'height': maxHeight});
		}
		elemsSet.css({'min-height': maxHeight});
	}

	// retornamos el objeto 'this' para poner usar selectores concatenados
	return this;
};