Acordeão simples com a classe USimpleTabStrip

Quarta-feira, 20 de agosto de 2008

A classe USimpleTabStrip apresentou discreta Simples TabStrip, também pode ser usado para criar um simples menu Acordeão.
Usando os efeitos da BlindUp() BlindDown() oferecido pela Scriptaculous:

Texto Simples
JavaScript:
  1. função init () (
  2. ; UTS = new USimpleTabStrip ();
  3. ; UTS. Init ();
  4. ( e ) { UTS. OnShow = função (e) (
  5. ( e ) ; Efeito novo. BlindDown (e);
  6. )
  7. ( e ) { UTS. OnHide = função (e) (
  8. ( e ) ; Efeito novo. BlindUp (e);
  9. )
  10. )

E colocá-la de volta sobre o HTML (fonte HTML):

Texto Simples
HTML:
  1. > <div class = "accordion">
  2. > Accordion 1 </a> <a href = "#acc1"> Acordeão 1 </ a>
  3. > </a> <a name = "acc1"> </ a>
  5. <h1> Conteúdo # 1 </ h1>
  6. <p> Bla bla bla .... </ p>
  7. </ Div>
  9. > Accordion 2 </a> <a href = "#acc2"> Acordeão 2 </ a>
  10. > </a> <a name = "acc2"> </ a>
  12. <h1> Conteúdo # 2 </ h1>
  13. <p> Bla bla bla .... </ p>
  14. </ Div>
  16. > Accordion 3 </a> <a href = "#acc3"> Acordeão 3 </ a>
  17. > </a> <a name = "acc3"> </ a>
  19. <h1> Conteúdo # 3 </ h1>
  20. <p> Bla bla bla .... </ p>
  21. </ Div>
  23. </ Div>

Você começa um simples menu Acordeão que podem ser utilizadas em grande velocidade.

Post relacionado

Tags: Tutoriais, discretos

Deixe um comentário

TAG XHTML <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Use <pre> para circundar código