Tabulous.js: organiza contenido aleatorio en pestañas con jQuery

Aaron Lumsden de West-Yorkshire simplemente ama jQuery. Hace solo unos días, presentamos a nuestros lectores a progress.js, un complemento que brinda a los usuarios sugerencias en tiempo real y actualizaciones de progreso a medida que completan formularios. Hoy me encontré con otro complemento útil del mismo programador. Tabulous.js lo ayuda a organizar cualquier contenido en contenedores con navegación por pestañas y agradables efectos animados para ocultar y mostrar los elementos adjuntos.

Tabulous.js: varios efectos, fácil de usar

Si te gusta el enfoque de Lumsden para simplificar las cosas o no, es básicamente una cuestión de gusto. Hay muchos de ustedes a quienes les gusta utilizar marcos completos con muchas características integradas en un gran paquete, sabiendo que solo necesitarán unas pocas. A otros, como a Lumsden (y a mí), les gusta usar pequeñas herramientas especializadas, que acumulan con otros si es necesario para lograr el nivel exacto de funciones al que apunta el proyecto dado.

Tabulous.js ofrece exactamente una función. Permite la organización de contenido aleatorio en un anidado div y envuelve la navegación con pestañas y algunos efectos agradables a su alrededor. Los efectos le permiten deslizar el contenido desde un lado o voltearlo desde adentro. Hay más variantes.

La incrustación es simple, como siempre lo es con jQuery. Hay una sola variable, etiquetada effect, lo que garantiza que la llamada a la función sea delgada y se programe rápidamente. Después de haber llamado jQuery, el complemento y su CSS correspondiente, querrá configurar un anidado div con la capa superior que lleva la identificación tabs.

Este es un ejemplo de cómo se ve:

		
Tab 1
			
Tab 2
			
Tab 3
		

			

			

				
			

			

				   
		
			

			

				    
			

		
		
	

Habiendo hecho eso, simplemente necesita invocar la función de llamada:

$('#tabs').tabulous({
    	effect: 'scale'
    });	

Decidí usar la variable effect en este ejemplo. Los efectos se preocupan por ocultar y mostrar contenido con una variedad de animaciones. La variable es opcional.

Tabulous.js es una herramienta sencilla y práctica que cumple la misión para la que ha sido inventada de forma casi ideal. Fui lo suficientemente espontáneo como para usarlo de inmediato en uno de mis proyectos de hoy. Tabulous.js se puede descargar desde Github y está disponible de forma gratuita bajo una licencia MIT para casos de uso privado y comercial por igual.

enlaces relacionados

• Tabulous.js | Manifestación
• Tabulous.js | Repositorio Github
• Aarón Lumsden en Github