Bom dia a todos,
O JQuery tem uma opção muito bacana nos seus seletores que é a seguinte, selecionar todos os elementos que por exemplo começem com uma determinada palavra.
A notação para o uso dessa funcionalidade é relativamente simples, embora é necessário que quem esteja querendo utilizar esse recurso saiba os conceitos básicos de Expressões Regulares.
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:
<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:
<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:
function AjaxAmbiente ()
{
this.selecionaAba = function (link)
{
jquery('div[id*=conteudo-aba]').each(function(index, div){
if(div.id.match(link.id + "$"))
{
jquery('#' + div.id).show('fast').html('Carregando...');
}
else
{
jquery('#' + div.id).hide('fast');
}
});
return false;
};
};
Vamos compreender o que temos no método selecionaAba da classe JS AjaxAmbiente.
jquery('div[id*=conteudo-aba]').each
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:
div.id.match(link.id + "$")
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.
jquery('#' + div.id).show('fast').html('Carregando...');
jquery('#' + div.id).hide('fast');
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.
