Utilizar JQuery hoje sem dúvida é essencial para desenvolver sites e aplicativos. O sucesso deste framework javascript é muito por conta de seus plugins. Hoje existem milhares de plugins desenvolvidos para as mais diversas funções e utilizações.
Agora chegou a hora de você criar o seu próprio plugin. O que acha?
O código a seguir mostra o esqueleto para a criação de um plugin.
// É necessário criar a definição do plugin dentro de um Onload.
(function( $ ){
// Adiciona ao objeto Function do JQuery seu plugin.
$.fn.nomedoplugin = function(options) {
// Definição dos valores padrões
var defaults = {
'parametro1' : 'valor1',
'parametro2' : 'valor2',
};
// Geração das settings do seu plugin
var settings = $.extend( {}, defaults, options );
// Loop que utiliza todos os itens envolvidos na utilização do plugin
// Este looping garante o encadeamento para que todos os itens sejam utilizados
return this.each(function() {
// Seu código aqui
// Para utilizar os parâmetros utilize: settings.parametro1
});
};
})( jQuery );
Utilizando o modelo anterior, criei um pequeno plugin que altera a cor de background de elementos.
(function( $ ){
$.fn.Colore = function(options) {
var defaults = {
'cor' : 'green'
};
var settings = $.extend( {}, defaults, options );
return this.each(function() {
$(this).css({ background: settings.cor });
});
};
})( jQuery );
No exemplo abaixo utilizo o plugin para trocar a cor de fundo de todos os links da uma página.
$(function(){
$("a").Colore({cor:'yellow'});
});
Pronto! É isso. Essa é o modelo para criação de um plugin simples. Claro que o assunto não para por aí, se você quiser se aprofundar no assunto recomento a Documentação Oficial sobre Plugins e também JQuery BoilerplateM.
Se você tem uma ideia para um plugin agora é só colocar a mão na massa.
