Cómo programar paneles de acordeón

paneles de acordeón son una serie de elementos de una página web que puede ser abierta y cerrada para mostrar u ocultar la información relevante. Esto hace que sea más fácil para un navegador para obtener información relevante. paneles de acordeón se pueden crear mediante el uso de jQuery, el Spry biblioteca de Javascript o Flash.

Instrucciones

Interfaz de usuario jQuery Accordian

1 Descargar los archivos de interfaz de usuario jQuery Accordian e instalar. Siga las instrucciones proporcionadas.

2 Abra un editor de secuencia de comandos, como Bloc de notas. Crear un nuevo archivo haciendo clic en el menú "Archivo" y luego "Nuevo".

3 Añadir enlaces a la página HTML a los archivos que se han instalado, en el primer paso:

<Link rel = "stylesheet" href = "/ a / c / accordion.core.css" type = "text / css"> ...

<Script type = "/ javascript texto" class = "acordeón">

<li>

& Lt; div class = "identificador"> Handle 1 & lt; / div>

& Lt; div class = "panel de carga">

& Lt; p> Un panel lleno de texto. & Lt; / p>

& Lt; / div>

& Lt; / li>

& Lt; li>

& Lt; div class = "identificador"> Handle 2 & lt; / div>

& Lt; ul class = "panel de carga">

& Lt; li> ¿Qué tal ... & lt; / li>

& Lt; li> ... una lista ... & lt; / li>

& Lt; li> ... de elementos? & Lt; / li>

& Lt; / ul>

& Lt; / li>

</ Ul>

5 Añadir un código, a continuación el código anterior, que se desarrollará el jQuery:

$ ( '# Example1'). Acordeón ({

handle: ".handle", // Default: "h3"

Panel: ".panel", // por defecto: ".panel"

Velocidad: 500, // por defecto: 200

aliviando: "easeInOutQuad", // por defecto "swing"

canOpenMultiple: false, // por defecto: false

canToggle: false, // por defecto: false

activeClassPanel: "abrir", // por defecto: "abierta"

activeClassLi: "activo", // por defecto: "activo"

lockedClass: "bloqueado", // por defecto: "bloqueado"

loadingClass: "carga" // Por defecto: "carga"

});

6 Guardar como archivo HTML, haciendo clic en "Archivo", luego "Guardar como" y guardar con la extensión ".html". Abra la página en un navegador. Se crearán los paneles de acordeón.

El uso de Spry

7 Descargar la biblioteca de Spry e instalar en el servidor. Usted tendrá que registrarse con Adobe para descargar este producto.

8 Abra un editor de texto, como Bloc de notas y crear un nuevo archivo HTML. Crear un nuevo archivo haciendo clic en el menú "Archivo" y luego "Nuevo".

9 Agregue el código siguiente al archivo HTML, creado en el paso anterior:

<Script language = "JavaScript" type = "text / javascript" rel = "stylesheet" type = "text / css" />

Esto enlaza con el archivo de biblioteca de Spry, que se han instalado en el primer paso.

10 Añadir código para crear paneles de acordeón:

<Div id = "Ace 1" class = "acordeón">

<Div class = "AccordionPanel">

<div class="AccordionPanelTab">Panel 1</div>

& Lt; div class = "AccordionPanelContent">

primer panel de contenido

</div>

</ Div>

<Div class = "AccordionPanel">

<div class="AccordionPanelTab">Panel 2</div>

& Lt; div class = "AccordionPanelContent">

segundo panel de contenido

& Lt; / div>

</ Div>

</ Div>

</ Div>

<Script type = "text / javascript">

var = new ACC1 Spry.Widget.Accordion ( "Ace 1");

</ Script>

11 Guardar el archivo y ejecuta en un navegador. Los paneles de acordeón se pueden crear utilizando la biblioteca de Javascript.

Destello

12 Abrir editor de Flash y crear un nuevo documento de Flash.

13 Arrastre el panel de acordeón de la paleta de Componentes (Ctrl + F7 o Comando + F7 en Mac).

14 Crear un archivo XML y agregue el código siguiente en el nuevo archivo:

<? Xml version = "1.0" encoding = "UTF-8"?>

<Nombre del componente = "Panel de Acordeón V3">

<data childStyle="style1">

& Lt; título del artículo = "Primera imagen" contentPath = "images / img1.jpg" />

& Lt; título del artículo = "Segunda imagen" contentPath = "images / img2.jpg" />

& Lt; / data>

</ Componente>

Vincular el "contentPath" al lugar donde se encuentran las imágenes para cada panel.

Guarde el archivo haciendo clic en "Archivo", luego "Guardar". Añadir la extensión ".xml" al nombre de archivo y haga clic en "Guardar".

15 Haga clic en Ctrl + Enter para ejecutar la película flash. Un panel de acordeón se creará con una serie de imágenes en los paneles.