Uključi me: Pisanje vlastitog dodatka

Pisanje vlastitih dodataka za jQuery je prilično jednostavno. Ukoliko se pridržavate sledećih pravila, biće lako i za druge da integrišu vaš plugin.

Plugin Naming (Imenovanje dodatka)
Prvo nađimo ime za plugin, neka to bude za naš primer "foobar". Kreirajte fajl sa nazivom jquery.[yourpluginname].js.

Dodavanje Custom Metoda
Napravite jednu ili više plugin metoda dodatnim jQuery objektom, npr.:

jQuery.fn.foobar = function() {
 // do something
 };

Što će biti dostupno izvršavanjem:

$(...).foobar();

Podrazumevano podešavanje:

Napravite podrazumevano podešavanje koje korisnik može da menja :

jQuery.fn.foobar = function(options) {
 var settings = jQuery.extend({
 value: 5, name: "pete", bar: 655
 }, options);
 };

Potom možete zvati plugin i bez dodatka opcije, koristeći one standardne:

$("...").foobar();

Ili sa nekim opcijama:

$("...").foobar({ value: 123, bar: 9 });

 

Dokumentacija

Ako objavljujete vaš plugin, trebalo bi da imate i primere i napisanu dokumentaciju. Postoji dosta plugin-ova koje možete koristiti kao referencu. 

Sada biste trebali imati osnovnu ideju za pisanje dodatka. Iskoristimo naše dosadašnje znanje i napišimo jedan plugin.

Checkbox Plugin

Mnogo ljudi, želi da uređuju forme sa jQuery, ili delove formi kao što su checking i unchecking radio buttons:

 $("input[@type='checkbox']").each(function() {
 this.checked = true;
 this.checked = false; // or, to uncheck
 this.checked = !this.checked; // or, to toggle
 });

Ako želite da ga preradite u plugin:

jQuery.fn.check = function() {
 return this.each(function() {
 this.checked = true;
 });
 };

Ovaj dodatak se sada može koristiti:

 $("input[@type='checkbox']").check();

Sada biste mogli napisati dodataka za uncheck() i toggleCheck(). Ali, umesto toga ćemo proširiti naš dodatak nekim opcijama:

jQuery.fn.check = function(mode) {
 // if mode is undefined, use 'on' as default
 var mode = mode || 'on';
 
 return this.each(function() {
 switch(mode) {
 case 'on':
 this.checked = true;
 break;
 case 'off':
 this.checked = false;
 break;
 case 'toggle':
 this.checked = !this.checked;
 break;
 }
 });
 };

Dajući za podrazumevanu opciju, korisnik ih može podestiti npr.:

$("input[@type='checkbox']").check();
$("input[@type='checkbox']").check('on');
$("input[@type='checkbox']").check('off');
$("input[@type='checkbox']").check('toggle');

Opciona podešavanja
Ukoliko želimo više od jednog opcionog podešavanja, tada celu priču malo komplikujemo, jer korisnik mora nulirati vrednosti, ukoliko želi propustiti prvi parametar i koristiti samo drugi.

Upotreba tablesorter u prethodnom poglavlju, demonstrira upotrebu objekta za rješavanje ovog problema. Korisnik može izostaviti sve parametre ili pass objekt s ključem / vrednošću za svako podešavanje koje želi da promeni.

Za vežbu, možemo pokušati prepisati kod za glasanje u plugin. Osnova plugin-a bi trebala izgledati ovako:

jQuery.fn.rateMe = function(options) {
 // instead of selecting a static container with 
 // $("#rating"), we now use the jQuery context
 var container = this;
 
 var settings = jQuery.extend({
 url: "rate.php"
 // put more defaults here
 }, options);
 
 // ... rest of the code ...
 
 // if possible, return "this" to not break the chain
 return this;
 });

I dozvoljava vam pokretanje dodatka na sledeći način:

$(...).rateMe({ url: "test.php" });

Sledeći koraci
Ako nameravate da razvijate JavaScript, trebali biste razmotriti Firefox ekstenziju zvanu FireBug. Ona omogućava konzolu, debugger i ostale korisne "sitnice" za svkodnevni JavaScript razvoj.

Ukoliko imate problem koje ne možete da rešite, ili imate ideje koje želite da podelite ili imate potrebu da iskažete svoje mišljenje o jQuery, slobodno možete pisati na jQuery mailing listu.

Za sve što se odnosi na originalni vodič na engleskom jeziku možete napisati komentar na blogu autora ili ga kontaktirati direktno.

Šta je još ostalo... Hvala mnogo John Resig-u za ovu veliku biblioteku! Hvala i jQuery zajednici.