Hur man skapar plugins med jQuery -ramverket

jQuery ger oss mycket flexibilitet att skriva kod och det är så enkelt att det kan användas även med lite kunskap och vi kan utföra stora projekt som sparar mycket tid.
En av Jquerys möjligheter är att den tillåter oss att utöka den för att skapa nya funktioner i detta ramverk. Det är en bra idé att välja att utveckla plugins som är mycket användbara för våra webbapplikationer och sedan kunna återanvända dem eller dela dem med gemenskapen.
Utvecklar ett Jquery -plugin
Den grundläggande strukturen för ett plugin är enligt följande

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

Parametrar är valfria. Vi ska skapa några exempel för att förstå hur ett plugin är programmerat
Plugin som returnerar ett meddelande om du klickade på en knapp, textruta, länk etc.
Vi skriver följande kod i en plugin.js -fil

 jQuery.fn.extend ({send: function (meddelande) {// Jag definierar sändningsfunktionen och meddelandeparametern $ (detta). klick (funktion () {// om funktionen aktiverades av en klickvarning (meddelande); // visa meddelandet});}});

Vi skapar en struktur eller html -sida som innehåller en knapp till exempel skicka

 // vi åberopar jquery -biblioteket // vi åberopar pluginetSkicka

Vi sparar html och när vi kör det från webbläsaren klickar vi på knappen så ser vi att jquery -funktionen visar ett meddelande.

Vi skapar en annan plugin kan vara i samma js -fil eller i en annan om vi vill ha separata plugins.
I det här fallet blir det att ändra css -aspekten på en knapp när den trycks in, vi kommer att ändra färgen på texten och bakgrunden.

 jQuery.fn.extend ({ändra bakgrund: funktion (bakgrund, text) {// funktion och parametrar $ (detta). klick (funktion () {// om du kommer från ett klick jQuery (detta) .css ("bakgrund- färg ", bakgrund); // ändra färgen på bakgrunden jQuery (detta) .css (" färg ", text); // ändra färg på texten});}})); 

Sedan måste vi skriva HTML -koden för elementet i det här fallet en knapp vars id kommer att vara bakgrund

Ändra färg

Vi måste också initiera funktionen, vi skulle sitta kvar med de två funktionerna

Genom att klicka på knappen ändra färg ser vi att css -ändringarna tillämpas.

I den meningen kan vi göra ändringar och tilldela funktionalitet till valfritt html -element, till exempel i html skapar vi en tom div med meddelande -id:

Sedan ändrar vi i skicka -plugin

varning (meddelande)

med följande kod som kommer att publicera ett meddelande i div när du trycker på knappen

 $ ("# meddelande"). html ("Data skickas"); 

Genom att klicka på skicka -knappen istället för dialogrutan nu skrivs meddelandet till div.

Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng