Como criar plug-ins com o framework jQuery

jQuery nos dá muita flexibilidade para escrever código e é tão simples que pode ser usado mesmo com pouco conhecimento e podemos realizar grandes projetos economizando muito tempo.
Uma das possibilidades do Jquery é que ele nos permite estendê-lo para criar novas funções neste framework. É uma boa ideia escolher desenvolver plug-ins que sejam muito úteis para nossos aplicativos da web e, então, poder reutilizá-los ou compartilhá-los com a comunidade.
Desenvolvendo um plugin Jquery
A estrutura básica de um plugin é a seguinte

 jQuery.fn.extend ({[b] miplugin [/ b]: função ([b] parâmetro [/ b]) {// código do plugin}}); 

Os parâmetros são opcionais. Vamos criar alguns exemplos para entender como um plugin é programado
Plugin que retorna uma mensagem se um botão, caixa de texto, link, etc. for clicado.
Escrevemos o seguinte código em um arquivo plugin.js

 jQuery.fn.extend ({send: function (message) {// Eu defino a função de envio e o parâmetro de mensagem $ (this) .click (function () {// se a função foi ativada por um alerta de clique (mensagem); // mostra a mensagem});}});

Criamos uma estrutura ou página html que contém um botão, por exemplo enviar

 // invocamos a biblioteca jquery // invocamos o pluginMandar

Salvamos o html e ao executá-lo desde o navegador clicamos no botão e veremos que a função jquery mostra uma mensagem.

Criamos outro plugin pode estar no mesmo arquivo js ou em outro se quisermos plugins separados.
Neste caso, será para modificar o aspecto css de um botão quando for pressionado, mudaremos a cor do texto e do fundo.

 jQuery.fn.extend ({alterar plano de fundo: função (plano de fundo, texto) {// função e parâmetros $ (este) .click (função () {// se acessado a partir de um clique jQuery (este) .css ("plano de fundo- color ", background); // altera a cor do background jQuery (this) .css (" color ", text); // altera a cor do texto});}}); 

Então nós temos que escrever o código html do elemento neste caso um botão cujo id será o fundo

Mudar cor

Devemos também iniciar a função, ficaríamos com as duas funções

Ao clicar no botão de mudança de cor, vemos que as mudanças de css são aplicadas.

Nesse sentido, podemos fazer alterações e atribuir funcionalidades a qualquer elemento html, por exemplo em html criamos um div vazio com o id da mensagem:

Então, no plugin de envio, nós mudamos

alerta (mensagem)

pelo seguinte código que publicará uma mensagem dentro da div ao pressionar o botão

 $ ("# mensagem"). html ("Dados enviados"); 

Ao clicar no botão enviar em vez da caixa de diálogo, a mensagem é gravada no div.

Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo