Com os plugins em jQuery podemos ampliar Framework, criando novos métodos para dotar de novas funcionalidades o objeto jQuery. No artigo anterior demos uma explicação geral sobre os plugins em jQuery e neste vamos nos adentrar em seu desenvolvimento.

Como você terá comprovado no Manual de jQueryo framework já contém muitas funções para fazer coisas interessantes, que se baseiam na utilização do objeto jQuery, de modo que agora vamos aprender a estender este objeto para proporcionar funcionalidades novas a nossas páginas. Porém, atenção, porque temos que realizar o trabalho seguindo uma série de normas, para assegurar que os plugins funcionem como devem e possam ser utilizados por qualquer desenvolvedor em qualquer página web.

Aqui você pode ver uma listagem de normas, que são poucas, mas que resultam tremendamente importantes.

• O arquivo que você crie com o código de seu plugin deve ser nomeado como jquery.[nome de seu plugin].js. Por exemplo, jquery.desaparece.js.
• Adicione as funções como novos métodos por meio da propriedade fn do objeto jQuery, para que se convertam em métodos do próprio objeto jQuery.
• Dentro dos métodos que você adicione como plugins, a palavra "this" será uma referência ao objeto jQuery que recebe o método. Portanto, podemos utilizar "this" para acessar qualquer propriedade do elemento da página com o que estamos trabalhando.
• Você deve colocar um ponto e vírgula ";" ao final de cada método que você crie como plugin, para que o código fonte possa ser comprimido e siga funcionando corretamente. Esse ponto e vírgula deve ser colocado depois de fechar a chave do código da função.
• O método deve retornar o próprio objeto jQuery sobre o que se solicitou a execução do plugin. Isto pode ser conseguido com um return this; ao final do código da função.
• Deve-se usar this.each para iterar sobretudo o conjunto de elementos que pode haver selecionados. Recordemos que os plugins são invocados sobre objetos obtidos com seletores e a função jQuery, e por isso que podem ter sido selecionados vários elementos e não só um. Assim, com this.each podemos iterar sobre cada um desses elementos selecionados. Isto é interessante para produzir código limpo, que ademais será compatível com seletores que correspondam a vários elementos da página.
• Atribuia o plugin sempre ao objeto jQuery, em vez de fazê-lo sobre o símbolo $, assim os usuários poderão usar alias personalizados para esse plugin através do método noConfict(), descartando os problemas que possam haver se dois plugin tiverem o mesmo nome.

Estas regras serão suficientes para plugins simples, embora, talvez, em cenários mais complexos necessitaremos aplicar outras regras para nos assegurarmos que tudo funcione bem.

Exemplo de um plugin em jQuery

Agora que já sabemos as regras básicas para fazer plugins podemos criar um por nossa conta que nos sirva para praticar o que aprendemos. Sugiro que você identifique os lugares onde aplicamos cada uma das normas anteriores da lista, ou ao menos as que se possam aplicar neste plugin tão simples que vamos ver.

O plugin que vamos construir serve para fazer com que os elementos da página pisquem, isto é, que desapareçam e voltem a aparecer em um breve instante. É um exemplo bem simples, que talvez tenha já alguma utilidade prática em seu site, para chamar a atenção sobre um ou vários elementos da página.

Para fazê-lo, utilizaremos outras funções do framework como fadeOut() (para fazer desaparecer o elemento) e fadeIn() (para que apareça de novo).

jQuery.fn.pisca = function() {
   this.each(function(){
      elem = $(this);
      elem.fadeOut(250, function(){
         $(this).fadeIn(250);
      });
   });
   return this;
};

Com this.each criamos um looping para cada elemento que possa haver sido selecionado para invocar o plugin. Com elem=$(this) conseguimos extender a this com todas as funcionalidades do framework e o objeto jQuery resultante salvá-lo em uma variável. A seguir, invocamos fadeOut(), enviando como parâmetro um número que são os milisegundos que durará o efeito de desaparecer o elemento. Depois, enviamos como parâmetro uma nova função que é um callback, que será executado quando tenha terminado fadeOut() e nessa função callback se encarregará simplesmente de executar um fadeIn() para mostrar de novo o elemento.

Agora vejamos como poderíamos invocar este plugin:

$(document).ready(function(){
   //piscam os elementos de class CSS "piscar"
   $(".piscar").pisca();
   
   //acrescento evento clic para um botão. Ao pressionar piscarão os elementos de classe piscar
   $("#botaopiscar").click(function(){
      $(".piscar").pisca();
   })
})

Dado o código anterior, ao abrir a página piscarão os elementos da classe "piscar" e em seguida haverá um botão que repetirá a ação de piscar quando se pressione.

Neste caso não colocamos o script em um arquivo à parte com o nome jquery.pisca.js, tal como se recomendava, mas no momento será suficiente para testar isso dos plugins e talvez mais fácil porque assim não necessitamos mais que um arquivo HTML com todo o código junto. Podemos ver o código completo deste exemplo a continuação:

<html>
<head>
<title>Criando plugins em jQuery</title>
   <script src="../jquery-1.4.1.min.js"></script>
<script>
jQuery.fn.pisca = function() {
   this.each(function(){
      elem = $(this);
      elem.fadeOut(250, function(){
         $(this).fadeIn(250);
      });
   });
   
   return this;
};
$(document).ready(function(){
   //piscam os elementos de class CSS "piscar"
   $(".piscar").pisca();
   
   //acrescento um evento clic para um botao, para que ao ser pressionado pisquem os elementos de classe piscar
   $("#botaopiscar").click(function(){
      $(".piscar").pisca();
   })
})
</script>
   
</head>
<body>
   <p class="piscar">Ola que tal, isto piscou graças a jQuery!</p>
   <p>Paragrafo normal que nao vai piscar.</p>
   <p class="piscar">Sí parpadea</p>
   <p>Paragrafo normal que nao vai piscar tampouco...</p>
   <div class="piscar" style="background-color: #ff9966; padding: 10px;">Esta camada tambem tem a classe piscar, com o que já se sabe...</div>
   <p><input type="button" value="Pisca de novo" id="botaopiscar"></p>
</body>
</html>

Para terminar, você pode acessar o exercício em uma página à parte.