Come creare plugin con il framework jQuery

jQuery ci offre molta flessibilità per scrivere codice ed è così semplice che può essere utilizzato anche con poca conoscenza e possiamo realizzare grandi progetti risparmiando molto tempo.
Una delle possibilità di Jquery è che ci permette di estenderlo per creare nuove funzioni in questo framework. È una buona idea scegliere di sviluppare plugin molto utili per le nostre applicazioni web e poi poterli riutilizzare o condividerli con la community.
Sviluppo di un plugin Jquery
La struttura di base di un plugin è la seguente

 jQuery.fn.extend ({[b] miplugin [/ b]: funzione ([b] parametro [/ b]) {// codice plugin}}); 

I parametri sono facoltativi. Creeremo alcuni esempi per capire come si programma un plugin
Plugin che restituisce un messaggio se si fa clic su un pulsante, una casella di testo, un collegamento, ecc.
Scriviamo il seguente codice in un file plugin.js

 jQuery.fn.extend ({send: function (message) {// definisco la funzione send e il parametro message $ (this) .click (function () {// se la funzione è stata attivata da un click alert (message); // mostra il messaggio});}});

Creiamo una struttura o una pagina html che contenga un pulsante ad esempio invia

 // invochiamo la libreria jquery // invochiamo il pluginSpedire

Salviamo l'html e quando lo eseguiamo dal browser facciamo clic sul pulsante e vedremo che la funzione jquery visualizza un messaggio.

Creiamo un altro plugin che può essere nello stesso file js o in un altro se vogliamo plugin separati.
In questo caso sarà per modificare l'aspetto css di un pulsante quando viene premuto, cambieremo il colore del testo e lo sfondo.

 jQuery.fn.extend ({cambia sfondo: funzione (sfondo, testo) {// funzione e parametri $ (questo) .click (funzione () {// se si accede da un clic jQuery (questo) .css ("sfondo- color ", background); // cambia il colore dello sfondo jQuery (this) .css (" color ", text); // cambia il colore del testo});}}); 

Quindi dobbiamo scrivere il codice html dell'elemento in questo caso un pulsante il cui id sarà sfondo

Cambia colore

Dobbiamo anche avviare la funzione, rimarremmo con le due funzioni

Facendo clic sul pulsante cambia colore vediamo che vengono applicate le modifiche css.

In questo senso, possiamo apportare modifiche e assegnare funzionalità a qualsiasi elemento html, ad esempio in html creiamo un div vuoto con l'id del messaggio:

Quindi nel plugin di invio cambiamo

avviso (messaggio)

dal seguente codice che pubblicherà un messaggio all'interno del div quando si preme il pulsante

 $ ("# messaggio"). html ("Dati inviati"); 

Facendo clic sul pulsante di invio invece della finestra di dialogo ora il messaggio viene scritto nel div.

Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo