10 trechos de JQuery que todo designer deve saber
O jQuery é usado em milhares e milhares de páginas da web. É uma das bibliotecas mais comuns para inserir em páginas, e isso torna a manipulação do DOM um piscar de olhos.
Naturalmente, parte da popularidade do jQuery é sua simplicidade. Parece que podemos fazer quase tudo que gostamos com essa poderosa biblioteca.
Para todas as opções abertas para nós, há alguns trechos que tendem a voltar para o tempo e outra vez. Hoje eu gostaria de dar a você 10 trechos que todos, novatos em gurus, usarão de novo e de novo.
1) Botão Voltar ao topo
// Back To Top
$('a.top').click(function(){
$(document.body).animate({scrollTop : 0},800);
return false;
});
//Create an anchor tagBack to top
Como você pode ver usando as funções animate e scrollTop no jQuery, não precisamos de um plugin para criar uma simples rolagem para a animação superior.
Mudando o valor scrollTop nós podemos mudar onde queremos que a barra de rolagem caia , no meu caso usei um valor de 0 porque eu quero que ele vá para o topo da nossa página, mas se eu quisesse um offset de 100px eu poderia digite 100px na função.
Então, tudo o que estamos realmente fazendo é animar o corpo do nosso documento ao longo de 800 ms até ele rolar até o topo do documento.
2) Verificando se as imagens estão carregadas
$(‘img’).load(function() {
console.log(‘image load successful’);
});
Às vezes você precisa verificar se suas imagens estão totalmente carregadas para continuar com seus scripts, este trecho de três linhas do jQuery pode fazer isso para você facilmente.
Você também pode verificar se uma determinada imagem foi carregada, substituindo a tag img por um ID ou classe.
3) Corrigir imagens quebradas automaticamente
$('img').error(function(){
$(this).attr('src', ‘img/broken.png’);
});
Ocasionalmente, temos momentos em que quebramos os links de imagem em nosso site e substituí-los um por um não é fácil, portanto, adicionar esse simples código pode economizar muita dor de cabeça.
Mesmo que você não tenha links quebrados, isso não causa nenhum dano.
4) Alternar classe em hover
$(‘.btn').hover(function(){
$(this).addClass(‘hover’);
}, function(){
$(this).removeClass(‘hover’);
}
);
Normalmente, queremos mudar o visual de um elemento clicável em nossa página quando o usuário passa o mouse sobre esse snippet jQuery, adiciona uma classe ao seu elemento quando o usuário está passando e quando o usuário o interrompe remove a classe. Tudo que você precisa fazer é adicionar os estilos necessários no seu arquivo CSS.
5) Desabilitando campos de entrada
$('input[type="submit"]').attr("disabled", true);
Ocasionalmente, você pode querer que o botão enviar de um formulário ou até mesmo uma de suas entradas de texto seja desativado até que o usuário tenha executado uma determinada ação (marcando a caixa de seleção "Eu li os termos" por exemplo) e essa linha de código aquele; Ele adiciona o atributo desativado à sua entrada para que você possa ativá-lo quando quiser.
Para fazer isso, tudo o que você precisa fazer é executar a função removeAttr na entrada com o parâmetro desativado:
$('input[type="submit"]').removeAttr("disabled”);
6) Pare o carregamento de links
$(‘a.no-link').click(function(e){
e.preventDefault();
});
Às vezes, não queremos que os links acessem uma determinada página ou até a recarregem, queremos que eles façam outra coisa, como acionar outro script e, nesse caso, essa parte do código fará o truque de impedir a ação padrão.
7) alternar fade / slide
// Fade
$( “.btn" ).click(function() {
$( “.element" ).fadeToggle("slow");
});
// Toggle
$( “.btn" ).click(function() {
$( “.element" ).slideToggle("slow");
});
Slides e Fades são algo que usamos bastante em nossas animações usando jQuery, às vezes apenas queremos mostrar um elemento quando clicamos em algo e para isso os métodos fadeIn e slideDown são perfeitos, mas se quisermos que esse elemento apareça no primeiro clique e então desapareça no segundo em que este trecho de código funcionará bem.
8) acordeão simples
// Close all Panels
$('#accordion').find(‘.content').hide();
// Accordion
$('#accordion').find(‘.accordion-header').click(function(){
var next = $(this).next();
next.slideToggle('fast’);
$(‘.content’).not(next).slideUp('fast’);
return false;
});
Ao adicionar este script, tudo o que você realmente precisa em sua página é o HTML necessário para que ele funcione.
Como você pode ver neste trecho inicial, fechei todos os painéis em nosso acordeão e, em seguida, no evento click, coloquei o conteúdo vinculado a esse slide de cabeçalho e todos os outros deslizaram para cima. É um método simples para um acordeão rápido.
9) Faça dois divs a mesma altura
$(‘.div').css('min-height', $(‘.main-div').height());
Às vezes, você quer que dois divs tenham a mesma altura, não importa o conteúdo que eles tenham, esse pequeno trecho permite exatamente isso; neste caso, define a altura mínima, o que significa que pode ser maior que a div principal, mas nunca menor. Isso é ótimo para alvenaria, como sites.
10) Zebra despojada lista não ordenada
$('li:odd').css('background', '#E8E8E8’);
Com este pequeno trecho você pode facilmente criar listas desordenadas de zebra listradas, isto coloca o fundo que você define em todo item de lista estranho para que você possa colocar o padrão para os pares no seu arquivo CSS. Você pode adicionar esse snippet a qualquer tipo de marcação, de tabelas a divs simples, qualquer coisa que você queira que seja zebra despojada.
Conclusão
Estas são as partes do código jQuery que eu me encontro usando de novo e de novo em meus projetos. Espero que você adicione esta página aos favoritos e volte sempre que precisar de um desses snippets.
Quais snippets da jQuery você confia? Você tem um código melhor para esses cenários? Deixe-nos saber nos comentários.
Imagem em destaque / miniatura, imagem útil via Shutterstock.