Plugins em jQuery

Vejamos o que são os Plugins em jQuery e como podemos criá-los para expandir as possibilidades do framework.

Por Miguel Angel Alvarez - Tradução de Celeste Veiga


Publicado em: 29/12/11
Valorize este artigo:
Se você chegou a este ponto no Manual de jQuery e colocou em prática os exemplos realizados até agora, não tenho dúvidas de que já terá uma pequena ideia das coisas que podem ser feitas com o framework.Você terá comprovado que, com poucas linhas de código, podem ser feitos diversos efeitos e dotar a página de interação com o usuário, mas talvez você ainda se sinta um pouco perdido à hora de encarar o desenvolvimento de problemas mais complexos com os que poderá se deparar.

Ainda temos muito caminho pela frente, mas o bom é que, com o que você sabe até agora, tem uma base suficiente para começar a fazer coisas mais divertidas e exemplos que valham mais a pena como prática para seu dia a dia. Além disso, terá que aprender a programar de una maneira adequada em jQuery e sobretudo criar código reutilizável e com um ciclo de vida maior. Para cumprir todos esses objetivos vamos passar diretamente a explicar os plugins em jQuery, uma das "ferramentas" que você utilizará habitualmente, se quer fazer coisas mais avançadas com o framework e tirar todo o proveito dele.

O que são os Plugins

Os plugins são a utilidade que jQuery põe à disposição dos desenvolvedores para ampliar as funcionalidades do framework. No geral, servirão para fazer coisas mais complexas necessárias para resolver necessidades específicas, mas as fazem de maneira que possam ser utilizadas no futuro em qualquer parte e por qualquer web.

Na prática um plugin não é mais que uma função que se acrescenta ao objeto jQuery (objeto básico deste framework que retorna a função jQuery para um seletor dado), para que a partir desse momento responda a novos métodos. Como já sabemos, neste framework tudo está baseado no objeto jQuery, assim que com os plugins podemos acrescentar- lhes novas utilidades.

Vou dar um exemplo um pouco abstrato para ver se podemos chegar à ideia de como é um plugin. Imagine que você necessita que os elementos da página "dancem" (pisquem, se movam, interatuem com o usuário de uma maneira específica, ou qualquer coisa que você necessite), pois você cria uma função para fazer isto. Você faz com que essa função seja um plugin chamado "dançar" e a partir de então, qualquer elemento da página que você desejar poderá dançar. Para tanto, você simplesmente invoca esse método do objeto jQuery sobre o elemento ou elementos que selecionar.

//com isto dançam todos os parágrafos
$("p").dançar();

//com isto dançam os elementos da classe "artista"
$(".artista").dançar();

//com isto dança o elemento com id="lola"
$("#lola").dançar();

Espero que o exemplo não tenha parecido muito tolo, mas é que os plugins não são nada do outro mundo, são simplesmente isso, extensões do framework para criar qualquer funcionalidade que possamos necessitar nos elementos da página, por muito especial, ou tola, que seja.

O genial dos plugins é que você poderá utilizar essa funcionalidade onde deseje a partir de agora, já que estará perfeitamente à sua disposição, sempre que você tenha carregado o plugin. Inclusive se você for muito generoso, poderá proporcioná-la a outras pessoas para que a utilizem em seus desenvolvimentos. Claro que, para conseguir tudo isto, será necessário que programe os plugins atendendo a uma série de normas, bastante simples, mas importantes, para garantir que podem ser utilizadas em qualquer parte e para qualquer seletor de jQuery.

Como se cria um plugin de jQuery

Os plugins em jQuery são criados atribuindo uma função à propriedade "fn" do objeto jQuery. A partir de então, essas funções atribuídas poderão ser utilizadas em qualquer objeto jQuery, como um dos muitos métodos de que dispõe esse objeto principal do framework.

Nota: A criação de plugins, para ampliar as funcionalidades de jQuery, é uma coisa tão básica que a maioria das funções com as que está dotado o próprio framework estão incluídas no objeto jQuery por meio de plugins. Ou seja, na construção do framework em muitas das vezes simplesmente são criados plugins para estendê-lo. Portanto, esta técnica é usada, não só por terceiros desenvolvedores, para criar novos componentes, com também pela própria equipe de jQuery para o desenho base deste framework.

Se desejamos, à parte de seguir os próximos artigos deste manual, podemos ver o código fonte do framework ou como são feitos os plugins de outros desenvolvedores, para ter uma ideia sobre como são utilizados.

Como exemplo, podemos ver a continuação um código fonte de um plugin muito simples:

jQuery.fn.desaparece = function() {
   this.each(function(){
      elem = $(this);
      elem.css("display", "none");
   });   
   return this;
};

Este plugin permitiria fazer desaparecer os elementos da página e poderíamos invocá-lo, por exemplo, da seguinte maneira:

$("h1").desaparece();

No artigo seguinte veremos com maior detalhe a criação de um plugin de jQuery e explicaremos vários temas que resultarão de vital importância para entender o código anterior e para construí-los nós mesmos.






Usuários :    login / registro
Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato