<
Menu

Tableless


282

E-mail Newsletter Responsivo

idiomas-htm

Declarando idiomas no HTML

iStock_000015515973Small

Quando utilizar (ou não) frameworks CSS

pensa-mano

Esse texto é pra mim – mercado e atitude


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:

  • métodos para extrair camadas (RGB) de uma cor;
  • a possibilidade de retornar o nome mais próximo de uma cor para CSS;
  • um parser de cores;
  • animação em gradiente.

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”.

Por Davi Ferreira

Programador apaixonado pelo que faz. Responsável pelo desenvolvimento de sistemas e interfaces para Globo.com, Confederação Brasileira de Vôlei, Ricoh Brasil, Embratel entre outros.

http://www.daviferreira.com/blog

Mais posts do autor

Comentários (14)

  • Kaleb Martins

    Grande Davi!!
    Nada melhor mesmo! obrigado :-)

    Att
    Kaleb Martins

  • Pingback: Tweets that mention 12 plugins jQuery para começar bem o ano | Tableless - Desenvolvimento com Padrões Web -- Topsy.com

  • Danilo

    Sensacional!

  • Fabio

    Olá David!

    Muito bom!! Gostei bastante do Embedded Help System! Demais!
    Gostei do MobileMap bom

    Abraço,
    Fabio

  • Leandro

    Todos são fera !!! já estão na minha
    lista de plugin !!! oque mais gostei
    é MobilyMap !!

  • Fabricio Henrique Lennar

    Muito boa a listagem, alguns dos plugins são geniais!
    Muito bom compartilhar conhecimento, continue assim.

  • Eduardo de Azevedo

    Dá vontade de sair criando coisas agora só pra experimentar as funcionalidades de cada um!

  • http://offsetdesign.paranadestaque.com/ OffSet Design

    Muito bom esses plugins jQuery.

  • Ofelquis

    Esta tendo algum erro na codificação dos caracteres aqui nos comentários? to vendo uns caracteres tipo japoneses.. Vejam isso.

  • Luis Gustavo Casotti

    Excelente! Muito Obrigado

  • Adriano Marinho

    Muito bom !!!

  • Jean

    Nossa cara, ajudou muito, continue assim, a comunidade de desenvolvedores agradece.

  • Pingback: 12 plugins jQuery para começar bem o ano « Lucas Pinheiro

  • MARCIONE JR

    muito bom, continue assim :)