Pestañas animadas atractivas utilizando MooTools

Una forma moderna y atractiva de colocar gran cantidad de contenido en un espacio reducido es mediante el uso de un sistema de pestañas. Este tutorial te mostrará cómo crear un sistema de pestañas animado y sexy completo con sprites CSS, cookies e intercambio de pestañas animado.

Suposiciones

Hay algunas suposiciones y notas que vamos a entrar en este sistema con:

Usaremos la versión más reciente de MooTools: 1.2.4.
El cliente debe soportar JavaScript.
Usaremos PHP para cualquier script del lado del servidor. Cualquier idioma del lado del servidor que elija también funcionará con su sintaxis / métodos correspondientes

El tutorial también asume un conocimiento básico de javascript. Un poco de experiencia en el marco de MooTools o JavaScript ayudará..

La trama

Entonces, ¿cómo va a funcionar este increíble sistema? Aquí está el esquema básico:

Cuando se carga la página, generamos dos listas UL con elementos de lista: la primera lista contiene las pestañas, la segunda lista contiene los elementos de contenido de las pestañas.
Para cada conjunto de pestañas que publicamos, verificamos una cookie determinada que pueda indicarnos qué pestaña se debe mostrar según la visita anterior. Si no hay una cookie presente, asumimos la primera pestaña.
Cuando el usuario hace clic en una pestaña, el elemento de contenido actual de esa pestaña se desliza fuera de la vista y la nueva pestaña de contenido se desliza en.
Guardamos el índice de la pestaña en una cookie para fines de carga futura (es decir, queremos que la última pestaña que se haga clic sea la primera que se muestre en la siguiente página / visita).

El sistema en sí es bastante a prueba de balas. Si el usuario no permite las cookies, la pestaña de inicio de cada lista siempre será 0.
Si el soporte de JavaScript no está presente, las pestañas no se verán en la pantalla ya que mostraremos: ninguna; ellos inicialmente.

Paso Uno: El HTML

El HTML para lograr el sistema de pestañas y los elementos de contenido correspondientes es increíblemente simple en su estructura.

   Pestaña 1
 Pestaña 2
 Pestaña 3
 Pestaña 4
 
 
  Este es el contenido de la pestaña 1..
 Este es el contenido de la pestaña 2..
 Este es el contenido de la pestaña 3..
 Este es el contenido de la pestaña 4..

Modificaremos el código HTML anterior con PHP más adelante en este tutorial para crear un sistema más robusto..

Paso Dos: CSS

Al igual que con cualquier combo de CSS y HTML, puede diseñar las pestañas y sus elementos de contenido como desee..
He elegido utilizar sprites CSS de estilo Facebook para las pestañas de mi ejemplo.
Tenga en cuenta que deseará diseñar los siguientes elementos de una manera específica para que el sistema funcione:

Los elementos de contenido de la pestaña deben tener una altura de 0 y su desbordamiento está oculto. Eso permite que todos los elementos de contenido estén "ocultos", por así decirlo, cuando la página se carga.
Entre los selectores de CSS "ul.tabs li a" y "ul.tabs li a.active", querrá asignar al selector "activo" un aspecto diferente para que el usuario conozca su pestaña seleccionada actualmente..

 / * estructura de pestañas * / .tab-container width: 320px; fondo: #eee; relleno: 5px 10px;  ul.tabs list-style-type: none; margen: 0; relleno: 0;  ul.tabs li float: left; margen: 10px 5px 0 0;  ul.tabs li a padding: 5px 10px; borde: 1px sólido #ddd; font-weight: negrita; fondo: url (tab-sprite.jpg) 0 0 repeat-x; color: # 000; texto-decoración: ninguno;  ul.tabs li a.active border-color: # 028433; posición de fondo: 0 -96px; color: #fff;  / * sprite! swap de posición de fondo * / ul.tabs li a.active:hover text-decoration: none; cursor: por defecto;  ul.tabs li: hover text-decoration: underline;  ul.tabs-content margen: 10px 0 0 0; relleno: 0;  ul.tabs-content li altura: 0; desbordamiento: oculto; margen: 0; relleno: 0;  / * borra flotadores * / div.clear clear: both;  / * es decir, correcciones * / * html ul.tabs-content li float: left;  / * ie6 * / * + html ul.tabs-content li width: 99%; flotador izquierdo;  / * ie7 * /

Tenga en cuenta que necesitamos implementar algunas correcciones específicas de Internet Explorer; feo, pero necesario.

Paso Tres: El MooTools Javascript

Una de las grandes ventajas de MooTools es el potente sistema Class.
Las clases de MooTools permiten funcionalidades flexibles, organizadas y ampliables.
Nuestra clase MooTools se llamará "TabSet". Dado que la clase TabSet realiza muchas acciones,
vamos a desglosar cada parte de la clase.

La primera línea siempre le da un nombre a la clase:

 / * Dale un nombre a la clase * / var TabSet = new Class (

A continuación, debemos crear un objeto que contenga las opciones de nuestra clase:

 opciones: // opciones predeterminadas de la pestaña activeClass: 'active', // css class cookieName: ", // no name significa ninguna cookie cookieOptions: // opciones para la cookie, si la duración de la cookie es la deseada: 30, // 30 días ruta: '/', índice de inicio: 0 // comience con este elemento si no hay una cookie o está activo,

Nuestras opciones nos permiten definir:

activeClass: la clase CSS que se debe asignar a la pestaña seleccionada actualmente (o "activa").
cookieName: el nombre de la cookie que representará este conjunto de pestañas. Si no define un nombre de cookie, no se utilizarán cookies..
cookieOptions: un objeto que contiene las opciones para la cookie.
startIndex: la pestaña para activar inicialmente. Comienza con 0. Anulado por la variable activeClass si se encuentra una cookie.

Con solo tres opciones en la clase, TabSet se consideraría una clase relativamente simple.

A continuación implementamos dos opciones y eventos:

 Implementa: [Opciones, Eventos],

Implementar opciones y eventos nos permitirá manejar correctamente las opciones dadas y
dispare eventos personalizados de carga y cambio en nuestras listas en cualquier lugar dentro de la clase.

A continuación, definimos el método de "inicialización" que se ejecuta al crear cada instancia de la clase:

 initialize: function (pestañas, contenido, opciones) // manejar argumentos this.setOptions (opciones); // mezclar las opciones dadas con las opciones predeterminadas this.tabs = $$ (tabs); // guarda las pestañas dadas dentro de la clase this.contents = $$ (contenidos); // guardar los "contenidos" dados dentro de la clase // determinar la pestaña "activa" var active = (Cookie.read (this.options.cookieName) || this.options.startIndex); // decide el índice que debería estar activo inicialmente this.activeTab = this.tabs [active] .addClass (this.options.activeClass); // ahora identifique la pestaña "activa" this.activeContent = this.contents [active] .setStyle ('height', 'auto'); // identificar el contenido "activo" // ejecutar cada combinación de pestañas / contenido a través del método "processItem" que veremos a continuación this.tabs.each (función (tab, i) this.processItem (tab, this.contents [i], i);, este); // las pestañas están listas - ¡dispara el evento de carga! this.fireEvent ('cargar'); ,

Luego viene el método workhorse de nuestra clase TabSet: processItem:

 processItem: function (tab, content, i) var contentHeight = content.getScrollSize (). y; // agregue un evento de clic a la pestaña tab.addEvent ('click', function () // si no es la pestaña activa if (tab! = this.activeTab) // stopper if (e) e.stop ( ); // eliminar la clase activa de la pestaña activa this.activeTab.removeClass (this.options.activeClass); // convertir la pestaña seleccionada en la pestaña activa (this.activeTab = tab) .addClass (this.options.activeClass) ; // interpolar el contenido de la pestaña antigua subir // interpolar el contenido nuevo down this.activeContent.set ('tween', onComplete: function () this.activeContent = content.fade ('in'). set ('tween ', onComplete: $ vacío). tween (' height ', contentHeight); // dispara el evento de cambio de pestaña this.fireEvent (' change ', [tab, content]); .bind (this)). setStyles (height: contentHeight, overflow: 'hidden'). fade ('out'). tween ('height', 0); // guarda el índice en la cookie si (this.options.cookieName) Cookie.write ( this.options.cookieName, i); .bind (this)); );

Aquí está el esquema básico de lo que hace el método processItem:

Acepta una pestaña coincidente, un elemento de contenido y su índice ...
Calcula la altura del elemento de contenido..
Agrega un evento de clic a la pestaña que:
1. Valida que esta pestaña aún no esté activa (no queremos animar o cambiar nada si hacen clic en la pestaña ya activa)
2. Elimina la clase CSS "activa" de la pestaña actual y la agrega a la pestaña en la que se hizo clic.
3. Desliza el contenido de la pestaña actual fuera de la vista, luego desliza el nuevo contenido a la vista. El evento de "cambio" se activa cuando se completa la animación.
4. Guarda el índice de la nueva pestaña en la cookie para que cuando el usuario vuelva a cargar la página o vaya a otra página, la nueva pestaña se seleccionará inicialmente.

Y ahora una muestra de uso de nuestra clase:

 window.addEvent ('domready', function () var tabset = new TabSet ($$ ('# tabs1 li a'), $$ ('# contents1 li'), cookieName: 'demo-list'); );

Proporcionamos a nuestra instancia la pestaña LI A y el contenido LI. También proporcionamos el argumento de opciones opcionales. ¡Así de fácil es usar esta clase! Aquí está la clase completa con uso:

 / * class * / var TabSet = new Class (options: activeClass: 'active', // css class cookieName: ", cookieOptions: duration: 30, // 30 días path: '/', startIndex: 0 // comience con este elemento si no tiene cookie o no está activo, Implementa: [Opciones, Eventos], inicialice: función (pestañas, contenidos, opciones) // manejar argumentos this.setOptions (opciones); this.tabs = $$ ( tabs); this.contents = $$ (contents); // determina la tabulación "active" var active = (Cookie.read (this.options.cookieName) || this.options.startIndex); this.activeTab = this. tabs [active] .addClass (this.options.activeClass); this.activeContent = this.contents [active] .setStyle ('height', 'auto'); // procesamos cada pestaña y el contenido de this.tabs.each (función (tab, i) this.processItem (tab, this.contents [i], i);, this); // las pestañas están listas: cárguelo! this.fireEvent ('load');, processItem: función (pestaña, contenido, i) var contentHeight = content.getScrollSize (). y; // agregue un evento de clic a la pestaña tab.addEvent ('click', function (e) // stop! if (e) e.stop (); // si no es el pestaña activa si (tab! = this.activeTab) // elimina la clase activa de la pestaña activa this.activeTab.removeClass (this.options.activeClass); // hacer que la pestaña en la que se hizo clic sea la pestaña activa (this.activeTab = tab) .addClass (this.options.activeClass); // interpolar el contenido de la pestaña antigua arriba // interpolar el contenido nuevo down this.activeContent.set ('tween', onComplete: function () this.activeContent = content.fade ('in'). set ('tween' , onComplete: $ empty). tween ('height', contentHeight); // dispara el evento de cambio de pestaña this.fireEvent ('change', [tab, content]); .bind (this)). setStyles (height: contentHeight, overflow: 'hidden'). fade ('out'). tween ('height', 0); // guarda el índice en la cookie si (this.options.cookieName) Cookie.write (this.options.cookieName, i, this.options.cookieOptions);  .bind (este)); ); / * use * / window.addEvent ('load', function () var tabset = new TabSet ($$ ('# tabs1 li a'), $$ ('# contents1 li'), cookieName: 'demo- lista '););

Paso Cuatro: PHP / HTML

¿Recuerdas cómo dije que estaríamos modificando nuestro HTML original con PHP? Ahora es el tiempo. Desde que nosotros mayo
tenemos una cookie configurada para nuestro TabSet, deberíamos intentar detectar que cuando generamos la pestaña HTML.
¿Por qué? Porque queremos que las pestañas se carguen sin problemas. También queremos dar cabida a los usuarios que no tienen habilitado JavaScript o cookies.
Sin este PHP, puede notar un ligero "salto" en el área de contenido activo.

    " > Tab 1
 " > Tab 2
 " > Tab 3
 " > Tab 4
 
 
  > Este es el contenido para la pestaña 1. Este es el contenido para la pestaña 1. Este es el contenido para la pestaña 1. Este es el contenido para la pestaña 1. Este es el contenido para la pestaña 1. Este es el contenido para la pestaña 1. Este es el contenido de la pestaña 1. Este es el contenido de la pestaña 1.
 > Este es el contenido para la pestaña 2. Este es el contenido para la pestaña 2. Este es el contenido para la pestaña 2. Este es el contenido para la pestaña 2. Este es el contenido para la pestaña 2. Este es el contenido para la pestaña 2. Este es el contenido para la pestaña 2. Este es el contenido para la pestaña 2.
 > Este es el contenido para la pestaña 3. Este es el contenido para la pestaña 3. Este es el contenido para la pestaña 3. Este es el contenido para la pestaña 3. Este es el contenido para la pestaña 3. Este es el contenido para la pestaña 3. Este es el contenido para la pestaña 3. Este es el contenido para la pestaña 3.
 > Este es el contenido para la pestaña 4. Este es el contenido para la pestaña 4. Este es el contenido para la pestaña 4. Este es el contenido para la pestaña 4. Este es el contenido para la pestaña 4. Este es el contenido para la pestaña 4. Este es el contenido para la pestaña 4. Este es el contenido para la pestaña 4.

Quinto paso: PHP: alojamiento para usuarios sin Javascript o cookies

Algunos usuarios no habilitan JavaScript o cookies por razones de seguridad. Sin embargo, todavía queremos que nuestro sistema funcione para ellos. Si recuerdas el bloque de código anterior,
estamos usando enlaces con una clave de cadena de consulta de "demo-list" para indicar un cambio en la pestaña. El siguiente bloque de PHP en la parte superior de la página (antes de cualquier salida)
Ayúdanos a cambiar el valor de la cookie a la pestaña solicitada.

Tenga en cuenta que solo actualizamos la página si podemos verificar que la cookie se haya configurado. Si la cookie no se ha configurado, el usuario tiene sus cookies deshabilitadas.

Misión cumplida!

Aquí hay un breve resumen de los beneficios de la clase TabSet de MooTools:

Nuestra clase implementa eventos para que podamos crear eventos personalizados y controladores de eventos.
El diseño de todo el sistema se controla completamente mediante HTML y CSS simples..
El uso de cookies para recordar la pestaña anterior es una gran mejora de la usabilidad..
La misma clase que es una clase de MooTools permite que se implemente fácilmente de proyecto a proyecto.

El Inline MooTools Javascript

Siempre he recomendado la codificación de una funcionalidad de MooTools deseada "en línea" antes de convertirla en una clase. Aquí está el código de JavaScript MooTools en línea:

 $$ ('ul.tabs'). each (function (tabList) // obtener la lista de contenido var tabContentList = tabList.getNext ('ul.tabs-content'), // obtener el nombre de la cookie, que es el atributo "título" de la lista de pestañas cookie = 'demo-list', // el índice de la pestaña de inicio startIndex = Cookie.read (cookie) || 0, // obtiene la pestaña real elementos de la pestaña LI = tabList.set (' title ', "). getElements (' li '), // obtiene los elementos de contenido de LI lis = tabContentList.getElements (' li '), // la pestaña (LI) que está activa activeTab = tabs [startIndex] .addClass ('activo'), // el contenido que está activo actualmente activeContent = lis [startIndex] .setStyle ('height', 'auto'); // para cada pestaña dentro de esta pestaña / relación de contenido ... tabs.each (función (tab, i) // stopper if (e) e.stop (); // calcule la altura del elemento de contenido respectivo var content = lis [i], contentHeight = content.getScrollSize (). y; // agregue el clic evento en la pestaña que ... tab.addEvent ('click', function () // si no es la pestaña actualmente activada ... if (tab! = activeTab) // agregar y eliminar la clase activa de la pestaña antigua vs. nueva activeTab.removeClass ('active'); (activeTab = tab) .addClass ('active'); // iniciar el borrado, borrar el efecto activeContent.set ('tween', onComplete: function () activeContent = content.fade ('in'). set ('tween', onComplete: $ empty). tween ('height', contentHeight);). setStyles (height: contentHeight, overflow: 'hidden'). fade ('out'). tween ('height', '0'); // escribir en cookie Cookie.write (cookie, i); //¡aleta! ); ); // evento de clic de disparo activeTab.fireEvent ('clic'); );

Observe que todas las declaraciones "var" en la parte superior se convierten en argumentos u opciones para la clase. La transición de JavaScript MooTools en línea a una clase es extremadamente simple!

Tener ideas de mejora?

¿Tienes más ideas para esta clase? Asegúrate de compartirlos en los comentarios a continuación.!

Escribe un Tutorial Plus

¿Sabía que puede ganar hasta $ 600 por escribir un tutorial PLUS y / o un screencast para nosotros?? Estamos buscando tutoriales detallados y bien escritos sobre HTML, CSS, PHP y JavaScript. Si tiene la habilidad, contacte a Jeffrey en [email protected].

Tenga en cuenta que la compensación real dependerá de la calidad del tutorial final y del screencast.

Síganos en Twitter o suscríbase a Nettuts + RSS Feed para obtener los mejores tutoriales de desarrollo web en la web..

Código