equalWidths jQuery Plugin

Si algunas vez te ha tocado diseñar una barra de navegación te habrás encontrado en más de una ocasión con que es bastante tedioso lograr que cada elemento interno tenga el mismo ancho para lograr un efecto uniforme. equalWidths es un plugin para jQuery que hace justamente eso, toma cada elemento seleccionado y le aplica un width uniforme.

Es plugin esta pensado para lograr un width para los child elements (<li>) de una lista, ya sea ordenada (<ol>) o desordenada (<ul>), pero no se limita a estos elementos ya que podemos integrarlo con lo que necesitemos.

En esta captura vemos como funciona el plugin:

equalWidths equalWidths jQuery Plugin

Por defecto el plugin no eliminara el padding de nuestros elementos, pero si lo necesitamos se puede indicar que elimine el padding izquierdo, el derecho o ambos.

Su uso es de lo mas simple. Tenemos 3 opciones:

$('ul#main-nav').equalWidths({'stripPadding': 'child'});
 
$('ul#main-nav').equalWidths({'stripPadding': 'grand-child'});
 
$('ul#main-nav').equalWidths({'stripPadding': 'both'});

Asumiendo que vamos a aplicar equalWidths a una lista (<ul>) con una estructura como la siguiente: ul > li > a Entonces el elemento “child” será LI y se eliminara su padding. El elemento “grand-child” sera A y se eliminara su padding. Y si seleccionamos “both” evidentemente, se eliminara el padding de ambos elementos.

El plugin se encuentra en el código fuente de la pagina, pero te lo transcribo para que este más a mano:

		/*!
		 * equalWidths jQuery Plugin
		 * Examples and documentation at: hhttp://aloestudios.com/tools/jquery/equalwidths/
		 * Copyright (c) 2010 Andy Ford
		 * Version: 0.1 (2010-04-13)
		 * Dual licensed under the MIT and GPL licenses:
		 * http://www.opensource.org/licenses/mit-license.php
		 * http://www.gnu.org/licenses/gpl.html
		 * Requires: jQuery v1.2.6+
		 */
		(function($){
			$.fn.equalWidths = function(options) {
				var opts = $.extend({
					stripPadding: 'none' // options: 'child', 'grand-child', 'both'
				},options);
				return this.each(function(){
					var child_count = $(this).children().size();
					if (child_count > 0) { // only proceed if we've found any children
						var w_parent = $(this).width();
						var w_child = Math.floor(w_parent / child_count);
						var w_child_last = w_parent - ( w_child * (child_count -1) );
						$(this).children().css({ 'width' : w_child + 'px' });
						$(this).children(':last-child').css({ 'width' : w_child_last + 'px' });
						if((opts.stripPadding == 'child') || (opts.stripPadding == 'both')){
							$(this).children().css({
								'padding-right': '0',
								'padding-left': '0'
							});
						}
						if((opts.stripPadding == 'grand-child') || (opts.stripPadding == 'both')){
							$(this).children().children().css({
								'padding-right': '0',
								'padding-left': '0'
							});
						}
					}
				});
			};
		})(jQuery);
 
 
		$(function(){
 
			$('#ejemplo-2').equalWidths(); // config por defecto
 
			$('#ejemplo-3').equalWidths({'stripPadding': 'both'}); //sin padding
 
		});