Menu
X

12 plugins jQuery para começar bem o ano

Confira uma lista de plugins jQuery, em sua maioria novidades, para acrescentar opções à sua caixa de ferramentas na hora de desenvolver uma interface web.

O grande diferencial do jQuery é sua enorme biblioteca de plugins. Na lista abaixo, veremos plugins que cobrem desde upload de arquivos, passando por uma galeria de imagens diferente e indo até um emulador de livro/revista (aquele esquema de folhear, bastante famoso em aplicativos flash).

Procurei escolher plugins mais novos, desenvolvidos recentemente, mas nem todos seguem este padrão. Meu sonho é poder fazer, um dia, uma lista desse tipo apenas com plugins brasileiros. No entanto, ainda é escasso o conteúdo nacional desenvolvido para jQuery. Caso você tenha algum link de um plugin bacana, compartilhe nos comentários no final da página.

CLEditor

http://premiumsoftware.net/cleditor/

CLEditor em ação

No mundo dos editores rich text em javascript, o CKEditor (antigo FCK) e o TinyMCE são os mais famosos. Por serem muito completos, acabam sendo também extremamente pesados. O CLEditor é uma alternativa desenvolvida em jQuery, simples, mas “pesando” apenas 16KB. É claro que não vem acompanhado de módulo para upload de imagens e arquivos, inserção e configuração avançada de flash etc., mas nem sempre essas funcionalidades são necessárias.

jQuery file upload

http://aquantum-demo.appspot.com/file-upload

Esse é um plugin bem interessante. Ele transforma um simples formulário de upload de arquivos em uma interface avançada com opção de envio de múltiplos arquivos ao mesmo tempo, barra de progresso, drag and drop e cancelamento do upload. Nos navegadores que já oferecem suporte, ele efetua o upload via XMLHttpRequest e pra navegadores sem suporte utiliza o bom e velho iframe oculto. A documentação é pobre, mas vale a pena dar uma fuçada. Outro ponto legal é que este plugin não utiliza flash na sua interface de upload.

ezColumns

http://www.andresvidal.com/labs/ezcolumns.html

Plugin mão na roda para sites que utilizam conteúdo em colunas e precisam que essas colunas possuam a mesma altura, porém, de forma dinâmica. O que o ezColumns faz é pegar todos os elementos filhos de um container e alinhar a altura de acordo a maior encontrada. Permite ainda definir o número de colunas e o template utilizado para englobar cada coluna.

Embedded Help

http://embedded-help.net/

Embedded Help em ação

Focado em usabilidade, este plugin oferece uma interface de ajuda dinâmica, em tempo real, a medida que o usuário precisa dela. Por exemplo, você pode exibir tooltips e até mesmo emular o movimento do mouse para indicar ao usuário o que ele deve fazer. O site é um pouco confuso, a documentação também (um problema para quase todos os plugins novos), mas este plugin é genial.

Snippet

http://steamdev.com/snippet/

Plugin simples para aplicar syntax highlighting em códigos de um artigo, texto etc. O plugin pode ser aplicado em qualquer elemento <pre> e oferece suporte à diversas linguagens incluindo javascript, html/css, php e algumas opções avançadas de configuração como expandir/esconder códigos.

xcolor

http://www.xarg.org/project/jquery-color-plugin-xcolor/

O plugin xcolor adiciona inúmeras possibilidades para tratamento e manipulação de cores e, de quebra, também oferece um método para verificar a legibilidade de um texto. Entre suas funcionalidades estão:

Quovolver

http://sandbox.sebnitu.com/jquery/quovolver/

Quovolver é um plugin simples, mas ideal para uma área muito comum em sites corporativos: depoimentos. Ele exibe, de forma elegante, um bloco de citações. Ele bem que podia ser um pouco mais flexível nas configurações, mas, por se tratar de um plugin, vamos dar um crédito extra e aguardar as novidades das próximas versões.

Booklet

http://builtbywill.com/code/booklet/

Estamos quase acabando! Este é um dos plugins mais legais desta lista. O Booklet imita o movimento de folhear e é altamente personalizável. Cada página é representada por elementos filhos de um div. O plugin possui mais de 30 opções de parâmetros, entre elas o sentido das páginas, o cursor a ser utilizado e a opção de habilitar uma hashstring na URL para navegação. E o melhor de tudo é que é bem leve: 17KB na versão minified.

MobilyMap

http://playground.mobily.pl/jquery/mobily-map.html

MobilyMap em ação

Outro plugin bastante interessante. O MobilyMap transforma qualquer imagem em uma interface à la GoogleMaps, com opção de arrastar, adicionar marcadores etc. Também é altamente personalizável. Os marcadores podem possuir tooltips contendo informações e links.

Shadow Animation

http://www.bitstorm.org/jquery/shadow-animation/

Como o próprio nome sugere, este plugin estende a funcionalidade do método animate() para aceitar também a propriedade CSS box-shadow. Os efeitos gerados são bem interessantes – é ideal para menus e para um destaque maior em imagens.

CloudZoom

http://www.professorcloud.com/mainsite/cloud-zoom.htm

E por falar em imagens, vamos encerrar nossa lista com dois plugins para elas. O primeiro é o CloudZoom, efeito muito utilizado em sites de e-commerce para ampliar a imagem de um produto sem abrir camadas e lightboxes. O zoom é feito ou na própria área da imagem, ou em uma área que não interfere muito no conteúdo. Possui opções de cores no zoom e legendas.

Popeye

http://dev.herr-schuessler.de/jquery/popeye/

Popeye em ação

Por último, uma alternativa valiosa para todos os lightboxes e uma forma diferente de exibir fotos e galerias em sua página. O plugin Popeye exibe as galerias inline em um artigo ou texto e suas opções de exibição procuram interferir o mínimo possível na leitura. As transições são muito bacanas e as opções de paginação e legenda também “saltam aos olhos”.