Kako stvoriti dodatke s okvirom jQuery

jQuery nam daje veliku fleksibilnost u pisanju koda, a tako je jednostavan da se može koristiti čak i s malo znanja te možemo izvesti velike projekte štedeći puno vremena.
Jedna od mogućnosti Jqueryja je ta što nam omogućuje proširenje radi stvaranja novih funkcija u ovom okviru. Dobra je ideja odabrati razvoj dodataka koji su vrlo korisni za naše web aplikacije, a zatim ih moći ponovno koristiti ili podijeliti sa zajednicom.
Razvoj Jquery dodatka
Osnovna struktura dodatka je sljedeća

 jQuery.fn.extend ({[b] miplugin [/ b]: function ([b] parametar [/ b]) {// kôd dodatka}}); 

Parametri su neobavezni. Napravit ćemo neke primjere kako bismo razumjeli kako je dodatak programiran
Dodatak koji vraća poruku ako ste pritisnuli gumb, tekstualni okvir, vezu itd.
Sljedeći kôd zapisujemo u datoteku plugin.js

 jQuery.fn.extend ({send: function (message) {// Definiram funkciju slanja i parametar poruke $ (this) .click (function () {// ako je funkcija aktivirana upozorenjem o kliku (poruka); // pokaži poruku});}});

Izrađujemo strukturu ili html stranicu koja sadrži gumb za primjer slanja

 // pozivamo knjižnicu jquery // pozivamo dodatakPoslati

Spremamo html i kada ga izvršimo iz preglednika, kliknemo gumb i vidjet ćemo da funkcija jquery prikazuje poruku.

Izrađujemo još jedan dodatak koji može biti u istoj js datoteci ili u drugom ako želimo zasebne dodatke.
U ovom slučaju bit će potrebno promijeniti css aspekt gumba kada se pritisne, promijenit ćemo boju teksta i pozadinu.

 jQuery.fn.extend ({promijeni pozadinu: funkcija (pozadina, tekst) {// funkcija i parametri $ (this) .click (function () {// ako se pristupa s klika jQuery (this) .css ("background- boja ", pozadina); // promijenimo boju pozadine jQuery (this) .css (" boja ", tekst); // promijenimo boju teksta});}}); 

Zatim moramo napisati html kod elementa u ovom slučaju gumb čiji će ID biti pozadina

Promijenite boju

Moramo i pokrenuti funkciju, ostale bi nam dvije funkcije

Klikom na gumb za promjenu boje vidimo da su promjene css primijenjene.

U tom smislu možemo unijeti promjene i dodijeliti funkcionalnosti bilo kojem html elementu, na primjer u html stvaramo prazan div s ID -om poruke:

Zatim se u dodatku za slanje mijenjamo

upozorenje (poruka)

pomoću sljedećeg koda koji će objaviti poruku unutar div -a kada pritisnete gumb

 $ ("# poruka"). html ("Podaci su poslani"); 

Klikom na gumb za slanje umjesto dijaloga sada se poruka zapisuje u div.

Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod