18 de junho de 2010Efeitos: .toogle
Toggle que se traduz em alternar, é um dos efeitos que a nossa querida biblioteca “Jquest” quer dizer, “Jquery”rs, nos disponibiliza. Através dessa funcionalidade nós podemos executar funções em determinados elementos de uma página de acordo com a alternação de cliques.
Para mostrar o tão importante e útil que é, vamos imaginar e depois criar uma página onde se contém uma grande quantidade de informações. Seria crítico colocarmos tudo visível de uma vez para o visitante né? Talvez, ele até iria embora do seu site após vê o tanto de informações que contém numa mesma janela. Pois é ai que entra nosso querido .toggle. Ele nos permite esconder e mostrar elementos do documento, dando a nós a oportunidade de usarmos como exemplo nesse post essa saída funcional e elegante ao problema de muito conteúdo em uma mesma página.
Mas antes de criamos nossa página de exemplo, vamos analisar o código a seguir para entedermos um pouco mais sobre o .toggle:
Javascript:
$(document).ready(function(){
$("a").toggle(
function() { $("p").css('color','red'); },
function() { $("p").css('color','black'); }
);
});
Linha 2: Quando o elemento href(a) sofrer algum clique.
Linha 3: Aplique a seguinte função em seu 1º clique: Localize todos os parágrafo da página e altere todos para cor vermelha.
Linha 4: Se houver um 2º clique no elemento href(a) da linha 2: Localize novamente todos os parágrafo da página e dessa vez altere todos para a cor preta.
Marcação:
Toggle nele! Alterando a cor do parágrafo
Linha 1: Elemento tipo link que vai receber os cliques para disparar as funções.
Linha 2: Elemento de parágrafo que sofrerá as alterações.
É bem legal né? usando a criatividade, podemos desenvolver belíssimos menus com sub-menus, páginas de faqs, marcação de tabelas, mostrar caixas de login após requisições, mostrar dica ao clicar em um ícone e muito mais!
Mostrando informações após o clique
Vamos agora ao nosso desafio de criar uma página que tem seu conteúdo escondido e que só é mostrado quando solicitado.
Marcação:
História das Copas do Mundo
De quatro em quatro anos, seleções de futebol de diversos países do mundo se reúnem para disputar a Copa do Mundo de Futebol. A competição foi criada pelo francês Jules Rimet, em 1928, após ter assumido o comando da instituição mais importante do futebol mundial: a FIFA ( Federation International Football Association). A primeira edição da Copa do Mundo foi realizada no Uruguai em 1930. Contou com a participação de apenas 16 seleções, que foram convidadas pela FIFA, sem disputa de eliminatórias, como acontece atualmente. A seleção uruguaia sagrou-se campeã e pôde ficar, por quatro anos, com a taça Jules Rimet. Nas duas copas seguintes (1934 e 1938) a Itália ficou com o título. Porém, entre os anos de 1942 e 1946, a competição foi suspensa em função da eclosão da Segunda Guerra Mundial. Em 1950, o Brasil foi escolhido para sediar a Copa do Mundo. Os brasileiros ficaram entusiasmados e confiantes no título. Com uma ótima equipe, o Brasil chegou à final contra o Uruguai. A final, realizada no recém construído Maracanã (Rio de Janeiro - RJ) teve a presença de aproximadamente 200 mil espectadores. Um simples empate daria o título ao Brasil, porém a celeste olímpica uruguaia conseguiu o que parecia impossível: venceu o Brasil por 2 a 1 e tornou-se campeã. O Maracanã se calou e o choro tomou conta do país do futebol. O Brasil sentiria o gosto de erguer a taça pela primeira vez em 1958, na copa disputada na Suécia. Neste ano, apareceu para o mundo, jogando pela seleção brasileira, aquele que seria considerado o melhor jogador de futebol de todos os tempos: Edson Arantes do Nascimento, o Pelé. Quatro anos após a conquista na Suécia, o Brasil voltou a provar o gostinho do título. Em 1962, no Chile, a seleção brasileira conquistou pela segunda vez a taça. Em 1970, no México, com uma equipe formada por excelentes jogadores ( Pelé, Tostão, Rivelino, Carlos Alberto Torres entre outros), o Brasil tornou-se pela terceira vez campeão do mundo ao vencer a Itália por 4 a 1. Ao tornar-se tricampeão, o Brasil ganhou o direito de ficar em definitivo com a posse da taça Jules Rimet. Após o título de 1970, o Brasil entrou num jejum de 24 anos sem título. A conquista voltou a ocorrer em 1994, na Copa do Mundo dos Estados Unidos. Liderada pelo artilheiro Romário, nossa seleção venceu a Itália numa emocionante disputa por pênaltis. Quatro anos depois, o Brasil chegaria novamente a final, porém perderia o título para o pais anfitrião: a França. Em 2002, na Copa do Mundo do Japão / Coréia do Sul, liderada pelo goleador Ronaldo, o Brasil sagrou-se pentacampeão ao derrotar a seleção da Alemanha por 2 a 0. Em 2006, foi realizada a Copa do Mundo da Alemanha. A competição retornou para os gramados da Europa. O evento foi muito disputado e repleto de emoções, como sempre foi. A Itália sagrou-se campeã ao derrotar, na final, a França pelo placar de 5 a 3 nos pênaltis. No tempo normal, o jogo terminou empatado em 1 a 1. Em 2010, pela primeira vez na história, a Copa do Mundo será realizada no continente africano. A África do Sul será a sede do evento. Em 2014, a Copa do Mundo será realizada no Brasil. O evento retornará ao território brasileiro após 64 anos, pois foi em 1950 que ocorreu a última copa no Brasil.A Taça da Copa do Mundo
Goi criada em 1970, em substituição a Taça Jules Rimet que foi conquistada em definitivo pelo Brasil ao conquistar o tri-campeonato na Copa de 1970 (México). Diferente da Jules Rimet, a taça atual nunca ficará em definitivo com um país. A taça foi criada pelo escultor italiano Silvio Gazzaniga. A taça foi apresentada na Copa do Mundo da Alemanha de 1974. A taça é composta por 5 quilos de ouro 18 quilates sólido (75% do peso), com uma base de malaquita (mineral carbonato). O troféu mede 36, 5 cm de altura. O peso total da taça é de 6,175 quilos. Ela é composta por duas figuras humanas segurando o globo do planeta Terra. Na base da taça está gravado o nome de todas as seleções campeãs até o momento. A Taça Jules Rimet, conquistada em definitivo pelo Brasil na Copa de 70, foi roubada em 1983 no Rio de Janeiro. Como nunca foi recuperada, provavelmente foi derretida e vendida pelos ladrões.Os momentos e dados mais curiosos sobre a história das copas do mundo de futebol
- Na Copa do Uruguai, realizada em 1930, um jogador chamou a atenção de todos. O uruguaio Héctor Castro não possuía uma das mãos. Em função deste problema físico e de sua habilidade com a bola no pé, ganhou o apelido de "o divino manco". - Na Copa do Mundo de 1934, realizada na Itália, o jogador da seleção italiana Luigi Bertolini entrou em campo com faixas de pano enroladas na cabeça. O jogador fez isso para proteger a cabeça, pois as costuras das bolas da época eram grosseiras e costumam ferir a pele dos jogadores no momento do cabeceio. - Ainda na Copa de 1934, outro fato curioso. O jogador da seleção suiça Leopold Kielholz jogou usando óculos. Mesmo assim, foi capaz de marcar três gols. - A Copa do Mundo de 1930, no Uruguai, foi a única edição que não teve eliminatórias. - A edição da Copa que teve o maior número de gols foi a de 1998, na França. Nesta copa foram marcados 171 gols. - Os cartões vermelho e amarelo foram utilizados pela primeira vez em Copas do Mundo em 1970, no México. - A seleção da Suíça não tomou nenhum gol na Copa do Mundo de 2006, na Alemanha.
Linha 1: Aqui colocamos todos nossos títulos dentro da tag h4.
Linha 2: Aqui criamos uma div para engloar o conteúdo do título acima.
Repetimos isso com todos os outros títulos e conteúdo.
Estilo:
* { margin: 0; padding: 0; }
body { font: 12px verdana; padding: 30px; }
h4 { padding: 10px; background: url(icone-mais.gif) no-repeat 8px #ff9; margin: 20px 0 10px 0; color: #363; padding-left: 25px; }
h4:hover { cursor: pointer }
p { line-height: 18px; margin-bottom: 15px; }
.aberto { background: url(icone-menos.gif) no-repeat 8px #ff9; }
Aqui basicamente temos a estilização da página que eu escolhi. Eu só quero chamar a atenção para a classe “.aberto” pois com ela nós estamos adicionando o ícone de + em cada título, pra dá aquela navegação mais intuitiva.
Javascript:
$(document).ready(function(){
$("div").hide();
$("h4").toggle(
function() { $(this).addClass("aberto");
$(this).next("div").show(); },
function() { $(this).removeClass("aberto");
$(this).next("div").hide();
});
});
Linha 2: 1º coisa que nós temos que fazer é esconder todo o conteúdo que vai ser revelado depois. Pra isso usamos o hide nas divs.
Linha 3: Aqui dizemos que todos nossos títulos vão ter algumas funções ao ser clicado.
Linha 4 e 5: Aqui entra nossa primeira função, que servirá pro primeiro clique. Ela significa o seguinte, quando clicado, adicione a classe (.aberto) ao título correspondente e em seguite localize a próxima div após o título e mostre-a.
Linha 7 e 8: Aqui é basicamente ao contrário a função de cima, ao ser clicado, ele vai remover a classe (.aberto) do título correspondente e voltará a deixar a div logo após o título em estado invisível.
E então, legal né? existem ainda muitas formas de se trabalhar com o .toggle, basta usarmos a criatividade ! um abraço!!
Nenhum Comentário »
Nenhum comentário ainda.
Feed RSS dos comentários deste post
Deixe um comentário
ThiagoFasano - Portflio verso 2.0
