Dez plugins indispensáveis e gostosos para jQuery

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on telegram
Share on pocket

A biblioteca jQuery dispensa introduções e rapidamente tornou-se a biblioteca de javascript mais usada. Apesar de poderosíssima por si só, é comum e prático usar plugins para estender o jQuery.

Ao longo dos quase dois anos em que conheço o jQuery usei inúmeros plugins, até criei alguns e hoje possuo um pequeno arsenal de plugins que acabo usando frequentemente.

Estes são dez dos que mais uso e gosto, espero que sejam úteis!

Colorbox

Outro que dispensa introduções, o lightbox é prático, elegante e resolveu de uma vez por todas a questão de popups no javascript. É aquela famosa técnica de escurecer toda a janela do navegador e dar destaque a uma foto ou outro conteúdo.

Quem mexe com javascript há alguns anos com certeza já usou algumas das várias iterações tanto do lightbox original, escrito pelo Lokesh Dhakar, quanto dos inúmeros clones, entre os quais o Thickbox se destacou bastante.

O plugin que mais tenho usado ultimamente para estes fins é o Colorbox, porque ele é leve e simples, além de oferecer uma API bem compreensiva para ser estendido. Todas os prompts do jogo de memória que fiz foram usando o colorbox.

Link: Colorbox

Cycle

Simplesmente sensacional! Este plugin (também disponível tanto na versão lite, sem efeitos adicionais) permite criar slideshows usando vários efeitos diferentes para transições. Ele possui várias opções e é muito customizável. É muito fácil adicionar botões para controlar o slideshow ou miniaturas das fotos que ganham foco quando elas aparecem no slideshow. É o plugin que usei na apresentação do meu portfolio.

Link: Cycle

Datepicker

Outro plugin com muitas várias variações, foi originalmente criado por Marc Grabanski e, posteriormente, oficialmente anexado ao jQuery UI. A versão standalone do plugin que não requer o jQuery UI é mantida por Keith Wood, um co-autor do plugin original.

É um pequeno calendário popup que facilita demais a escolha de datas no preenchimento de formulários. Ele é fácil de customizar usando CSS e também de traduzir trocando as variáveis no código javascript.

Link: Datepicker

Easing

Um dos plugins mais subestimados na minha opinião, permite adicionar easing às animações do jQuery. O que isto quer dizer? Simplesmente, permite ?ajudar? as animações customizadas, modificando-as de várias maneiras. O jeito mais fácil de entender realmente é olhando os exemplos. O easing é tipicamente utilizado em conjunto com outros plugins.

Link: Easing

Easytip

Nada mais é do que um tooltip alternativo em vez daquele amarelo padrão da maioria dos navegadores. Incialmente usa o atributo title do elemento é muito fácil de customizar. Este plugin é do tipo ?instalar e esquecer ? e é muito útil quando se quer esta funcionalidade mas não há tempo para desenvolver algo mais elaborado.

Link: Easytip

Hoverintent

Outro plugin na mesma categoria do Easing; é um que não faz uma diferença gritante imediata mas acrescenta aquela coisa sutil a mais que agrega bastante valor ao trabalho. O que este plugin faz é tentar adivinhar o que o usuário pretende fazer com o mouse (no bom sentido).

Ele é derivado do método >hover() do jQuery mas permite um grau bastante fino de customização. Serve para suavizar eventos do tipo mouseOver e mouseOut ao calcular a velocidade do movimento do mouse para determinar se está apenas passando pelo elemento ou se de fato parou em cima.

Link: Hoverintent

jqwysiwyg

Este plugin com nome quase impronunciável é utilizado para criar caixas de texto editáveis com controles de edição. Pense nele como um TinyMCE ou CK/FCKEditor lite. O plugin é leve e prático para quando se quer dar mais liberdade para o usuário editar um campo mas não precisa necessariamente de algo tão complexo quanto os dois editores mencionados.

Link: jqwysiwyg

LiveQuery

Sem dúvida o plugin mais revolucionário e útil que já encontrei! Ele permite delegar eventos a elementos que ainda não existem no DOM. Ou seja, é particularmente útil quando está lidando com elementos criados dinamicamente ou com elementos que são removidos e depois adicionados de volta à pagina. Você pode estar se perguntando qual a utilidade deste plugin já que a partir da versão 1.3 o jQuery introduziu o método live() que faz exatamente isto? Em primeiro lugar o método live foi baseado neste plugin! E em seguindo lugar o live() permite apenas um subconjunto dos métodos do jQuery e também não permite delegar um callback que não seja um evento.

Complicou? Fique tranquilo, é bem mais simples do que parece! Só mantenha em mente quando lidando com elementos dinâmicos que se o live() não funcionar como esperando, o LiveQuery pode ser a solução! Usei este plugin bastante nos jogos de memória e campo minado que fiz.

Link: LiveQuery

prettyPhoto

O que! Mais um clone de lightbox?? Pois é! A razão pela qual uso tanto este quanto o Colorbox e o motivo de incluir ambos nesta lista é simples: cada um se adequa melhor a uma tarefa específica. O Colorbox é melhor para diálogos modais e pode ser estendido facilmente, já o prettyPhoto, como indica o nome, é ideal para mostrar fotos (e vídeos, flash, etc).

O prettyPhoto é um plugin mais bonito e possui efeitos legais que agregam valor neste contexto.

Link: prettyPhoto

Superfish

De longe o melhor plugin para criar menus que já usei. Ele facilita demais a criação de menus drop-down que funcionam em qualquer navegador. O plugin é muito flexível e pode ser usado em conjunto com o HoverIntent (descrito acima), SuperSubs (para submenus de larguras variáveis) e também o bgiframe para evitar problemas de z-index no Internet Explorer 6.

Porém, o plugin não faz mágicas e é necessário criar o HTML e CSS direito para que funcione perfeitamente. Mas como há vários exemplos no site do plugin, fica fácil!

Link: Superfish

É isso! Estes são alguns dos plugins que eu mais uso, e você, quais plugins considera indispensáveis? [Webinsider]
.
Acompanhe o  Webinsider no Twitter.
.

Avatar de Alex Weber

Alex Weber (fala@alexweber.com.br) é sócio da Webdrop e especialista em Drupal, PHP, MySQL e Javascript. Mantém o Twitter @alexweber15 e o blog Alex Weber Desenvolvimento Web.

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on telegram
Share on pocket

12 respostas

  1. Muito boas suas dicas.

    Sugiro nos brindar, nas próximas dicas, com referências que sejam aderentes à acessibilidade da w3c.

    Encontrar códigos realmente aderentes, especialmente para menus (já que a maioria de menus retráteis são não aderentes), não é fácil. Quando não é automaticamente retrátil, também não é navegável por teclado.

    Abraços,

    Daniel

  2. Alex,

    eu acho muito bacana a galera usar estes plugins para fazer seus sites, ainda mais quando você está começando a entender como funciona o jQuery e não tem muita noção de como criar seus próprios scripts.

    Eu, particularmente, gosto de pegar estes scripts como exemplo e desenvolver os meus, já que muitas vezes os clientes da agência que trabalho pedem modificações e com estes códigos prontos a modificação (até entender a lógica) ficam um tanto mais demorada.

    Exemplo disso que eu tenho é foi um lightbox que precisamos chamar a partir de um flash, para fazer isso com scripts prontos precisávamos incluir 4 chamadas de scripts diferentes, ou seja, pesava a minha página um monte, exigia uma quantidade maior de chamadas no servidor… a ponto que fizemos uma adaptação em um lightbox desenvolvido dentro da agência e ficamos com um arquivo que pesa pouco mais de 1kb.

    Mas com certeza vale a pena dar uma olhada em cada um dos exemplos que você passou, as dicas são ótimas… Quando tiver mais novidades faça um novo post 🙂

    Abraços

  3. Excelente dica!
    jQuery adianta o lado, é rápido, ajuda o desenvolvedor na produção e agrada o usuário q visita seu site!

    Demorou para saber mais sobre jQuery quem ainda tem dúvidas se vale a pena!

    Valeu a dica, abs!

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *