Cum se creează pluginuri cu cadrul jQuery

jQuery ne oferă multă flexibilitate pentru a scrie cod și este atât de simplu încât poate fi folosit chiar și cu puține cunoștințe și putem realiza proiecte mari economisind mult timp.
Una dintre posibilitățile Jquery este că ne permite să o extindem pentru a crea noi funcții în acest cadru. Este o idee bună să alegeți să dezvoltați plugin-uri care sunt foarte utile pentru aplicațiile noastre web și apoi să le puteți reutiliza sau partaja cu comunitatea.
Dezvoltarea unui plugin Jquery
Structura de bază a unui plugin este următoarea

 jQuery.fn.extend ({[b] miplugin [/ b]: funcție ([b] parametru [/ b]) {// cod de plugin}}); 

Parametrii sunt opționali. Vom crea câteva exemple pentru a înțelege cum este programat un plugin
Plugin care returnează un mesaj dacă s-a făcut clic pe un buton, casetă text, link etc.
Scriem următorul cod într-un fișier plugin.js

 jQuery.fn.extend ({trimitere: funcție (mesaj) {// definesc funcția de trimitere și parametrul mesajului $ (acesta). faceți clic (funcție () {// dacă funcția a fost activată printr-o alertă de clic (mesaj); // arată mesajul});}});

Creăm o structură sau o pagină html care conține un buton, de exemplu, trimiteți

 // invocăm biblioteca jquery // invocăm pluginulTrimite

Salvăm html și când îl executăm din browser facem clic pe buton și vom vedea că funcția jquery afișează un mesaj.

Creăm un alt plugin care poate fi în același fișier js sau în altul dacă dorim pluginuri separate.
În acest caz, va fi modificarea aspectului css al unui buton atunci când este apăsat, vom schimba culoarea textului și fundalul.

 jQuery.fn.extend ({schimbare fundal: funcție (fundal, text) {// funcție și parametri $ (this) .click (function () {// dacă este accesat dintr-un clic jQuery (this) .css ("background- culoare ", fundal); // modificați culoarea fundalului jQuery (aceasta) .css (" culoare ", text); // modificați culoarea textului});}}); 

Apoi, trebuie să scriem codul html al elementului în acest caz un buton al cărui id va fi fundal

Schimba culoarea

De asemenea, trebuie să inițiem funcția, am rămâne cu cele două funcții

Dând clic pe butonul de schimbare a culorii, vedem că modificările CSS sunt aplicate.

În acest sens, putem face modificări și atribui funcționalități oricărui element html, de exemplu în html creăm un div gol cu ​​id-ul mesajului:

Apoi, în pluginul de trimitere ne schimbăm

alertă (mesaj)

prin următorul cod care va publica un mesaj în interiorul divului la apăsarea butonului

 $ ("# mesaj"). html ("Date trimise"); 

Dacă faceți clic pe butonul de trimitere în locul dialogului, mesajul este scris în div.

V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv