Aulas
Disciplinas

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

arrow_back Aula 09 - jQuery (Parte 3)

Tabs

Por meio do método 'tabs' da jQuery UI, os elementos selecionados são exibidos como abas. Veja seu uso na Figura 10 e em seu respectivo código fonte mostrado a seguir.

Figura 10 - Tabs
Tabs
AخA
1
<script type="text/javascript">
2
$(function() {
3
      $("#tabs").tabs();
4
});
5
</script>
6
7
<div id="tabs">
8
      <ul>
9
            <li><a href="#aba_1">Primeira Aba</a></li>
10
            <li><a href="#aba_2">Segunda Aba</a></li>
11
            <li><a href="#aba_3">Terceira Aba</a></li>
12
      </ul>
13
      <div id="aba_1">
14
            <p>Corpo da aba 1.</p>
15
      </div>
16
      <div id="aba_2">
17
            <p>Corpo da aba 2.</p>
18
      </div>
19
      <div id="aba_3">
20
            <p>Corpo da aba 3.</p>
21
      </div>
22
</div>
  • Para criar uma aba, basta criar uma entrada na lista (elemento ul) e associar o clique da mesma a uma div.
[A] Anterior
14/18
Próxima [D]

Sumário

Versão 5.3 - Todos os Direitos reservados