Esse é o primeiro post sobre o Mozilla Service Week. Uma coisa que tem me ajudado muito é misturar comandos de JavaScript com comandos de Jquery. Então resolví fazer um tutorial. E essa será a base para o próximo post onde vamos criar uma simples galeria de imagens, com descrição.

Vamos criar um link que quando clicado muda o texto de uma div. Veja funcionando.

Crie um arquivo html e certifique se o Jquery está referenciado:

Vamos começar criando um link com a classe ‘MeuLink’. Esse link guardará bloco de texto. No onMouseOver ele chama a função ‘manda’ e envia o valor ”O link que fala de <b>CACHORRO</b> foi clicado e mandou esse conteúdo!’:

Faça o link do ‘Gato’ com o mesmo código, substituindo somente o bloco de texto e o nome do link.
Agora vem o código que vai executar a função, receber o texto e substituir a div:

Entendendo a função:

1 – A função espera um valor com a variável veio ‘function(veio)’. Essa função pega o que veio do link e coloca dentro da variável texto.

2- Quando o link $(”a.)

3- Com a classe MeuLink (”a.MeuLink”)

4- For clicado (”a.MeuLink”) .click

5- Dispare a função $(”a.MeuLink”).click(function () {

5.1 pegue a div $(”div)
5.1 Com a classe replace $(”div.replace”)
5.1 Substitua por $(”div.replace”).replaceWith
5.1 com uma nova div $(”div.replace”).replaceWith(”<div class=’replace’>” +
5.1 Mais o conteúdo da variável texto $(”div.replace”).replaceWith(”<div class=’replace’>” + texto
5.1 Mais o fechamento da tag $(”div.replace”).replaceWith(”<div class=’replace’>” + texto + “</div>”);

Quando você passa o mouse sobre o link ele carrega a variável. Quando você clica, ele obtem o valor da variável e substitui usando esse valor.

Muito simples mas uso em todos os sites que tenho que construir, por exemplo a WebTv do Ministério do Planejamento.

Um abraço e até a galeria de imagens.