c




 
c 

 

R


   
 

Dreamweaver CS3 viene equipado con funciones de etiqueta de Spry, que son una forma
WYSIWYG para añadir AJAX a una página web. Automáticamente le proporcionará con
HTML, CSS y JavaScript para realizar ciertas funciones interactivas. En este artículo
usted aprenderá cómo utilizar el widgetSpryAccordion paneles.
Dificultad: Fácil Moderadamente



c 


@ Dreamweaver CS3
@ Una web completa en parte, la página o el sitio

1. 1

La apariencia predeterminada

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. Usted puede poner
imágenes, texto y el contenido de los paneles. Esta imagen muestra un
grupo de acordeón por defecto antes de la adaptación.

2. 2

Este icono de la barra Insertar Spry es para paneles de acordeón.

Sitúe el cursor en su documento en la posición donde desea insertar los

paneles de acordeón. Haga clic en el icono de Panel de acordeón en la
categoría Spry en la barra Insertar.
3. 3

El widget de Spry se abrirá en la pá gina. Cuando el objeto Spry aparece,

hay dos etiquetas y un área de contenido visible. El lables son simplemente
llamado Label 1 y 2 lable. El área de contenido se numera para que
coincida con la etiqueta correspondiente. Ver la imagen en el paso 3.

4. 4

Agregar o quitar paneles con el inspector de propiedades.

Cuando el contorno azul destaca ndo el objeto Spry está presente en la

ventana del documento, puede utilizar el inspector de propiedades para
personalizar el widget. Aquí usted inserte o retire los paneles de acordeón
y cambiar el orden de los paneles.

5. 5

Cambiar el texto de la etiqueta en la ventana de documento.

Cambiar las etiquetas de los paneles, poniendo de relieve en la ventana de

documento. Verá el ojo que indica la ficha que esté visible, además de que
será capaz de modificar la redacción en la etiqueta. Tenga en cuenta la
nueva etiqueta en la flecha en la imagen.

6. 6

Haga clic en el ojo para editar un panel de contenidos.

 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. Haga
clic en el ojo para abrir el panel de contenido para editarlo.

7. 7

Cambiar la apariencia usando CSS

Para personalizar la apariencia del widget, CSS uso. Cuando se inserta el

Grupo de Acordeón, Dreamweaver genera au tomáticamente una hoja de
estilo y JavaScripts algunos y se inserta en su sitio. Buscar los estilos de
Spry Acordeón en su panel de estilos CSS. Puede modificar estos estilos
para cambiar los colores, anchuras y otras características de apariencia de
los paneles con fichas.

8. 8

Observaciones detalladas en la ho ja de estilos

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. 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

Cuando hayas terminado de insertar el contenido d e cada panel y se han

realizado cambios a la CSS, usted está listo para cargar la nueva página.
Asegúrese de cargar todo el HTML, CSS y JavaScript archivos relacionados
con la función de toma de widgetSpry correctamente.


 c
 

 



J



   
   

 
 
 
  à à

 
 


   
   
    

  
 
 
 


 



  


      

 


  
 !


 
 !

"
#  
$  
 
 

 

  

  
 




 

  
c!

â 
     
 
 


% 

 

 &


 #' 

  
 

 
 

   (

 
 )   

 
  

   !

 

*  

   +,,-& +,,.
' 

    


 )   
!

 

    +,,/   
 
  
   
 * $ 
 0


!*1
 0

( 

 
 !

  
 


    


 
!

 
 

 * )

$




!



!0


!$



% 
 $0   
   

 !
%   


    0

2
 !
%  
  

 3"4*  0
    !

  5



  
  
 c   

6

6   

  !

$
 5
&
   
 7 
 '


$0  


&c'

8
  

 

@charset "UTF -8";

/* SpryAcc ordion.css - version 0.4 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated.

Allrightsreserved. */

/* 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 dej arlo 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
* depadding, 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 ab ierto 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 q ue 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



9
  

 






  


   !

8   

 0
   

 


 
 
 

 !
$
 !

% 
  
ë

  à 6:
:: 
66:($
:
: 
6   

   

 "&  ;

 
'!%  
4 
&

< ' 
 =3"4*&

'  
 
>c!   
 
  

   
   ; 

+ ); 

 

!

50
   
 
?



 

 
 


 
  &!
'

$

 
2
 &2' 
 

 
$ 

# 
# 
# !!! 

 !   


 

 
 
)  

 

  
 )!

c
 
2
   
  


!!!



2 
8
$)    
 ) 
  

   

 
 
)) 0
&
   

 
$ '!
c


 2
 
  


 

// SpryAccordion.js - version 0.15 - Spry Pre-Release 1.6.1

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

a
Spry;
 (!Spry) Spry = ;
 (!Spry.Widget) Spry.Widget = ;

Spry.Widget.Accordion =  
(element, opts)

.element = .getElement(element);
.defaultPanel = 0;
.hoverClass = "AccordionPanelTabHover" ;
.openClass = "AccordionPanelOpen" ;
.closedClass = "AccordionPanelClosed" ;
.focusedClass = "AccordionFocused" ;
.enableAnimation = true;
.enableKeyboardNavigation = true;
.currentPanel = null;
.animator = null;
.hasFocus = null;

.previousPanelKeyCode = Spry.Widget.Accordion.KEY_UP;
.nextPanelKeyCode = Spry.Widget.Accordion.KEY_DOWN;

.useFixedPanelHeights = true;
.fixedPanelHeight = 0;

Spry.Widget.Accordion.setOptions( , opts, true);

.attachBehaviors();
;

Spry.Widget.Accordion.prototype.getElement =  
(ele)

 (ele && 
 ele == "string")

 
 document.getElementById(ele);

 
 ele;
;

Spry.Widget.Accordion.prototype.addC lassName =  

(ele, classNa
me)

  (!ele || !className || (ele.className && ele.className.search(
 RegExp("\\b" + className + "\\b")) != -1))

 
;
ele.className += (ele.className ? " " : "") + className;
;

Spry.Widget.Accordion.prototype.removeClassName =  
(ele, clas
sName)

 (!ele || !className || (ele.className && ele.className.search(
 RegExp("\\b" + className + "\\b")) == -1))

 
;
ele.className = ele.className.replace(  RegExp("\\s*\\b" + clas
sName + "\\b", "g"), "");
;

Spry.Widget.Accordion.setOptions =  
(obj, optionsObj, ignoreU
ndefinedProps)

 (!optionsObj)

 
;


(a
optionName  optionsObj)

 (ignoreUndefinedProps && optionsObj[optionName] == 
)

 ;
obj[optionName] = optionsObj[optionName];

;

Spry.Widget.Accordion.prototype.onPanelTabMouseOver =  
(e, pa
nel)

 (panel)
.addClassName( .getPanelTab(pan el), .hoverClass);

 
 false;
;

Spry.Widget.Accordion.prototype.onPanelTabMouseOut =  
(e, pan
el)

 (panel)
.removeClassName( .getPanelTab(panel), .hoverClass)
;

 
 false;
;

Spry.Widget.Accordion. prototype.openPanel =  

(elementOrIndex)


a
panelA = .currentPanel;
a
panelB;

 ( 
 elementOrIndex == "number")
panelB = .getPanels()[elementOrIndex];

panelB = .getElement(elementOrIndex);

 (!panelB || panelA == panelB)

 
 null;
 a
contentA = panelA ? .getPanelContent(panelA) : null;
a
contentB = .getPanelContent(panelB);

 (!contentB)

 
 null;

 ( .useFixedPanelHeights && ! .fixedPanelHeight)

.fixedPanelHeight = (contentA.offsetHeight) ? contentA.off
setHeight : contentA.scrollHeight;

 ( .enableAnimation)

 ( .animator)
.animator.stop();
.animator =  Spry.Widget.Accordion.PanelAnimator( ,
panelB,  duration: .duration, fps: .fps, transition: .t
ransition );
.animator.start();



(contentA)

contentA.style.display = "none";
contentA.style.height = "0px";

contentB.style.display = "block";
contentB.style.height = .useFixedPanelHeights ? .fixed
PanelHeight + "px" : "auto";


(panelA)

.removeClassName(panelA, .openClass);
.addClassName(panelA, .closedClass);


.removeClassName(panelB, .closedClass);
.addClassName(panelB, .openClass);

.currentPanel = panelB;

 
 panelB;
;

Spry.Widget.Accordion.prototyp e.closePanel =  

()

// 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.

 (! .useFixedPanelHeights && .currentPanel)


a
panel = .currentPanel;
a
content = .getPanelContent(panel);
 (content)

 ( .enableAnimation)

 ( .animator)
 .animator.stop();
.animator =  Spry.Widget.Accordion.PanelAnimator(
, null,  duration: .duration, fps: .fps, transition: 
.transition );
.animator.start();



content.style.display = "none";
content.style.height = "0px";


.removeClassName(panel, .openClass);
.addClassName(panel, .closedClass);
.currentPanel = null;

;

Spry.Widget.Accordion.prototype.openNextPanel =  
()


 
 .openPanel( .getCurrentPanelIndex() + 1);
;

Spry.Widget.Accordion.prototype.openPreviousPanel =  
()


 
 .openPanel( .getCurrentPanelIndex() - 1);
;

Spry.Widget.Accordion.prototype.openFirstPanel =  
()


 
 .openPanel( 0);
;

Spry.Widget.Accordion.prototype.openLastPanel =  
()

a
panels = .getPanels();

 
 .openPanel(panel s[panels.length - 1]);
;

Spry.Widget.Accordion.prototype.onPanelTabClick =  
(e, panel)


 (panel != .currentPanel)
.openPanel(panel);

.closePanel();

 ( .enableKeyboardNavigation)
.focus();

 (e.preventDefault) e.preventDefault();
 e.returnValue = false;
 (e.stopPropagation) e.stopPropagation();
 e.cancelBubble = true;

 
 false;
;

Spry.Widget.Accordion.prototype.onFocus =  
(e)

.hasFocus = true;
 .addClassName( .element, .focusedClass);

 
 false;
;

Spry.Widget.Accordion.prototype.onBlur =  
(e)

.hasFocus = false;
.removeClassName( .element, .focusedClass);

 
 false;
;

Spry.Widget.Accordion.KEY_UP = 38;
Spry.Widget.Accordion.KEY_DOWN = 40;

Spry.Widget.Accordion.prototype.onKeyDown =  
(e)

a
key = e.keyCode;
 (! .hasFocus || (key != .previousPanelKeyCode && key !=
.nextPanelKeyCode))

 
 true;

a
panels = .getPanels();
 (!panels || panels.length < 1)

 
 false;
a
currentPanel = .currentPanel ? .currentPanel : panels
[0];
a
nextPanel = (key == .nextPanelK eyCode) ? currentPanel.nex
tSibling : currentPanel.previousSibling;

 (nextPanel)

 (nextPanel.nodeType == 1 /* Node.ELEMENT_NODE */)

 ;
nextPanel = (key == .nextPanelKeyCode) ? nextPanel.nextSib
ling : nextPanel.previousSibling;


 (nextPanel && currentPanel != nextPanel)

.openPanel(nextPanel);

 (e.preventDefault) e.preventDefault();
 e.returnValue = false;
 (e.stopPropagation) e.stopPropagation();
 e.cancelBubble = true;

 
 false;
;

Spry.Widget.Accordion.prototype.attachPanelHandlers =  
(panel
)

 (!panel)

 
;

a
tab = .getPanelTab(panel);

 (tab)

a
self = ;
Spry.Widget.Accordion.addEventListener(tab, "click",  
(
e) 
 
 self.onPanelTabClick(e, panel); , false);
 Spry.Widget.Accordion.addEventListener(tab, "mouseover" , 

(e) 
 
 self.onPanelTabMouseOver(e, panel); , false);
Spry.Widget.Accordion.addEventListener(tab, "mouseout" ,  

(e) 
 
 self.onPanelTabMouseOut(e, panel); , false);


;

Spry.Widget.Accordion.addEventListener =  
(element, eventType
, handler, capture)




 (element.addEventListener)
element.addEventListener(eventType, handler, capture);
  (element.attachEvent)
element.attachEvent( "on" + eventType, handler);

  (e) 
;

Spry.Widget.Accordion.prototype.initPanel =  
(panel, isDefaul
t)

a
content = .getPanelContent(panel);
 (isDefault)

.currentPanel = panel;
.removeClassName(panel, .closedClass);
.addClassNa me(panel, .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 a
ccordion
// or one of its parent containers may be display:none.

 (content)

 ( .useFixedPanelHeights)

// We are in fixed panel height mode and the user passed
in
// a panel height for us to use.

 ( .fixedPanelHeight)
content.style.height = .fixedPanelHeight + "px";



// We are in variable panel height mode, but since we ca
n't
// calculate the panel height here, we just set the heig
ht to
// auto so that it expands to show all of its content.

content.style.height = "auto";





 .removeClassName(panel, .openClass);
.addClassName(panel, .closedClass);

 (content)

content.style.height = "0px";
content.style.display = "none";



.attachPanelHandlers(panel);
;

Spry.Widget.Accordion.prototype.attachBehaviors =  
()

a
panels = .getPanels();


(a
i = 0; i < panels.length; i++)
.initPanel(panels[i], i == .defaultPanel);

// Advanced keyboard navigation requires the tabindex attribute

// on the top-level element.

.enableKeyboardNavigation = ( .enableKeyboardNavigation &&

.element.attributes.getNamedItem( "tabindex" ));
 ( .enableKeyboardNavigation)

a
self = ;
Spry.Widget.Accordion.addEventListener( .element, "focus",
 
(e) 
 
 self.onFocus(e); , false);
Spry.Widget.Accordion.addEventListener( .element, "blur", 
 
(e) 
 
 self.onBlur(e); , false);
Spry.Widget.Accordion.addEventListener( .element, "keydown"
,  
(e) 
 
 self.onKeyDown(e); , false);

;

Spry.Widget.Accordion.prototype.getPanels =  
()


 
 .getElementChildren( .element);
;

Spry.Widget.Accordion.prototype.getCurrentPanel =  
()


 
 .currentPanel;
;

Spry.Widget.Accordion.prototype.getPanelIndex =  
(panel)

a
panels = .getPanels();


( a
i = 0 ; i < panels.length; i++ )

( panel == panels[i] )

 
 i;


 
 -1;
;

Spry.Widget.Accordion.prototype.getCurrentPanelIndex =  
()


 
 .getPanelIndex( .currentPanel);
;
Spry.Widget.Accordion.prototype.getPanelTab =  
(panel)

 (!panel)

 
 null;

 
 .getElementChi ldren(panel)[ 0];
;

Spry.Widget.Accordion.prototype.getPanelContent =  
(panel)

 (!panel)

 
 null;

 
 .getElementChildren(panel)[ 1];
;

Spry.Widget.Accordion.prototype.getElementChildren =  
(elemen
t)

a
children = [];
a
child = element.firstChild;
 (child)

 (child.nodeType == 1 /* Node.ELEMENT_NODE */)
children.push(child);
child = child.nextSibling;


 
 children;
;

Spry.Widget.Accordion.prototype.focus =  
()

 ( .element && .element.focus)
.element.focus();
;

Spry.Widget.Accordion.prototype.blur =  
()

 ( .element && .element.blur)
.element.blur() ;
;

/////////////////////////////////////////////////////

Spry.Widget.Accordion.PanelAnimator =  
(accordion, panel, opt
s)

.timer = null;
.interval = 0;

.fps = 60;
.duration = 500;
.startTime = 0;

.transition = Spry.Widget.Accordion.PanelAnimator.defaultTran
sition;

.onComplete = null;

.panel = panel;
.panelToOpen = accordion.getElement(panel);
.panelData = [];
 .useFixedPanelHeights = accordion.us eFixedPanelHeights;

Spry.Widget.Accordion.setOptions( , opts, true);

.interval = Math.floor(1000 / .fps);

// Set up the array of panels we want to animate.

a
panels = accordion.getPanels();


(a
i = 0; i < panels.length; i++)

a
p = panels[i];
a
c = accordion.getPanelContent(p);
 (c)

a
h = c.offsetHeight;
 (h ==  )
h = 0;

 (p == panel && h == 0)
c.style.display = "block";

 (p == panel || h > 0)

a
obj =  Object;
obj.panel = p;
obj.content = c;
obj.fromHeight = h;
obj.toHeight = (p == panel) ? (accordion. useFixedPanelHe
ights ? accordion.fixedPanelHeight : c.scrollHeight) : 0;
obj.distance = obj.toHeight - obj.fromHeight;
obj.overflow = c.style.overflow;
.panelData.push(obj);

c.style.overflow = "hidden";
c.style.height = h + "px";



;

Spry.Widget.Accordion.PanelAnimator.defaultTransition =  
(tim
e, begin, finish, duration)  time /= duration;
 
 begin + ((2 -
time) * time * finish); ;

Spry.Widge t.Accordion.PanelAnimator.prototype.start =  

()

a
self = ;
.startTime = ( Date).getTime();
.timer = setTimeout(  
()  self.stepAnimation(); , 
.interval);
;

Spry.Widget.Accordion.PanelAnimator.prototype.stop =  
()

 ( .timer)

clearTimeout( .timer);

// If we're killing the timer, restore the overflow

// properties on the panels we were animating!
 

(i = 0; i < .panelData.length; i++)

obj = .panelData[i];
obj.content.style.overflow = obj.overflow;



.timer = null;
;

Spry.Widget.Accordion.PanelAnimator.prototype.stepAnimation =  

()

a
curTime = ( Date).getTime();
a
elapsedTime = curTime - .startTime;

a
i, obj;

 (elapsedTime >= .duration)




(i = 0; i < .panelData.length; i++)

obj = .panelData[i];
 (obj.panel != .panel)

obj.content.style.display = "none";
obj.content.style.height = "0px";

obj.content.style.overflow = obj.overflow;
obj.content.style.height = ( .useFixedPanelHeights || ob
j.toHeight == 0) ? obj.toHeight + "px" : "auto";

 ( .onComplete)
.onComplete();

 
;




(i = 0; i < .panelData.length; i++)

obj = .panelData[i];
a
ht = .transition(elapsedTime, obj.fromHeight, obj.dist
ance, .duration);
obj.content.style.height = ((ht < 0) ? 0 : ht) + "px";


a
self = ;
.timer = setTimeout(  
()  self.stepAnimation(); , 
.interval);
;



 )2   
 
 
  


   
*




 
   
2
 &!0'

$
 

 3"4*!
c


 3"4*
  

 

<!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
. -->
  xmlns="http://www.w3.org/1999/xhtml" 
 
 http-equiv="Content-Type" content="text/html; charset=iso -
8859-1" 
  Spry Accordion   
<!--
inicia referencia al código JavaScript del componente Accordion --
>

 language="JavaScript" type="text/javascript" src="SpryAccord
ion.js"
 
<!--
termina referencia al código JavaScript del componente Accordion --
>
<!-- inicia referencia a la hoja de estilos en cascada -->
 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 --
>
  type="text/css" 
<!--

 , ,  {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFF;
}
-->
 
<!--
termina definición de estilos de la tipografía del documento HTML -
->
 

 
<!-- inicia el acordeon -->
a class="Accordion" id="sampleAccordion" tabindex="0"
<!-- empieza el panel 1 -->
a class="AccordionPanel" 
<!-- empieza la pestaña -->
a class="AccordionPanelTab" Panel 1a
<!-- termina la pestaña -->
<!-- empieza el contenido del panel -->
a class="AccordionPanelContent" 
Aquí va el contenido del panel 1

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

 
 





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