Cómo utilizar Dreamweaver CS3 paneles de acordeón de Spry

Por Virginia DeBolt , eHow Contribuyente

What's This?Dreamweaver CS3 comes equipped with functions labeled Spry, which are a

WYSIWYG way to add AJAX to a web page. Dreamweaver CS3 viene equipado con

funciones de etiqueta de Spry, que son una forma WYSIWYG para añadir AJAX a una

página web. They automatically provide you with HTML, CSS and JavaScripts to perform

certain interactive functions. Automáticamente le proporcionará con HTML, CSS y

JavaScript para realizar ciertas funciones interactivas. In this article you'll learn how to use

the Spry Accordion Panels widget. En este artículo usted aprenderá cómo utilizar el widget

Spry Accordion paneles.

Difficulty: Moderately Easy Dificultad: Fácil Moderadamente

Instructions Instrucciones

Things You'll Need: Cosas que usted necesitará:

Dreamweaver CS3 software Dreamweaver CS3 A partly complete web page or site Una web completa en parte, la página o el

sitio

1. 1 1

The default appearance La apariencia predeterminada

Accordion panels provide a way to use a small piece of web page real estate to contain several "panels" of information that the user moves between. paneles de acordeón proporcionan una forma de utilizar un pequeño pedazo de bienes raíces página para contener varios "grupos especiales" de información que el usuario se mueve entre ellos. You can put images, text and other content on the panels. Usted puede poner imágenes, texto y el contenido de los paneles. This image shows a default accordion panel before customization. Esta imagen muestra un grupo de acordeón por defecto antes de la adaptación.

2. 2 2

This icon in the Insert bar is for Spry Accordion Panels. Este icono de la barra Insertar Spry es para paneles de acordeón.

Place the cursor on your document in the position where you want to insert the accordion panels. Sitúe el cursor en su documento en la posición donde desea insertar los paneles de acordeón. Click the Accordion Panel icon in the Spry category on the Insert bar. Haga clic en el icono de Panel de acordeón en la categoría Spry en la barra Insertar.

3. 3 3

The Spry widget will open on the page. El widget de Spry se abrirá en la página. When the Spry object appears, there are two labels and one content area visible. Cuando el objeto Spry aparece, hay dos etiquetas y un área de contenido visible. The lables are simply named Label 1 and Lable 2. El lables son simplemente llamado Label 1 y 2 lable. The content area is numbered to match the corresponding label. El área de contenido se numera para que coincida con la etiqueta correspondiente. See the image in Step 3. Ver la imagen en el paso 3.

4. 4 4

Add or remove panels with the Property inspector. Agregar o quitar paneles con el inspector de propiedades.

When the blue outline highlighting the Spry object is present in the document window, you can use the Property inspector to customize the widget. Cuando el contorno azul destacando el objeto Spry está presente en la ventana del documento, puede utilizar el inspector de propiedades para personalizar el widget. Here you insert or remove accordion panels and change the order of the panels. Aquí usted inserte o retire los paneles de acordeón y cambiar el orden de los paneles.

5. 5 5

Change the label text in the document window. Cambiar el texto de la etiqueta en la ventana de documento.

Change the labels on the panels by highlighting them in the document window. Cambiar las etiquetas de los paneles, poniendo de relieve en la ventana de documento. You'll see the eye indicating which tab is visible, plus you'll be able to change the wording on the label. Verá el ojo que indica la ficha que esté visible, además de que será capaz de modificar la redacción en la etiqueta. Note the new label at the arrow in the image. Tenga en cuenta la nueva etiqueta en la flecha en la imagen.

6. 6 6

Click the eye to edit a content panel. Haga clic en el ojo para editar un panel de contenidos.

To add content to a panel, run your mouse over the right side of the panel label area to reveal an eye symbol. Para agregar contenido a un panel, ejecute el ratón sobre el lado derecho del área de la etiqueta del panel para mostrar un símbolo de los ojos. Click the eye to open up the content panel for editing. Haga clic en el ojo para abrir el panel de contenido para editarlo.

7. 7 7

Change appearance using CSS Cambiar la apariencia usando CSS

To customize the appearance of the widget, use CSS. Para personalizar la apariencia del widget, CSS uso. When you inserted the Accordion Panel,

Dreamweaver automatically generated a stylesheet and some JavaScripts and inserted them in your site. Cuando se inserta el Grupo de Acordeón, Dreamweaver genera automáticamente una hoja de estilo y JavaScripts algunos y se inserta en su sitio. Find the Spry Accordion styles in your CSS styles panel. Buscar los estilos de Spry Acordeón en su panel de estilos CSS. You can edit these styles to change colors, widths and other appearance features of the tabbed panels. Puede modificar estos estilos para cambiar los colores, anchuras y otras características de apariencia de los paneles con fichas.

8. 8 8

Detailed comments in the stylesheet Observaciones detalladas en la hoja de estilos

If you have problems figuring out what all these styles do, double-click the name of the stylesheet (SpryAccordion.css) and open the CSS page. Si tiene problemas de averiguar lo que hacen todos estos estilos, haga doble clic en el nombre de la hoja de estilos (SpryAccordion.css) y abrir la página de CSS. You'll see that it is lavishly commented to help you understand what each style rule is for and to see what can be changed. Verás que está espléndidamente comentado para ayudarle a entender lo que cada regla de estilo es para y para ver qué se puede cambiar.

9. 9 9

When you've finished inserting the content for each panel and have made any changes to the CSS, you're ready to upload the new page. Cuando hayas terminado de insertar el contenido de cada panel y se han realizado cambios a la CSS, usted está listo para cargar la nueva página. Be sure to upload all the HTML, CSS and JavaScript files related to making the Spry widget function properly. Asegúrese de cargar todo el HTML, CSS y JavaScript archivos relacionados con la función de toma de widget Spry correctamente.

Cómo usar el componente Accordion de Adobe Spry

Introducción

Seguramente algunas vez visitamos el sitio web de Adobe, y una de las cosas que más nos llaman la atención es el efecto acordion que se usa para reducir el espacio necesario para mostrar alguna parte de nuestro sitio, y que en el caso de Adobe se usa para que en lugar de tener una tabla con 3 celdas en fila vertical, que corresponden a las secciones: Productos, Soluciones y Sectores; se pueda usar un acordion que al pasar el mouse sobre una sección, esta se expanda y al pasarlo sobre otra suceda lo mismo pero la anterior se vuelve a contraer.

Si no sabes a que me refiero puedes ver el efecto desde la web de Adobe.

También en este tip, aprovecho para explicar algunas cosas sobre el componente Accordion que talvez algunos que nos pik inglish no comprendan, como los comentarios que vienen en el código CSS.

¿Cómo es que nos ayuda este componente?

El componente Accordion (como se nombra en inglés) nos ayuda al momento de tener una gran cantidad de contenido que mostrar, como una lista de links recomendados o las categorías de nuestro blog o sitio, o simplemente para darle un aspecto más elegante a nuestro página web.

Acerca de

La versión de este componente usado en la página de Adobe es la 2007 (ó 2008 no recuerdo bien), la cual esta protegida por una licencia, por lo que sería un delito usarla sin permiso de Adobe.

Pero al menos se encuentra disponible la versión 2006 en estado libre, la cual usaremos para este tip, esta versión es posible descargarla desde Adobe Labs, pero para que te ahorres esta descarga, les dejo los códigos necesarios para su uso. La única desventaja es que se debe dar click sobre la sección para que se expanda.

Usar el componente

Pues luego de todo lo anterior procedamos a crear este efecto.Primero que nada, al descargar el componente desde Adobe Labs tendríamos 3 archivos:

SpryAccordion.cssSpryAccordion.jsSpryAccordion.html

El primero es la hoja de estilos que define los colores entre otras cosas de cada panel.El segundo es el que realiza prácticamente todo el trabajo sucio, es un código JavaScript.El tercero es solo el documento HTML en el que se da el ejemplo para visualizarlo desde el navegador.

Antes de abrir el Dreamweaver debemos de crear una carpeta nueva dentro de cualquier lugar de nuestra PC, esta la llamaremos "Accordion"; solo para tener las cosas en un solo lugar.

Ahora si abrirmos el Dreamweaver (o incluso si no lo tienen basatará con usar el Bloc de notas) y creamos una nueva hoja de estilos en cascada (CSS)

Y agregamos el siguiente código:

Código :

@charset "UTF-8";

/* SpryAccordion.css - version 0.4 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/* Aquí se define el estilo para el contenedor del Accordion. Como estilo

* predeterminado, se dibujan bordes por la izquierda, derecha y abajo. El borde

* de la parte de arriba se define por el primer panel en AccordionPanelTab, que

* es el de mero arriba, el que nunca se mueve.

*/

.Accordion {

   border-left: solid 1px gray;

   border-right: solid 1px black;

   border-bottom: solid 1px gray;

   overflow: hidden;

}

/* Aquí se define el AccordionPanel, es decir el panel que contiene todas

* las cosas que ponemos. Aunque no tiene ningún aspecto gráfico

* es necesario dejarlo en claro que  debe de tener 0 en margin y padding.

*/

.AccordionPanel {

   margin: 0px;

   padding: 0px;

}

/* Aquí se define el AccordionPanelTab, la pestaña que lleva el título

* del panel y donde se detecta el click para abrir cualquier panel.

.AccordionPanelTab {

   background-color: #333;

   border-top: solid 1px black;

   border-bottom: solid 1px gray;

   margin: 0px;

   padding: 2px;

   cursor: pointer;

   -moz-user-select: none;

   -khtml-user-select: none;

   font-size: 14px;

}

/* Aquí se define el AccordionPanelContent, donde se encuentra el contenido del panel.

* Es importante saber que no se debe de poner ningún padding nunca al area que

* del contenido del panel para usar las animaciones. Siempre se debe de poner 0px

* de padding, porque si no la altura de los paneles se cambian al animarse la expansión.

*

* Cualquiera que estilize un acordion, debe de establecer la altura en el

* contenedor con la clase "AccordionPanelContent"

*/

.AccordionPanelContent {

   overflow: auto;

   margin: 0px;

   padding: 0px;

   height: 200px;

            color: #000;

}

/* Este es un ejemplo de como cambiar la apariencia de la pestaña de un panel abierto.

* La clase "AccordionPanelOpen" es agregada y removida a el panel según el usuario

* haga click sobre la pestaña del acordion.

*/

.AccordionPanelOpen .AccordionPanelTab {

   background-color:#666;

   font-size: 14px;

}

/* Este es un ejemplo de como cambiar la apariencia de la pestaña del panel cuando

* el mouse se coloca sobre ella. El nombre de clase "AccordionPanelTabHover" es

* agregada y removida de forma programada a las pestañas del panel en mientras el mouse

* haya abierto un panel. En este caso, yo configuré la CSS a mi gusto, y deje el mismo

* color (#CCC) para el panel abierto al hacerle over, que a los que quedan cerrados;

* pero si lo deseas puedes optar por cambiarlo.

*/

.AccordionPanelTabHover {

   color: #CCC;

}

.AccordionPanelOpen .AccordionPanelTabHover {

   color: #CCC;

}

/* Este es un ejemplo de como personalizar la apariencia de todas las pestañas del panel

/* mientras estemos enfocados en el Accordion. La clase "AccordionFocused" es agregada

/* y removida de forma programada al Accordion al detectarse que se use o no.

/* En esta ocasion también puse el mismo color (#333) al estar usandose o no el acordion.

/* pero si lo deseas puedes cambiarlo.

*/

.AccordionFocused .AccordionPanelTab {

   background-color: #333;

}

/* Este es un ejemplo de como puede cambiarse la apariencia de la pestaña de panel que esta

/* abierto mientras el panel este en uso.

* Por cuestion de gustos también deje el color (#666) igual al estar en uso el acordion y

* al no estarlo

*/

.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {

   background-color: #666;

}

[/css]

Iba a explicar cada función de las clases que se especifican, pero me di cuenta de que eran muchas y resultaría muy confuso buscarlas entre el código, así que la explicación la puse junto al código.

[b]Nota: Es importante que leas los comentarios añadidos al código para que veas algunas reglas básicas en el diseño del componente, y su correcta función.[/b]

Con respecto a las siguientes clases:

[list]

.Accordion

.AccordionPanel

.AccordionPanelTab

.AccordionPanelContent

No es importante su nombre de clase para que el efecto funcione de forma correcta, puedes usar cualquier otro nombre de clase para darle estilo.

Y en todas las partes donde menciono que son solo ejemplos de personalizar el componente Accordion, son solo si queremos definir o personalizar mas el componente. Pero no es necesario que se haga uso de ellos.

En la definición de la clase .AccordionPanelTab se usan las propiedades "-moz-user-select" y "-khtml-user-select" para evitar que el usuario pueda seleccionar el texto en AccordionPanelTab (las pestañas del acordion). Esas propiedades de los navegadores solo funcionan en navegadores basados en Mozilla (como Firefox) y tambien en los que se basan en KHTML (como Safari), pero no pasan la validación de W3C. Si quieres usarlo y que sea válido el código, y no te importa si se puede seleccionar el texto que esta en las pestañas del acordion puedes remover esas 2 líneas, y no se dañará el componente ni sus funciones.

Dejando en claro todo lo anterior, y con nuestro código bien definido y/o corregido procedemos a guardar nuestro documento con el nombre: SpryAccordion y su respectiva extensión (.css)

Ahora procedamos al código JavaScript (JS), el cual posee una declaración sobre derechos de autor etcétera, etcétera, etcétera... en los comentarios. Por lo que les aviso que na vayan a usarlo sin cumplir sus condiciones, las cuales removí para el tip, pero que si desean modificarlo considero que deberán leer el código original desde aquí.

Con respecto al código JavaScript les tengo una mala noticia:

...

Por desgracia no se JS Y me había propuesto darle un breve analisis al código a ver si entendía algo, pero con solo

ver la extensión del código me dió miedo Así que aquí se los dejo tal cual es (omitiendo lo de la declaración de derechos de autor).Creamos un nuevo documento de JavaScript y pegamos el siguiente código:

Código :

// SpryAccordion.js - version 0.15 - Spry Pre-Release 1.6.1 // // Copyright (c) 2006. Adobe Systems Incorporated. // All rights reserved.  var Spry; if (!Spry) Spry = {}; if (!Spry.Widget) Spry.Widget = {};  Spry.Widget.Accordion = function(element, opts) {    this.element = this.getElement(element);    this.defaultPanel = 0;    this.hoverClass = "AccordionPanelTabHover";    this.openClass = "AccordionPanelOpen";    this.closedClass = "AccordionPanelClosed";    this.focusedClass = "AccordionFocused";    this.enableAnimation = true;    this.enableKeyboardNavigation = true;    this.currentPanel = null;    this.animator = null;    this.hasFocus = null;     this.previousPanelKeyCode = Spry.Widget.Accordion.KEY_UP;    this.nextPanelKeyCode = Spry.Widget.Accordion.KEY_DOWN;     this.useFixedPanelHeights = true;    this.fixedPanelHeight = 0;     Spry.Widget.Accordion.setOptions(this, opts, true);     this.attachBehaviors(); };  Spry.Widget.Accordion.prototype.getElement = function(ele) 

{    if (ele && typeof ele == "string")       return document.getElementById(ele);    return ele; };  Spry.Widget.Accordion.prototype.addClassName = function(ele, className) {    if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))       return;    ele.className += (ele.className ? " " : "") + className; };  Spry.Widget.Accordion.prototype.removeClassName = function(ele, className) {    if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))       return;    ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), ""); };  Spry.Widget.Accordion.setOptions = function(obj, optionsObj, ignoreUndefinedProps) {    if (!optionsObj)       return;    for (var optionName in optionsObj)    {       if (ignoreUndefinedProps && optionsObj[optionName] == undefined)          continue;       obj[optionName] = optionsObj[optionName];    } };  Spry.Widget.Accordion.prototype.onPanelTabMouseOver = function(e, panel) {    if (panel)       this.addClassName(this.getPanelTab(panel), this.hoverClass);    return false; };  Spry.Widget.Accordion.prototype.onPanelTabMouseOut = function(e, panel) {    if (panel)       this.removeClassName(this.getPanelTab(panel), this.hoverClass);    return false; };  Spry.Widget.Accordion.prototype.openPanel = function(elementOrIndex) 

{    var panelA = this.currentPanel; 

   var panelB;     if (typeof elementOrIndex == "number")       panelB = this.getPanels()[elementOrIndex];    else       panelB = this.getElement(elementOrIndex);        if (!panelB || panelA == panelB)          return null;     var contentA = panelA ? this.getPanelContent(panelA) : null;    var contentB = this.getPanelContent(panelB);     if (!contentB)       return null;     if (this.useFixedPanelHeights && !this.fixedPanelHeight)       this.fixedPanelHeight = (contentA.offsetHeight) ? contentA.offsetHeight : contentA.scrollHeight;     if (this.enableAnimation)    {       if (this.animator)          this.animator.stop();       this.animator = new Spry.Widget.Accordion.PanelAnimator(this, panelB, { duration: this.duration, fps: this.fps, transition: this.transition });       this.animator.start();    }    else    {       if(contentA)       {          contentA.style.display = "none";          contentA.style.height = "0px";       }       contentB.style.display = "block";       contentB.style.height = this.useFixedPanelHeights ? this.fixedPanelHeight + "px" : "auto";    }     if(panelA)    {       this.removeClassName(panelA, this.openClass);       this.addClassName(panelA, this.closedClass);    }     this.removeClassName(panelB, this.closedClass);    this.addClassName(panelB, this.openClass);     this.currentPanel = panelB;     return panelB; };  Spry.Widget.Accordion.prototype.closePanel = function() {    // The accordion can only ever have one panel open at any    // give time, so this method only closes the current panel.    // If the accordion is in fixed panel heights mode, this 

   // method does nothing.     if (!this.useFixedPanelHeights && this.currentPanel)    {       var panel = this.currentPanel;       var content = this.getPanelContent(panel);       if (content)       {          if (this.enableAnimation)          {             if (this.animator)                this.animator.stop();             this.animator = new Spry.Widget.Accordion.PanelAnimator(this, null, { duration: this.duration, fps: this.fps, transition: this.transition });             this.animator.start();          }          else          {             content.style.display = "none";             content.style.height = "0px";          }       }             this.removeClassName(panel, this.openClass);       this.addClassName(panel, this.closedClass);       this.currentPanel = null;    } };  Spry.Widget.Accordion.prototype.openNextPanel = function() {    return this.openPanel(this.getCurrentPanelIndex() + 1); };  Spry.Widget.Accordion.prototype.openPreviousPanel = function() {    return this.openPanel(this.getCurrentPanelIndex() - 1); };  Spry.Widget.Accordion.prototype.openFirstPanel = function() {    return this.openPanel(0); };  Spry.Widget.Accordion.prototype.openLastPanel = function() {    var panels = this.getPanels();    return this.openPanel(panels[panels.length - 1]); };  Spry.Widget.Accordion.prototype.onPanelTabClick = function(e, panel) 

{    if (panel != this.currentPanel)       this.openPanel(panel);    else       this.closePanel();     if (this.enableKeyboardNavigation)       this.focus(); 

    if (e.preventDefault) e.preventDefault();    else e.returnValue = false;    if (e.stopPropagation) e.stopPropagation();    else e.cancelBubble = true;     return false; };  Spry.Widget.Accordion.prototype.onFocus = function(e) {    this.hasFocus = true;    this.addClassName(this.element, this.focusedClass);    return false; };  Spry.Widget.Accordion.prototype.onBlur = function(e) {    this.hasFocus = false;    this.removeClassName(this.element, this.focusedClass);    return false; };  Spry.Widget.Accordion.KEY_UP = 38; Spry.Widget.Accordion.KEY_DOWN = 40;  Spry.Widget.Accordion.prototype.onKeyDown = function(e) {    var key = e.keyCode;    if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))       return true;        var panels = this.getPanels();    if (!panels || panels.length < 1)       return false;    var currentPanel = this.currentPanel ? this.currentPanel : panels[0];    var nextPanel = (key == this.nextPanelKeyCode) ? currentPanel.nextSibling : currentPanel.previousSibling;     while (nextPanel)    {       if (nextPanel.nodeType == 1 /* Node.ELEMENT_NODE */)          break;       nextPanel = (key == this.nextPanelKeyCode) ? nextPanel.nextSibling : nextPanel.previousSibling;    }     if (nextPanel && currentPanel != nextPanel)       this.openPanel(nextPanel);     if (e.preventDefault) e.preventDefault();    else e.returnValue = false;    if (e.stopPropagation) e.stopPropagation();    else e.cancelBubble = true;     return false; };  

Spry.Widget.Accordion.prototype.attachPanelHandlers = function(panel) {    if (!panel)       return;     var tab = this.getPanelTab(panel);     if (tab)    {       var self = this;       Spry.Widget.Accordion.addEventListener(tab, "click", function(e) { return self.onPanelTabClick(e, panel); }, false);       Spry.Widget.Accordion.addEventListener(tab, "mouseover", function(e) { return self.onPanelTabMouseOver(e, panel); }, false);       Spry.Widget.Accordion.addEventListener(tab, "mouseout", function(e) { return self.onPanelTabMouseOut(e, panel); }, false);    } };  Spry.Widget.Accordion.addEventListener = function(element, eventType, handler, capture) {    try    {       if (element.addEventListener)          element.addEventListener(eventType, handler, capture);       else if (element.attachEvent)          element.attachEvent("on" + eventType, handler);    }    catch (e) {} };  Spry.Widget.Accordion.prototype.initPanel = function(panel, isDefault) {    var content = this.getPanelContent(panel);    if (isDefault)    {       this.currentPanel = panel;       this.removeClassName(panel, this.closedClass);       this.addClassName(panel, this.openClass);        // Attempt to set up the height of the default panel. We don't want to       // do any dynamic panel height calculations here because our accordion       // or one of its parent containers may be display:none.        if (content)       {          if (this.useFixedPanelHeights)          {             // We are in fixed panel height mode and the user passed in             // a panel height for us to use.                 if (this.fixedPanelHeight)                content.style.height = this.fixedPanelHeight + "px";          } 

         else          {             // We are in variable panel height mode, but since we can't             // calculate the panel height here, we just set the height to             // auto so that it expands to show all of its content.                 content.style.height = "auto";          }       }    }    else    {       this.removeClassName(panel, this.openClass);       this.addClassName(panel, this.closedClass);        if (content)       {          content.style.height = "0px";          content.style.display = "none";       }    }        this.attachPanelHandlers(panel); };  Spry.Widget.Accordion.prototype.attachBehaviors = function() {    var panels = this.getPanels();    for (var i = 0; i < panels.length; i++)       this.initPanel(panels[i], i == this.defaultPanel);     // Advanced keyboard navigation requires the tabindex attribute    // on the top-level element.     this.enableKeyboardNavigation = (this.enableKeyboardNavigation && this.element.attributes.getNamedItem("tabindex"));    if (this.enableKeyboardNavigation)    {       var self = this;       Spry.Widget.Accordion.addEventListener(this.element, "focus", function(e) { return self.onFocus(e); }, false);       Spry.Widget.Accordion.addEventListener(this.element, "blur", function(e) { return self.onBlur(e); }, false);       Spry.Widget.Accordion.addEventListener(this.element, "keydown", function(e) { return self.onKeyDown(e); }, false);    } };  Spry.Widget.Accordion.prototype.getPanels = function() {    return this.getElementChildren(this.element); };  Spry.Widget.Accordion.prototype.getCurrentPanel = function() {    return this.currentPanel; };  

Spry.Widget.Accordion.prototype.getPanelIndex = function(panel) {    var panels = this.getPanels();    for( var i = 0 ; i < panels.length; i++ )    {       if( panel == panels[i] )          return i;    }    return -1; };  Spry.Widget.Accordion.prototype.getCurrentPanelIndex = function() {    return this.getPanelIndex(this.currentPanel); };  Spry.Widget.Accordion.prototype.getPanelTab = function(panel) {    if (!panel)       return null;    return this.getElementChildren(panel)[0]; };  Spry.Widget.Accordion.prototype.getPanelContent = function(panel) {    if (!panel)       return null;    return this.getElementChildren(panel)[1]; };  Spry.Widget.Accordion.prototype.getElementChildren = function(element) {    var children = [];    var child = element.firstChild;    while (child)    {       if (child.nodeType == 1 /* Node.ELEMENT_NODE */)          children.push(child);       child = child.nextSibling;    }    return children; };  Spry.Widget.Accordion.prototype.focus = function() {    if (this.element && this.element.focus)       this.element.focus(); };  Spry.Widget.Accordion.prototype.blur = function() {    if (this.element && this.element.blur)       this.element.blur(); };  /////////////////////////////////////////////////////  Spry.Widget.Accordion.PanelAnimator = function(accordion, panel, opts) 

{    this.timer = null;    this.interval = 0;     this.fps = 60;    this.duration = 500;    this.startTime = 0;     this.transition = Spry.Widget.Accordion.PanelAnimator.defaultTransition;     this.onComplete = null;     this.panel = panel;    this.panelToOpen = accordion.getElement(panel);    this.panelData = [];    this.useFixedPanelHeights = accordion.useFixedPanelHeights;     Spry.Widget.Accordion.setOptions(this, opts, true);     this.interval = Math.floor(1000 / this.fps);     // Set up the array of panels we want to animate.     var panels = accordion.getPanels();    for (var i = 0; i < panels.length; i++)    {       var p = panels[i];       var c = accordion.getPanelContent(p);       if (c)       {          var h = c.offsetHeight;          if (h == undefined)             h = 0;           if (p == panel && h == 0)             c.style.display = "block";           if (p == panel || h > 0)          {             var obj = new Object;             obj.panel = p;             obj.content = c;             obj.fromHeight = h;             obj.toHeight = (p == panel) ? (accordion.useFixedPanelHeights ? accordion.fixedPanelHeight : c.scrollHeight) : 0;             obj.distance = obj.toHeight - obj.fromHeight;             obj.overflow = c.style.overflow;             this.panelData.push(obj);              c.style.overflow = "hidden";             c.style.height = h + "px";          }       }    } };  Spry.Widget.Accordion.PanelAnimator.defaultTransition = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); }; 

 Spry.Widget.Accordion.PanelAnimator.prototype.start = function() {    var self = this;    this.startTime = (new Date).getTime();    this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval); };  Spry.Widget.Accordion.PanelAnimator.prototype.stop = function() {    if (this.timer)    {       clearTimeout(this.timer);        // If we're killing the timer, restore the overflow       // properties on the panels we were animating!        for (i = 0; i < this.panelData.length; i++)       {          obj = this.panelData[i];          obj.content.style.overflow = obj.overflow;       }    }     this.timer = null; };  Spry.Widget.Accordion.PanelAnimator.prototype.stepAnimation = function() {    var curTime = (new Date).getTime();    var elapsedTime = curTime - this.startTime;     var i, obj;     if (elapsedTime >= this.duration)    {       for (i = 0; i < this.panelData.length; i++)       {          obj = this.panelData[i];          if (obj.panel != this.panel)          {             obj.content.style.display = "none";             obj.content.style.height = "0px";          }          obj.content.style.overflow = obj.overflow;          obj.content.style.height = (this.useFixedPanelHeights || obj.toHeight == 0) ? obj.toHeight + "px" : "auto";       }       if (this.onComplete)          this.onComplete();       return;    }     for (i = 0; i < this.panelData.length; i++)    {       obj = this.panelData[i];       var ht = this.transition(elapsedTime, obj.fromHeight, obj.distance, this.duration); 

      obj.content.style.height = ((ht < 0) ? 0 : ht) + "px";    }        var self = this;    this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval); }; 

Si alguien aquí sabe JS y se atreviese a explicar el código anterior, creo que ya tiene una

buena razón para escribir un tip sobre esto Lo guardamos como SpryAccordion con la extensión de un código JavaScript (.js)

Pues ahora pasemos al documento HTML.Creamos un nuevo documento HTML, y pegamos el siguiente código:

Código :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <!-- Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. -->  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  <title>Spry Accordion</title>  <!-- inicia referencia al código JavaScript del componente Accordion --> <script language="JavaScript" type="text/javascript" src="SpryAccordion.js"></script>  <!-- termina referencia al código JavaScript del componente Accordion --> <!-- inicia referencia a la hoja de estilos en cascada --> <link href="SpryAccordion.css" rel="stylesheet" type="text/css" />  <!-- termina referencia a la hoja de estilos en cascada --> <!-- inicia definición de estilos de la tipografía del documento HTML --> <style type="text/css"> <!-- body,td,th {    font-family: Trebuchet MS, Arial, Helvetica, sans-serif;    font-size: 12px;    color: #FFF; } --> </style> <!-- termina definición de estilos de la tipografía del documento HTML --> </head>  <body> <!-- inicia el acordeon -->  <div class="Accordion" id="sampleAccordion" tabindex="0">  <!-- empieza el panel 1 -->    <div class="AccordionPanel">      <!-- empieza la pestaña -->       <div class="AccordionPanelTab">Panel 1</div> 

        <!-- termina la pestaña -->         <!-- empieza el contenido del panel -->       <div class="AccordionPanelContent">           Aquí va el contenido del panel 1<br />        </div>         <!-- termina el contenido del panel -->     </div>      <!-- termina el panel 1 -->     <!-- Así como fue el panel 1, se definen todos los demás -->    <div class="AccordionPanel">        <div class="AccordionPanelTab">Panel 2</div>        <div class="AccordionPanelContent">           Aquí va el contenido del panel 2       </div>     </div>     <div class="AccordionPanel">        <div class="AccordionPanelTab">Panel 3</div>        <div class="AccordionPanelContent">           Aquí va el contenido del panel 3       </div>     </div>     <div class="AccordionPanel">        <div class="AccordionPanelTab">Panel 4</div>        <div class="AccordionPanelContent">           Aquí va el contenido del panel 4       </div>     </div>      <!-- por último se cierra el acordeon --> </div>  <!-- como ya dije no se JS,así que no explico nada  --> <script language="JavaScript" type="text/javascript">  var sampleAccordion = new Spry.Widget.Accordion("sampleAccordion"); </script>  </body>  </html>  

| | | | | Illustrator tutoriales | tutoriales de Photoshop | Tutoriales InDesign | Acrobat Tutoriales | Tutoriales Dreamweaver | Tutoriales Flash

| | | | | | | | | Inicio | Acerca de | Capacitación | Calendario | Registro | Tutoriales | Freelance | Contacto | FA Q | Conviértete en un ACE