---
title: 20 plugins jQuery que marcaram 2011
authors: Davi Ferreira
type: post
date: 2011-12-15
excerpt: Final de ano, época de listas. Confira 20 plugins jQuery que chamaram atenção em 2011, incluindo slideshows, utilitários para formulários e o framework jQuery Mobile.
url: /20-plugins-jquery-que-marcaram-2011/
tweetbackscheck:
  - 1356405868
shorturls:
  - 'a:3:{s:9:"permalink";s:31:"https://tableless.com.br/?p=4734";s:7:"tinyurl";s:26:"https://tinyurl.com/c6uuppg";s:4:"isgd";s:19:"https://is.gd/AHYHgJ";}'
twittercomments:
  - 'a:0:{}'
dsq_thread_id: 505039529
categories:
  - Javascript
tags:
  - JQuery
  - plugins

---
### jQuery Mobile

<https://jquerymobile.com>

<img src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2011/12/jquery-mobile-e1323873805905.jpg" alt="jQuery Mobile" width="590" height="299" class="aligncenter size-full wp-image-4746" srcset="uploads/2011/12/jquery-mobile-e1323873805905.jpg 590w, uploads/2011/12/jquery-mobile-e1323873805905-300x152.jpg 300w" sizes="(max-width: 590px) 100vw, 590px" />

Apesar de não ser um plugin, o jQuery Mobile encabeça nossa lista por ter sido uma das ferramentas mais importantes do ano. O objetivo do framework é disponibilizar uma API simples e compatível com todos os dispositivos móveis. Seu código é quase todo baseado em HTML e sua interface oferece suporte total a operações com toque.

### Quicksand

<https://razorjack.net/quicksand/>

<img src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2011/12/jQuery-Quicksand-plugin.jpg" alt="Quicksand" width="590" height="300" class="aligncenter size-full wp-image-4749" srcset="uploads/2011/12/jQuery-Quicksand-plugin.jpg 590w, uploads/2011/12/jQuery-Quicksand-plugin-300x152.jpg 300w" sizes="(max-width: 590px) 100vw, 590px" />

Quem utiliza sistemas e dispositivos da Apple conhece bem a interface simulada pelo plugin Quick Sand, que permite ordenar e filtrar ítens de uma lista, sejam eles ícones, texto ou imagens, utilizando animações e transições.

### Reveal

<https://www.zurb.com/playground/reveal-modal-plugin>

<img src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2011/12/Reveal_-jQuery-Modal-Plugin-from-ZURB-ZURB-Playground-ZURB.com_.jpg" alt="Reveal" width="589" height="257" class="aligncenter size-full wp-image-4762" srcset="uploads/2011/12/Reveal_-jQuery-Modal-Plugin-from-ZURB-ZURB-Playground-ZURB.com_.jpg 589w, uploads/2011/12/Reveal_-jQuery-Modal-Plugin-from-ZURB-ZURB-Playground-ZURB.com_-300x130.jpg 300w" sizes="(max-width: 589px) 100vw, 589px" />

Reveal é mais um plugin para janelas de alerta/informação. Sua instalação é bem fácil, permitindo executar o plugin diretamente via jQuery ou simplesmente utilizando o atributo &#8216;data-reveal-id&#8217; em um elemento.

### jQuery File Upload

<https://github.com/blueimp/jQuery-File-Upload>

<img src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2011/12/jQuery-File-Upload-Demo.jpg" alt="jQuery File Upload Demo" width="589" height="156" class="aligncenter size-full wp-image-4763" srcset="uploads/2011/12/jQuery-File-Upload-Demo.jpg 589w, uploads/2011/12/jQuery-File-Upload-Demo-300x79.jpg 300w" sizes="(max-width: 589px) 100vw, 589px" />

Plugin para upload de arquivos com suporte a múltiplos envios e drag and drop. O plugin oferece ainda uma barra de progressão, cancelamento e resumo de envios, restrições por tipo de arquivo e preview de imagens. Bem completo.

### QapTcha

<https://www.myjqueryplugins.com/QapTcha/>

<img src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2011/12/qaptcha.jpg" alt="qaptcha" width="590" height="211" class="aligncenter size-full wp-image-4764" srcset="uploads/2011/12/qaptcha.jpg 590w, uploads/2011/12/qaptcha-300x107.jpg 300w" sizes="(max-width: 590px) 100vw, 590px" />

Quem aí nunca teve dificuldade em reconhecer um captcha? O QapTcha chega para acabar com essa confusão de letras e números, trocando o captcha tradicional por um slider de liberação.

### DropKick

<https://jamielottering.github.com/DropKick/>

<img src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2011/12/DropKick-a-jQuery-plugin-for-beautiful-dropdowns.jpg" alt="DropKick - a jQuery plugin for beautiful dropdowns" width="589" height="376" class="alignnone size-full wp-image-4766" srcset="uploads/2011/12/DropKick-a-jQuery-plugin-for-beautiful-dropdowns.jpg 589w, uploads/2011/12/DropKick-a-jQuery-plugin-for-beautiful-dropdowns-300x191.jpg 300w" sizes="(max-width: 589px) 100vw, 589px" />

O DropKick bombou bastante no Twitter. É um plugin para a criação de menus dropdowns. Assim como plugins de modal, existem milhares de outros plugins para este tipo de menu. O diferencial do DropKick é a facilidade de criação e o ótimo resultado final em todos os navegadores do mercado.

### ParallaxSlider

<https://tympanus.net/codrops/2011/01/03/parallax-slider/>

<img src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2011/12/Parallax-Slider-with-jQuery.jpg" alt="Parallax Slider with jQuery" width="589" height="272" class="alignnone size-full wp-image-4767" srcset="uploads/2011/12/Parallax-Slider-with-jQuery.jpg 589w, uploads/2011/12/Parallax-Slider-with-jQuery-300x138.jpg 300w" sizes="(max-width: 589px) 100vw, 589px" />

O ParallaxSlider, na verdade, é um tutorial que acabou resultando em um plugin. No link acima você confere uma explicação completa de todo o desenvolvimento do plugin. Seu objetivo é oferecer uma galeria de fotos que adota o princípio de animação que se popularizou esse ano onde o background acompanha a navegação.

### Toast Message

<https://akquinet.github.com/jquery-toastmessage-plugin/>

<img src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2011/12/akquinet_jquery-toastmessage-plugin-@-GitHub.jpg" alt="ToastMessage" width="588" height="240" class="alignnone size-full wp-image-4771" srcset="uploads/2011/12/akquinet_jquery-toastmessage-plugin-@-GitHub.jpg 588w, uploads/2011/12/akquinet_jquery-toastmessage-plugin-@-GitHub-300x122.jpg 300w" sizes="(max-width: 588px) 100vw, 588px" />

Mais um plugin para os fãs de Mac. O Toast Message oferece mensagens informativas no formato que ficou popular com o utilitário Growl. Fácil de implementar e personalizar.

### FitText

<https://fittextjs.com>

<img src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2011/12/FitText-A-plugin-for-inflating-web-type.jpg" alt="FitText - A plugin for inflating web type" width="589" height="280" class="alignnone size-full wp-image-4769" srcset="uploads/2011/12/FitText-A-plugin-for-inflating-web-type.jpg 589w, uploads/2011/12/FitText-A-plugin-for-inflating-web-type-300x142.jpg 300w" sizes="(max-width: 589px) 100vw, 589px" />

[Responsive Design][1] está na moda. FitText é um plugin que adapta o tamanho de títulos e textos no geral de acordo com o elemento pai, tornando flexíveis as dimensões da fonte.

### jRumble

<https://jackrugile.com/jrumble/>

<img src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2011/12/jRumble-A-jQuery-Plugin-That-Rumbles-Elements.jpg" alt="jRumble | A jQuery Plugin That Rumbles Elements" width="590" height="313" class="alignnone size-full wp-image-4773" srcset="uploads/2011/12/jRumble-A-jQuery-Plugin-That-Rumbles-Elements.jpg 590w, uploads/2011/12/jRumble-A-jQuery-Plugin-That-Rumbles-Elements-300x159.jpg 300w" sizes="(max-width: 590px) 100vw, 590px" />

jRumble é um plugin para adicionar animações &mdash; tremer, vibrar, balançar ou girar qualquer elemento. Ideal para menus e efeitos hover em links. Possui, além das animações, configurações para opacidade e velocidade.

### Mosaic

<https://buildinternet.com/project/mosaic/>

<img src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2011/12/Mosaic-Sliding-Boxes-and-Captions-jQuery-Plugin-1.jpg" alt="Mosaic - Sliding Boxes and Captions jQuery Plugin-1" width="589" height="378" class="alignnone size-full wp-image-4774" srcset="uploads/2011/12/Mosaic-Sliding-Boxes-and-Captions-jQuery-Plugin-1.jpg 589w, uploads/2011/12/Mosaic-Sliding-Boxes-and-Captions-jQuery-Plugin-1-300x192.jpg 300w" sizes="(max-width: 589px) 100vw, 589px" />

Plugin que permite implementar &#8220;boxes deslizantes&#8221; de fotos e/ou conteúdo, com animações e tooltips. O plugin teve origem a partir de um [tutorial bastante popular][2].

### Isotope

<https://isotope.metafizzy.co>

<img src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2011/12/Isotope.jpg" alt="Isotope" width="589" height="263" class="alignnone size-full wp-image-4775" srcset="uploads/2011/12/Isotope.jpg 589w, uploads/2011/12/Isotope-300x133.jpg 300w" sizes="(max-width: 589px) 100vw, 589px" />

Mais um plugin que bombou no Twitter! O Isotope permite a criação de layouts fluidos automagicamente com animações e transições personalizadas.

### Zoomooz

<https://janne.aukia.com/zoomooz/>

<img src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2011/12/Zoomooz.js.jpg" alt="Zoomooz.js" width="589" height="267" class="alignnone size-full wp-image-4776" srcset="uploads/2011/12/Zoomooz.js.jpg 589w, uploads/2011/12/Zoomooz.js-300x135.jpg 300w" sizes="(max-width: 589px) 100vw, 589px" />

Semelhante ao Isotope, o Zoomooz (ê, nome!) permite a criação de boxes e layout fluido com a diferença de também habilitar um zoom fantástico.

### jQuery uCompare

<https://www.userdot.net/files/jquery/jquery.ucompare/demo/>

<img src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2011/12/jQuery-uCompare-plugin.jpg" alt="jQuery uCompare plugin" width="711" height="369" class="alignnone size-full wp-image-4777" srcset="uploads/2011/12/jQuery-uCompare-plugin.jpg 711w, uploads/2011/12/jQuery-uCompare-plugin-300x155.jpg 300w" sizes="(max-width: 711px) 100vw, 711px" />

Já viram aquelas fotos com antes e depois? Este plugin habilita este recurso de forma dinâmica: o usuário pode visualizar a parte que desejar utilizando o mouse.

### ArborJS

<https://arborjs.org>

<img src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2011/12/arbor.js.jpg" alt="arbor.js" width="590" height="214" class="alignnone size-full wp-image-4784" srcset="uploads/2011/12/arbor.js.jpg 590w, uploads/2011/12/arbor.js-300x108.jpg 300w" sizes="(max-width: 590px) 100vw, 590px" />

Arbor é um plugin bacana para a visualização de grafos. Sua API é bem rica com diversos métodos para manipular ítens e o grafo como um todo.

### Slides

<https://slidesjs.com>

<img src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2011/12/Slides-A-Slideshow-Plugin-for-jQuery.jpg" alt="Slides, A Slideshow Plugin for jQuery" width="590" height="307" class="alignnone size-full wp-image-4783" srcset="uploads/2011/12/Slides-A-Slideshow-Plugin-for-jQuery.jpg 590w, uploads/2011/12/Slides-A-Slideshow-Plugin-for-jQuery-300x156.jpg 300w" sizes="(max-width: 590px) 100vw, 590px" />

&#8220;Slides é um plugin de slideshow para jQuery desenvolvido com simplicidade em mente.&#8221; E, de fato, o grande diferencial do Slides para outros plugins de slideshow é a simplicidade e facilidade de implementação &mdash; isso sem limitar em nada a personalização.

### Zoomy

<https://redeyeoperations.com/plugins/zoomy/>

<img src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2011/12/Home-Zoomy-Jquery-Plugin-Image-Zoom-made-easy.jpg" alt="Zoomy Jquery Plugin | Image Zoom made easy" width="589" height="333" class="alignnone size-full wp-image-4782" srcset="uploads/2011/12/Home-Zoomy-Jquery-Plugin-Image-Zoom-made-easy.jpg 589w, uploads/2011/12/Home-Zoomy-Jquery-Plugin-Image-Zoom-made-easy-300x169.jpg 300w" sizes="(max-width: 589px) 100vw, 589px" />

Plugin que habilita uma ferramenta de zoom em imagens, simulando aquela lente famosa da Apple. Possui callbacks permitindo um alto nível de personalização nos eventos de zoom.

### jFormer

<https://www.jformer.com>

<img src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2011/12/Demos-jFormer.jpg" alt="jFormer" width="589" height="379" class="alignnone size-full wp-image-4781" srcset="uploads/2011/12/Demos-jFormer.jpg 589w, uploads/2011/12/Demos-jFormer-300x193.jpg 300w" sizes="(max-width: 589px) 100vw, 589px" />

Forms geralmente são os elementos mais mal-tratados em um aplicativo web. O plugin jFormer visa facilitar o desenvolvimento de forms bonitos, paginados e com validações integradas.

### DynamicNews

<https://www.egrappler.com/rss-driven-dynamic-jquery-news-slider-plugin-dynamic-news/>

<img src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2011/12/RSS-Driven-Dynamic-jQuery-News-Slider-Plugin.jpg" alt="RSS Driven Dynamic jQuery News Slider Plugin" width="589" height="180" class="alignnone size-full wp-image-4779" srcset="uploads/2011/12/RSS-Driven-Dynamic-jQuery-News-Slider-Plugin.jpg 589w, uploads/2011/12/RSS-Driven-Dynamic-jQuery-News-Slider-Plugin-300x91.jpg 300w" sizes="(max-width: 589px) 100vw, 589px" />

O plugin DynamicNews permite a integração de um ticker de notícias com funções para anterior e próxima e tooltips.

### jRating

<https://www.myjqueryplugins.com/jRating>

<img src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2011/12/jRating-demonstration-_-jquery-plugin-Ajaxed-star-rating-system-with-jQuery-_-MyjQueryPlugins.com_.jpg" alt="jRating" width="590" height="190" class="alignnone size-full wp-image-4780" srcset="uploads/2011/12/jRating-demonstration-_-jquery-plugin-Ajaxed-star-rating-system-with-jQuery-_-MyjQueryPlugins.com_.jpg 590w, uploads/2011/12/jRating-demonstration-_-jquery-plugin-Ajaxed-star-rating-system-with-jQuery-_-MyjQueryPlugins.com_-300x96.jpg 300w" sizes="(max-width: 590px) 100vw, 590px" />

jRating é um plugin altamente personalizável para a implementação de um sistema de votação com jQuery e AJAX. Permite configurar desde o número de estrelas até callbacks onSuccess e onError.

### Bônus: jQuery Boilerplate

<https://jqueryboilerplate.com>

Desenvolvido pelo brazuca [Zeno Rocha][3] em parceria com Addy Osmani e Adam J. Sontag, o jQuery Boilerplate é um template inicial para a criação de plugins jQuery e deve estar presente nos bookmarks de qualquer desenvolvedor jQuery.

* * *

### Para 2012&#8230;

&nbsp;

#### Create

<https://createjs.org>

O plugin Create ainda vai dar muito o que falar. Seu objetivo é oferecer uma interface de edição de conteúdo inline, recurso ainda pouco explorado por desenvolvedores.

#### nanoScroller

<https://jamesflorentino.com/jquery.nanoscroller/>

A personalização da barra de scroll foi moda durante um tempo e (ainda bem?) ficou no passado. O plugin nanoScroller oferece um scroll simples, simulando o visual do Mac OS.

* * *

Esqueci algum? Deixei de fora aquele plugin que você curtiu muito? Compartilhe com a gente nos comentários!

 [1]: https://tableless.com.br/?s=responsive+design
 [2]: https://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/
 [3]: https://www.zenorocha.com