Sådan oprettes plugins med jQuery -rammerne

jQuery giver os stor fleksibilitet til at skrive kode, og det er så enkelt, at det kan bruges, selv med lidt viden, og vi kan udføre store projekter, der sparer meget tid.
En af mulighederne for Jquery er, at den giver os mulighed for at udvide den for at skabe nye funktioner i denne ramme. Det er en god idé at vælge at udvikle plugins, der er meget nyttige til vores webapplikationer og derefter kunne genbruge dem eller dele dem med fællesskabet.
Udvikling af et Jquery -plugin
Den grundlæggende struktur for et plugin er som følger

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

Parametre er valgfrie. Vi skal lave nogle eksempler for at forstå, hvordan et plugin er programmeret
Plugin, der returnerer en besked, hvis der blev klikket på en knap, tekstboks, link osv.
Vi skriver følgende kode i en plugin.js -fil

 jQuery.fn.extend ({send: function (meddelelse) {// Jeg definerer afsendelsesfunktionen og meddelelsesparameteren $ (dette). klik (funktion () {// hvis funktionen blev aktiveret af en klikalarm (besked); // vis meddelelsen});}});

Vi opretter en struktur eller html -side, der indeholder en knap, f.eks. Send

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

Vi gemmer html'en, og når vi udfører den fra browseren, klikker vi på knappen, og vi vil se, at jquery -funktionen viser en meddelelse.

Vi opretter et andet plugin kan være i den samme js -fil eller i et andet, hvis vi ønsker separate plugins.
I dette tilfælde vil det være at ændre css -aspektet af en knap, når der trykkes på det, vi vil ændre farven på teksten og baggrunden.

 jQuery.fn.extend ({ændre baggrund: funktion (baggrund, tekst) {// funktion og parametre $ (dette). klik (funktion () {// hvis der åbnes fra et klik jQuery (dette) .css ("baggrund- farve ", baggrund); // ændre farven på baggrunden jQuery (denne) .css (" farve ", tekst); // ændre farven på teksten});}})); 

Derefter skal vi skrive elementets html -kode i dette tilfælde en knap, hvis id vil være baggrund

Skift farve

Vi skal også starte funktionen, vi ville sidde tilbage med de to funktioner

Ved at klikke på knappen Skift farve ser vi, at css -ændringerne anvendes.

I denne forstand kan vi foretage ændringer og tildele funktionaliteter til ethvert html -element, for eksempel i html opretter vi en tom div med meddelelses -id:

Derefter ændrer vi i send -pluginet

advarsel (besked)

ved følgende kode, der vil offentliggøre en besked inde i div, når der trykkes på knappen

 $ ("# meddelelse"). html ("Data sendt"); 

Hvis du klikker på knappen Send i stedet for dialogboksen, er beskeden nu skrevet til div.

Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt