No exemplo abaixo vamos levar em conta que temos um sistema qualquer que tenha o seu conteúdo divido em abas. Logo nestas abas, ao clicarmos em uma automaticamente as outras irão ser ocultadas e a selecionada irá ter o seu conteúdo apresentado.
A estrutura HTML seria a seguinte:
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="abas-curriculo"> <div class="aba-selecionada"> <a id="aba1" class="tab" onclick="return ajax.selecionaAba(this);">Aba 1</a> </div> <div class="div-tab"> <a id="aba2" class="tab" onclick="return ajax.selecionaAba(this);">Aba 2</a> </div> <div class="div-tab"> <a id="aba3" class="tab" onclick="return ajax.selecionaAba(this);">Aba 3</a> </div> </div> |
Daí depois temos as caixas de conteúdos, estas serão mostradas ou ocultadas conforme a aba selecionada.
A estrutura HTML das caixas HTML seria a seguinte:
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="caixa-conteudo-abas"> <div id="conteudo-aba1" class="aba-conteudo-visivel"> aba 1 </div> <div id="conteudo-aba2" class="aba-oculta"> aba 2 </div> <div id="conteudo-aba3" class="aba-oculta"> aba 3 </div> </div> |
Neste tutorial não será comentado o emprego de CSS, logo porque o foco do tutorial é o JQuery. :)
O nosso próximo passo é configurar os Javascripts necessários. Este exemplo é bem simples, logo você precisa apenas do JQuery e um arquivo JS para escrever as suas próprias funções.
Vamos considerar que já temos um arquivo *.PHP ou *.HTML. A classe Javascript para o controle das abas é a seguinte:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<strong><span style="color: #800000;">function </span></strong>AjaxAmbiente () { <span style="color: #800000;"><strong>this</strong></span>.selecionaAba = <span style="color: #800000;"><strong>function </strong></span>(link) { jquery(<span style="color: #0000ff;">'div[id*=conteudo-aba]'</span>).<em>each</em>(<strong><span style="color: #800000;">function</span></strong>(index, div){ <span style="color: #800000;"><strong>if</strong></span>(div.id.<em>match</em>(link.id + <span style="color: #0000ff;">"$"</span>)) { jquery(<span style="color: #0000ff;">'#'</span> + div.id).<em>show</em>(<span style="color: #0000ff;">'fast'</span>).<em>html</em>(<span style="color: #0000ff;">'Carregando...'</span>); } <span style="color: #800000;"><strong>else</strong></span> { jquery(<span style="color: #0000ff;">'#'</span> + div.id).<em>hide</em>(<span style="color: #0000ff;">'fast'</span>); } }); <span style="color: #800000;"><strong>return false</strong></span>; }; }; |
Vamos compreender o que temos no método selecionaAba da classe JS AjaxAmbiente.
|
1 |
jquery(<span style="color: #0000ff;">'div[id*=conteudo-aba]'</span>).<em>each</em> |
Para chamar a função ‘each’ do JQuery foi carregado todos as DIV´s que tenham o seu ID começando com ‘conteudo-aba’. Como a base desse tipo de seleção é por expressão regular, temos a explicação que o ‘*’ é para selecionar qualquer elemento que começe ou termine com a palavra ‘conteudo-aba’, caso quisessemos que fosse buscados os elementos que começassem com alguma coisa utilizariamos o caracter ‘^’ e para que terminasse com uma palavra seria o ‘$’.
No ‘if’ dentro da função each e utilizada uma expressão regular para simular uma função endsWith, logo temos:
|
1 |
div.id.<em>match</em>(link.id + <span style="color: #0000ff;">"$"</span>) |
No Javascript toda string é um objeto String ‘obviamente’, assim podemos chamar diretamente a função match para comparar se a DIV atual da iteração da função each é equivalente a aba selecionada, no caso um elemento <a> clicado.
Caso seja a DIV a ser apresentada, a mesma é exibida utilizando um efeito ‘fade’, no mesmo caso para ao ocultar as outras DIV´s.
|
1 |
jquery(<span style="color: #0000ff;">'#'</span> + div.id).<em>show</em>(<span style="color: #0000ff;">'fast'</span>).<em>html</em>(<span style="color: #0000ff;">'Carregando...'</span>); |
|
1 |
jquery(<span style="color: #0000ff;">'#'</span> + div.id).<em>hide</em>(<span style="color: #0000ff;">'fast'</span>); |
Este é um exemplo simples e que mostra uma pequena parte do JQuery e suas aplicações, você poderá estar utilizand chamadas AJAX (JQuery.post() ) para carregar conteúdos dinamicamente dentro das suas abas, e por ai vai…
Um abraço a todos e até a próxima.