Todos hemos visto el efecto de tipo "acordeón" utilizado en muchos sitios Web 2.0; sin embargo, muchos scripts de acordeón son pesados, hacen un mal uso de las bibliotecas en las que se basan y no manejan cosas como asegurarse de que el acordeón mantenga una altura constante. En este tutorial, utilizaremos las bibliotecas Prototype y Scriptaculous para crear un acordeón ligero e inteligente..
Demo y código fuente
Paso 1 - El objetivo
Nuestro objetivo es crear un script de acordeón ligero basado en las bibliotecas de JavaScript Prototype y Scriptaculous de JavaScript.. El acordeón debe:
Permitir un número ilimitado de paneles de acordeón
Ser completamente estilo por CSS
Sea discreto: los usuarios sin javascript activado deben ver todo su contenido de acordeón
Sea ligero, con relativamente pocas líneas de código; Utilizar la delegación de eventos para limitar el consumo de memoria..
Soporta cualquier tipo de contenido dentro del acordeón.
Asegúrese de que cuando el contenido de cada panel de acordeón cambie, la altura del acordeón permanezca constante para evitar El molesto efecto "rebote de página".
Este es un tutorial relativamente avanzado que asume que el lector tiene un conocimiento razonable de Javascript, CSS, HTML, orientado a objetos. Programación, y una comprensión básica de las bibliotecas Prototype y Scriptaculous. Sin embargo, el código fuente completo es disponible para que estudies, y el código es muy sencillo de leer y aprender si no estás familiarizado con lo específico bibliotecas utilizadas.
Antes de comenzar, puede ver una demostración de trabajo del acordeón en acción..
Paso 2 - Comience con el marcado básico
Para comenzar, crearemos un marcado HTML simple para nuestro acordeón:
Toggle 1
Contenido 1
Alternar 2
Contenido 2
Alternar 3
Contenido 3
Alternar 4
Contenido 4
Paso 3 - Añadir un poco de estilo
A continuación, debemos agregar un poco de estilo alrededor de nuestro acordeón para que se vea como un acordeón. Para empezar, haremos una primera pasada de estilo básico y luego agregaremos más cuando todo funcione. También hay algunos adicionales estilos que deben incluirse para garantizar que el acordeón se muestre correctamente mientras se anima.
div # prueba-acordeón margen: 10px; borde: 1px sólido #aaa; div.accordion posición: relativo; / * requerido para delimitación: funciona alrededor de una "peculiaridad" en Prototype * / div.accordion-toggle position: relative; / * requerido para el efecto * / z-index: 10; / * requerido para el efecto * / background: #eee; / * requerido para el efecto: puede ser cualquier cosa excepto "transparente" * / cursor: puntero; div.accordion-toggle-active background: #fff; div.accordion-content desbordamiento: oculto; / * requerido para el efecto * / background: #aaa;
Ver el acordeón básico con una simple hoja de estilo..
Paso 4 - Crear la clase de acordeón de Javascript
Prototype proporciona un marco maravilloso para crear clases en Javascript y usaremos esa funcionalidad para compilar nuestra clase de acordeon Esta clase contendrá todas las propiedades y métodos de un acordeón: el mostrado actualmente panel, el contenido del acordeón, métodos para expandir y contraer paneles, y métodos de manejo de eventos para definir qué sucede cuando los usuarios realizan una acción como hacer clic. Por ahora, vamos a configurar la estructura básica de la clase, así como todos los Propiedades y métodos que necesitaremos:
var Accordion = Class.create (initialize: function () this.accordion = null; / * Almacena un puntero al elemento del acordeón * / this.contents = null; / * Conjunto de punteros a los encabezados y paneles de contenido de el acordeón * / this.options = null; / * Permite al usuario definir los nombres de las clases css * / this.maxHeight = 0; / * Almacena la altura del panel de contenido más alto * / this.current = null; / * Almacena un puntero al panel de contenido actualmente expandido * / this.toExpand = null; / * Almacena un puntero al panel de contenido para expandir cuando un usuario hace clic * / this.isAnimating = false; / * Realiza un seguimiento de si la animación es o no actualmente en ejecución * /, checkMaxHeight: function () , / * Determina la altura del panel de contenido más alto * / initialHide: function () , / * Oculta los paneles que no se muestran de forma predeterminada * / attachInitialMaxHeight: function () , / * Asegura que la altura del primer panel de contenido coincida con la función más alta * / expand: function (el) , / * Indica a la función de animación qué elemento ents to animate * / animate: function () , / * Realiza la animación real del efecto de acordeón * / handleClick: function (e) / * Determine dónde ha hecho clic un usuario y actúa en función de ese clic * / );
Estos son los métodos básicos y las propiedades que necesitaremos al construir nuestro acordeón. Cada uno de los siguientes pasos Te guiará en la construcción de cada método hasta que tengamos un acordeón que funcione. Si en algún momento durante el tutorial necesitas una actualización rápida de para qué es cada método o propiedad, puede usar este código muy comentado como referencia.
Paso 5 - Inicializar: Empezar las cosas
Las clases de prototipos tienen un método especial llamado initalize () que es un constructor; esto significa que actúa cuando el usuario crea un nuevo objeto de instancia de esa clase. Para cualquier acordeón, necesitamos saber 2 cosas antes de comenzar:
El id del elemento acordeón..
La posición inicial predeterminada del acordeón (si es diferente de la primera posición)
Por lo tanto, tendremos que permitir que nuestro constructor acepte esos dos parámetros. Además, nuestro constructor debe:
Recupere y almacene el acordeón y su contenido como punteros a esos elementos.
Establecer las opciones definidas por el usuario.
Establecer el elemento expandido actual
Determine la altura máxima que usaremos como altura para todos nuestros paneles de contenido y aplíquela
Oculta los paneles de contenido que no se muestran por defecto.
Agregue un detector de eventos al acordeón para ver los clics de los usuarios.
Aquí está el código para nuestro método initialize ():
initialize: function (id, defaultExpandedCount) if (! $ (id)) throw ("Se intentó inicializar el acordeón con id:" + id + "que no se encontró."); this.accordion = $ (id); this.options = toggleClass: "accordion-toggle", toggleActive: "accordion-toggle-active", contentClass: "accordion-content" this.contents = this.accordion.select ('div.' + this.options. contentClass); this.isAnimating = false; this.maxHeight = 0; this.current = defaultExpandedCount? this.contents [defaultExpandedCount-1]: this.contents [0]; this.toExpand = null; this.checkMaxHeight (); this.initialHide (); this.attachInitialMaxHeight (); var clickHandler = this.clickHandler.bindAsEventListener (this); this.accordion.observe ('clic', clickHandler);
Como puede ver, hemos establecido todas nuestras propiedades en valores predeterminados razonables y hemos llamado 3 métodos para ayudar a configurar las cosas arriba. Finalmente, hemos adjuntado el controlador de eventos al acordeón. Vamos a crear esos tres métodos y el controlador de eventos..
Paso 6 - Comprobando el elemento más alto
Uno de los requisitos para nuestro acordeón es que debe escalarse para que incluso cuando se expanda el panel de contenido más alto, La altura total del acordeón se mantendrá constante. Para lograr este objetivo, recorreremos los paneles de contenido. determinar cuál es el más alto y establecer la propiedad maxHeight en consecuencia:
checkMaxHeight: function () for (var i = 0; i this.maxHeight) this.maxHeight = this.contents [i] .getHeight ();
Paso 7 - Ocultar el descanso
Nuestro acordeón solo debe mostrar el panel de contenido especificado como el panel actual; todos los demás deben estar ocultos por defecto. Además, debemos establecer el atributo de altura de este panel de contenido en 0; esto evita que el panel de contenido Apareciendo brevemente completamente expandido antes de animar adecuadamente.
initialHide: function () for (var i = 0; i
Paso 8 - Mostrar el panel de contenido predeterminado
Ahora que hemos ocultado todo menos el panel de contenido predeterminado, debemos asegurarnos de que el panel de contenido predeterminado se muestre correctamente; su encabezado debe tener el estilo "activo" aplicado y su altura debe coincidir con la propiedad maxHeight:
attachInitialMaxHeight: function () this.current.previous ('div.' + this.options.toggleClass) .addClassName (this.options.toggleActive); if (this.current.getHeight ()! = this.maxHeight) this.current.setStyle (height: this.maxHeight + "px");
Paso 9 - Crear el controlador de eventos
Si proviene de un fondo de manejo de eventos tradicional donde adjuntamos el controlador de eventos a cada área que queremos hacer clic, Puede parecer confuso que solo estamos adjuntando el controlador a un elemento. Estamos usando evento delegación. Para aquellos de ustedes que no están familiarizados con el tema, he escrito un breve resumen de la delegación de eventos que le presentará el concepto y por qué es tan importante. Dicho esto, necesitamos un controlador de eventos inteligente:
clickHandler: function (e) var el = e.element (); if (el.hasClassName (this.options.toggleClass) &&! this.isAnimating) this.expand (el);
Hay dos partes en esta función. Primero, determinamos en qué se hizo clic. Entonces, nos aseguramos de que era una Encabezado en el que se hizo clic y que no hay ninguna animación en ejecución. Si este es el caso, llamamos al método expand () Para iniciar el proceso del acordeón. La variable que pasamos al método expand () es el encabezado en el que el usuario hizo clic..
Paso 10 - Iniciar el proceso
Ahora podemos iniciar el proceso de hacer el efecto acordeón. Sabemos que el método expand () debe tomar un parámetro para el Elemento en el que se hizo clic. Usando ese parámetro, el método de expansión determina qué panel de contenido expandir, y si aún no está expandido, llama al método animate () para "hacer su magia!"
expande: function (el) this.toExpand = el.next ('div.' + this.options.contentClass); if (this.current! = this.toExpand) this.toExpand.show (); this.animate (); ,
Paso 11 - Haciendo el "Trabajo Sucio"
En este punto, todas las piezas están en su lugar; sabemos qué panel de contenido se muestra actualmente, sabemos qué encabezado el usuario ha hecho clic y sabemos en qué panel de contenido el usuario ha solicitado que se muestre. Ahora, hay que crear el acordeón. animación. Para esto, crearemos un método animate () que usará la clase Scriptaculous Effect.Parallel para renderizar las dos animaciones juntas; y la clase Effect.Scale para cambiar el tamaño de cada panel de contenido. El método animado será realiza estos pasos:
Cree una matriz que se utilizará para almacenar nuestros objetos Effect.Scale
Recopile los parámetros para pasarlos al constructor Effect.Scale para el panel de contenido que se mostrará y cree. el objeto
Añadir ese objeto a nuestra matriz
Recopile los parámetros para pasarlos al constructor Effect.Scale para el panel de contenido que se ocultará y creará el objeto
Añadir ese objeto a nuestra matriz
Cree el objeto Effect.Parallel que ejecutará nuestros objetos Effect.Scale está sincronizado.
Dile a nuestro objeto Acordeón que estamos animando.
Corre las animaciones
Limpia cualquier estilo dejado atrás
Dile a nuestro objeto Acordeón que hemos terminado de animar.
Para obtener una explicación completa de los parámetros de opción, pasamos a los objetos Effect.Scale y Effect.Parallel., Por favor vea la documentación de Scriptaculous.. Los aspectos importantes del método son los métodos beforeStart y afterFinish en nuestro Effect.Parallel. El antes de empezar El método le dice al acordeón que actualmente está animando. Esto evitará que el controlador de eventos intente iniciar cualquier cambio adicional mientras la animación esté en progreso. También se asegura de que el encabezado en el que se hizo clic es dado el nombre de clase "activo". El método afterFinish oculta completamente el panel de contenido que se había mostrado anteriormente (Después de que ha desaparecido debido a la animación). También garantiza que la altura final del contenido recientemente mostrado el panel es correcto Ahora que el intercambio está completo, le dice a nuestro acordeón que el panel de contenido expandido actualmente es el Una que acabamos de ampliar y que la animación está completa..
Paso 12 - Agregando un poco más de estilo
En este punto, tenemos un acordeón de aspecto decente, que se puede ver en acción aquí. Pero con un poco de CSS podemos hacer que todo se vea mucho más espectacular. Entonces, primero creamos una maqueta rápida de Photoshop para tener una idea aproximada de cómo debería verse todo. Con eso en mente, vamos a necesitar tres imágenes:
Una imagen de 'logo' -
Un par de imágenes de fondo agradables - y
Y aquí está el código CSS revisado:
cuerpo relleno: 130px 50px 50px 50px; fondo: # 252422 url (… /img/logo.gif) sin repetición; posición de fondo: 60px 40px; Familia tipográfica: "Lucida Grande", "Lucida Sans Unicode", Arial, Sans-serif; tamaño de fuente: 11px; línea de altura: 18px; div # prueba-acordeón borde: 1px sólido # 343230; color de fondo: # 21201f; relleno: 10px; div.accordion posición: relativo; / * requerido para el límite * / http: //net.tutsplus.com/wp-admin/users.php width: 800px; div.accordion-toggle position: relative; / * requerido para el efecto * / z-index: 10; / * requerido para el efecto * / background: # 3f3c38 url (… /img/off.jpg) repeat-x; posición de fondo: inferior; color: #fff; cursor: puntero; margen inferior: 1px; relleno: 9px 14px 6px 14px; borde superior: 1px sólido # 5d5852; div.accordion-toggle: hover, div.accordion-toggle-active background-image: url (... /img/on.jpg); color de fondo: # 6d493a; borde superior: 1px sólido # a06b55; div.accordion-content desbordamiento: oculto; / * requerido para el efecto * / fondo: # 302e2c; color: # c4bab1; borde inferior: 1px sólido # 000; div.accordion-content p margin: 9px 24px 6px 24px;
Como puedes ver aquí hemos:
Se agregaron algunos estilos de fondo en la página y la clase de acordeón.
Dado el div de acordeón a un color de fondo regular
Configure el acordeón-alternar: desplazarse y los estados activos para usar el mismo fondo rojizo
Paso 13 - verlo en acción
Puedes ver la demostración de trabajo aquí. También puedes añadir tu propio CSS e imágenes. para adaptar el aspecto a su sitio.
Share
Accentsconagua
y 
