✅ Hvordan lage plugins med jQuery -rammeverket

Innholdsfortegnelse

jQuery gir oss mye fleksibilitet til å skrive kode, og det er så enkelt at det kan brukes selv med liten kunnskap, og vi kan utføre store prosjekter som sparer mye tid.
En av mulighetene til Jquery er at den lar oss utvide den for å skape nye funksjoner i dette rammeverket. Det er en god idé å velge å utvikle plugins som er veldig nyttige for våre webapplikasjoner og deretter kunne bruke dem på nytt eller dele dem med fellesskapet.
Utvikler en Jquery -plugin
Den grunnleggende strukturen til et plugin er som følger

 jQuery.fn.extend ({[b] miplugin [/ b]: function ([b] parameter [/ b]) {// plugin code}});

Parametere er valgfrie. Vi skal lage noen eksempler for å forstå hvordan et programtillegg er programmert
Plugin som returnerer en melding hvis det ble klikket på en knapp, tekstboks, lenke osv.
Vi skriver følgende kode i en plugin.js -fil

 jQuery.fn.extend ({send: function (melding) {// Jeg definerer sendingsfunksjonen og meldingsparameteren $ (dette). klikk (function () {// hvis funksjonen ble aktivert av et klikkvarsel (melding); // vis meldingen});}});

Vi lager en struktur eller html -side som inneholder en knapp, for eksempel send

 // vi påkaller jquery -biblioteket // vi påkaller pluginetSende

Vi lagrer HTML -filen, og når vi kjører den fra nettleseren klikker vi på knappen, så ser vi at jquery -funksjonen viser en melding.

Vi lager en annen plugin kan være i den samme js -filen eller i en annen hvis vi vil ha separate plugins.
I dette tilfellet vil det være å endre css -aspektet til en knapp når den trykkes, vi vil endre fargen på teksten og bakgrunnen.

 jQuery.fn.extend ({endre bakgrunn: funksjon (bakgrunn, tekst) {// funksjon og parametere $ (dette). klikk (funksjon () {// hvis du får tilgang til det fra et klikk jQuery (dette) .css ("bakgrunn- farge ", bakgrunn); // endre fargen på bakgrunnen jQuery (denne) .css (" farge ", tekst); // endre fargen på teksten});}}));

Deretter må vi skrive HTML -koden til elementet i dette tilfellet en knapp hvis ID vil være bakgrunn

Endre farge

Vi må også starte funksjonen, vi ville sitte igjen med de to funksjonene

Ved å klikke på endre farge -knappen ser vi at css -endringene blir brukt.

I denne forstand kan vi gjøre endringer og tilordne funksjonalitet til et hvilket som helst html -element, for eksempel i html lager vi en tom div med meldings -ID:

Deretter endrer vi i send -pluginet