Os plugins são uma forma de ampliar o poder da framework, criando novos métodos e funcionalidades ao objeto jQuery, proporcionando aos desenvolvedores novas funcionalidades para suas páginas.
Na hora de criar um plugin para a biblioteca jQuery é preciso se atentar para algumas normas que irão assegurar que ele funcionará como deve e poderá ser utilizado por qualquer desenvolvedor, em qualquer página web.
Veja abaixo algumas normas, que são muito importantes:
- O arquivo que contém o código-fonte do plugin deve ter a seguinte nomenclatura: jquery.nome_do_plugin.js
- Insira as funções como novos métodos através da propriedade fn do objeto jQuery, assim os métodos do seu plugin serão convertidos em métodos do próprio objeto jQuery.
- Dentro dos métodos que insere como plugins, a palavra reservada “this” será uma referência ao objetpo jQuery que recebe o método. Portanto, pode-se utilizar “this” para acessar qualquer prorpriedade do elemento da página que está sendo utilizada.
- Ao final de cada método do plugin deve ser colocado um “;” (ponto e vírgula), dessa forma o código-fonte pode comprimir e seguir funcionando corretamente.
- O método deve retornar o próprio objeto jQuery sobre o qual foi solicitada a execução do plugin. Isso é feito usando a expressão “return this”, no final do código da função.
- Deve ser utilizado “this.each” para iterar sobre todo o conjunto de elementos que pode ter sido selecionado. Lembre-se que os plugins são chamados sobre objetos que são obtidos através de seletores e da função jQuery, e podem haver selecionado vários elementos e não somente um. Assim, com “this.each” será feita uma iteração sobre cada um dos elementos selecionados.
- Atribua o plugin sempre ao objeto jQuery, ao invés de fazer sobre o símbolo “#8221;, assim os usuários poderão usar alias personalisados para o plugin através do método noConflict(), descartando os problemas que podem haver si dois plugins tiverem o mesmo nome.
As regras acima são suficientes para o desenvolvimendo de plugins simples, embora talvez em cenários mais complexos seja necessário aplicar outras normas para garantir que tudo funcione corretamente.
Para matar a curiosidade de muitos, vamos ver um pequeno exemplo de como seria a montagem de um plugin.
Abra o seu editor de código e crie um arquivo chamado jquery.primeiroplugin.js. Em seguida digite o código abaixo:
jQuery.fn.ocultar = function(){
this.each(function(){
jqElem = $(this);
jqElem.hide();
});
return this;
};
Está pronto o plugin. Agora basta fazer a inclusão do plugin na página e chamá-lo da seguinte forma dentro do seu arquivo de funções javascript ou na própria página onde será utilizado:
$(document).ready(function(){
$('#ocultar').click(function(){
$('.txtadicional').ocultar();
});
})
Você pode fazer um plugin mais robusto, que controle operações importantes, desde formulários de dados até a visualização e manipulação de objetos do DOM.
Continuem acompanhando os artigos, muita coisa legal está por vir.
Até a próxima.