Hoe plug-ins te maken met het jQuery-framework

jQuery geeft ons veel flexibiliteit om code te schrijven en het is zo eenvoudig dat het zelfs met weinig kennis kan worden gebruikt en we grote projecten kunnen uitvoeren en veel tijd kunnen besparen.
Een van de mogelijkheden van JQuery is dat we het kunnen uitbreiden om nieuwe functies in dit raamwerk te creëren. Het is een goed idee om ervoor te kiezen plug-ins te ontwikkelen die erg handig zijn voor onze webapplicaties en deze vervolgens te kunnen hergebruiken of te delen met de community.
Een JQuery-plug-in ontwikkelen
De basisstructuur van een plug-in is als volgt:

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

Parameters zijn optioneel. We gaan enkele voorbeelden maken om te begrijpen hoe een plug-in is geprogrammeerd
Plug-in die een bericht retourneert als er op een knop, tekstvak, link, etc. is geklikt.
We schrijven de volgende code in een plugin.js-bestand:

 jQuery.fn.extend ({send: function (message) {// Ik definieer de send-functie en de berichtparameter $ (this) .click (function () {// als de functie is geactiveerd door een klikwaarschuwing (bericht); // toon het bericht});}});

We maken een structuur of html-pagina die een knop bevat, bijvoorbeeld verzenden

 // we roepen de jQuery-bibliotheek aan // we roepen de plug-in aanVersturen

We slaan de html op en wanneer we deze vanuit de browser uitvoeren, klikken we op de knop en zullen we zien dat de jQuery-functie een bericht weergeeft.

We maken een andere plug-in in hetzelfde js-bestand of in een andere als we afzonderlijke plug-ins willen.
In dit geval zal het zijn om het CSS-aspect van een knop te wijzigen wanneer erop wordt gedrukt, we zullen de kleur van de tekst en de achtergrond veranderen.

 jQuery.fn.extend ({change background: function (background, text) {// function and parameters $ (this) .click (function () {// if benaderd from a click jQuery (this) .css ("background- kleur ", achtergrond); // verander de kleur van de achtergrond jQuery (this) .css (" kleur ", tekst); // verander de kleur van de tekst});}}); 

Dan moeten we de html-code van het element schrijven, in dit geval een knop waarvan de id de achtergrond is

Verander kleur

We moeten ook de functie starten, we zouden de twee functies overhouden

Door op de knop kleur wijzigen te klikken, zien we dat de css-wijzigingen zijn toegepast.

In die zin kunnen we wijzigingen aanbrengen en functionaliteiten toewijzen aan elk html-element, bijvoorbeeld in html maken we een lege div met het bericht-ID:

Dan veranderen we in de verzend-plug-in

waarschuwing (bericht)

door de volgende code die een bericht in de div zal publiceren wanneer op de knop wordt gedrukt

 $ ("# bericht"). html ("Gegevens verzonden"); 

Als u op de verzendknop klikt in plaats van op het dialoogvenster, wordt het bericht nu naar de div geschreven.

Vond je deze tutorial leuk en hielp je hem?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven