Webpoint

Este post é principalmente para quem gosta do Jquery, mas limita-se somente aos plugins. Existe uma infinidade de opções de Plugins no site do Jquery. Apesar de úteis, eles não são para qualquer situação. Se você quer do seu jeito, faça você mesmo. Em um dos tutoriais do site ensina a fazer parte do que estou fazendo aqui. Mas fiz algumas implementações que mostra várias ferramentas úteis do Jquery. Então ao invés de pegar alguns plugins, com poucas linhas de código irei criar um modelo de faq utilizando as marcações HTML dl, dt e dd. Elas são as mais adequadas para este contexto, pois representam uma lista de definição, com um termo de definição e sua descrição. Com o Jquery vamos fazer aparecer somente os títulos do FAQ, pois caso o usuário se interessem por algum ele irá clicar e assim um slideDown será executado. O design pode ser controlado totalmente por CSS e caso o navegador do usuário não possua Script, o FAQ funcionará normalmente, sem o Javascript é claro.

Vamos ao que interessa!

Chega de falar sobre o FAQ e vamos construir este FAQ com Jquery que tanto eu falo. Vale lembrar que eu usei como FAQ mas ele pode ser usado para outros fins, isto depende de você!

Para começar devemos inserir a framework no head do documento, isto deixo para vocês, pois já mostrei como se faz em outros posts sobre Jquery.

Agora podemos trabalhar com a Framework.

Vamos então ao código Jquery responsável pelo efeito:

$(document).ready(function(){

// Configuração do Menu DropDown

if(!$("#menu dt").children().not(".titulo").is("span")){

$("#menu dt").prepend(" + ")

}

$("#menu").find("dd").hide();

$("#menu").find("dt").toggle(function(){

$(this).next().slideDown("slow");

$(this).find("span").not(".titulo").empty();

$(this).prepend(" - "); }, function() { $(this).next().slideUp("slow"); $(this).find("span").not(".titulo").empty(); $(this).prepend(" + "); }); // Fim da configuração do Drop Down });

Vamos a explicação deste código:

Estrutura condicional:

O que está pedindo para verificar se é falso dentro do if é se o dt dentro do elemento com o id menu(atribuído ao elemento dl) tem um filho que não seja com a classe titulo e que se este filho é um span. Confuso? Traduzindo: Esta seleção retorna se dentro do dt existe um span que não seja da classe titulo. Se não exisitr, ele adiciona este span com o sinal de mais como conteúdo. Sendo assim, inicialmente ele adiciona o sinal de mais dentro de um span através da capacidade de manipulação do conteúdo através do Jquery, deixando assim o código limpo, pois um sinal de mais ou menos caso o javascript esteja desativado, não terá significado algum.

Linha 11

Nesta linha ele chama o método hide para esconder as respostas do faq que estão dentro do elemento dd.

Linha 13

Nesta linha ele chama o método toggle, que tem como parâmetro duas funções: uma para o primeiro click, e outra para quando for clicado novamente.

A função para ser executada no primeiro click seleciona o próximo elemento depois do dt através do método next, que é o elemento dd que estava escondido inicialmente e aplica o método slideDown que faz jus ao nome: deslizar para baixo. A velocidade aceita três parâmentros: “normal”, “slow” e “fast”.

As linhas abaixo selecionam os spans dentro do dt que não estão com a classe titulo(necessário para evitar o apagamento do título do faq) e aplica o método empty, que remove todos o conteúdos filho da seleção onde foi aplicada. Assim ele remove o span com o sinal de mais dentro. Logo após ele adiciona um span com o sinal de menos.

A função para ser executada no segundo clique faz o contrário. Faz o slide ser para cima, além de eliminar o span com o sinal de menos e adiciona o sinal de mais.

Simples não?