jquery.synchHeights an introductory plugin to the jQuery-plugins-creation world

This time I’m going to “move a bit back in the time” in order to show how to create a very basic jQuery plugin, hopefully, it will be useful for those persons looking to get into the jQuery-plugins-creation world.

The plugin is intended to synchronize the heights of the elements matched by the given CSS selector.
The functionality is going to be very simple, it will just assign the tallest element’s height to all the
elements in the set. It should take advantage of all the power of the jQuery selectors and its usage
should be very straightforward, in short, something like that:

$('.element1-class, #element2_id', more_CSS_selectors').synchHeights();

So, lets go to the action:

/**
 * jQuery.synchHeights plugin v1.0
 * Copyright 2010, Roger Padilla - @rogerjose81@gmail.com
 * Licensed under Apache License 2.0
 * This plugin is intended to synchronize the heights of the elements matched
 * by the given CSS selector. The functionality of this plugin is very simple,
 * it just assigns the tallest element's height to all the elements in the set.
 */
$.fn.synchHeights = function() {

	// the 'this' object is a jQuery object which keep reference to DOM-elements in the set
	var elemsSet = this;
	
	// calls the function which obtains the greater hight
	var maxHeight = getMaximumHeight(elemsSet);
	
	// calls the function used to synchronize the heights
	synchHeights(elemsSet, maxHeight);
	

	// loops through the elements set to obtain the greater height
	function getMaximumHeight(elemsSet){
		var maxHeight = 0, item;
		elemsSet.each(function(){
			item = $(this);
			if (item.height() > maxHeight) {
				maxHeight = item.height();
			}
		});
		return maxHeight;
	}

	/*
	 * Synchronizes the heights of the elements in the set by using
	 * the calculated maximun-height
	 */
	function synchHeights(elemsSet, maxHeight) {
		// for ie6, set height since min-height isn't supported
		if ($.browser.msie && $.browser.version == 6.0) {
			elemsSet.css({'height': maxHeight});
		}
		elemsSet.css({'min-height': maxHeight});
	}

	// returns 'this' to be able to use chaining selectors
	return this;
};

jquery.synchHeights un plugin introductorio al mundo de la creación de plugins jQuery

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;
};