Aulas
Disciplinas

Cursos / Informática para Internet / Desenvolvimento Web II / Aula

arrow_back Aula 09 - jQuery (Parte 3)

Accordion

O componente Accordion é, basicamente, um menu onde cada item tem um corpo oculto (uma div) que será exibido caso seja clicado. Veja esse menu através da Figura 3.

Figura 03 - Menu criado por componente Accordion.
Menu criado por componente Accordion.

Um Accordion jQuery UI é formado por contêineres (<div>) e headers (<h>) seguindo uma organização hierárquica:

​x
1
<script>
2
      $(function() {
3
            $("#accordion_1").accordion();
4
      });
5
</script>
6
<div id="accordion_1">
7
      <h3><a href="#">EM ALGUMA PARTE ALGUMA</a></h3>
8
      <div>
9
            <p>Texto do item 1</p>
10
      </div>
11
12
      <h3><a href="#">CABANA, A</a></h3>
13
      <div>
14
            <p>A filha mais nova de Mackenzie Allen Philip foi raptada durante as férias em família e há evidências de que ela foi brutalmente assassinada e abandonada numa cabana. Quatro anos mais tarde, Mack recebe uma nota suspeita, aparentemente vinda de Deus, convidando-o para voltar àquela cabana e passar o fim de semana. Ignorando alertas de que poderia ser uma cilada, ele segue numa tarde de inverno e volta ao cenário de seu pior pesadelo. O que encontra lá muda sua vida para sempre.</p>
15
      </div>
16
​
17
      <h3><a href="#">TEMPO ENTRE COSTURAS, O</a></h3>
18
      <div>
19
            <p>Texto do item 2</p>
20
      </div>
21
​
22
      <h3><a href="#">HOMENS QUE NAO AMACAM AS MULHERES, OS</a></h3>
23
      <div>
24
            <p>Texto do item 2</p>
25
      </div>
26
​
27
</div>
  • Um item no Accordion significa um header (h3) seguido de um container (div).
  • O que diferencia o exemplo acima de apenas HTML puro é a chamada JavaScript no início do bloco (“$("#accordion_1").accordion();”) que informa a biblioteca jQuery UI que a div cujo id é 'accordion_1' é um Accordion.
  • O corpo de um item de um Accordion não está restrito a um simples texto, como mostrado no exemplo acima; na verdade, o mesmo pode conter qualquer elemento HTML.
[A] Anterior
5/18
Próxima [D]

Sumário

Versão 5.3 - Todos os Direitos reservados