jQuery vtičniki, drugi del

November 26th, 2009 by Krof Drakula Leave a reply »

Po prvem članku, ki pokriva osnove izolacije Javascript kode, se premikamo  v področje same jQuery knjižnice ter njenih pomožnih funkcij, s katerimi bomo zgradili naš vtičnik. Tokrat si bomo ogledali osnovni jQuery objekt ter jQuery množice.

Kot se spomnite, smo v prejšnjem članku govorili o lokalizaciji spremenljivk in zaščiti kode pred zunanjimi vplivi. Začnimo pa z osnovnimi orodji, s katerimi dodajamo funkcionalnost sami knjižnici.

Na tej točki je seveda treba omeniti, da jQuery vsebuje dva tipa funkcij: funkcije, ki niso vezane na neko množico elementov, in funkcije, ki vplivajo na izbrane elemente. Nekatere izmed funkcij prvega tipa so:

  • $.get() – sproži GET Ajax klic
  • $.extend() – razširi in/ali prenastavi lastnosti objekta z vrednostmi in lastnostmi drugega objekta
  • $.noConflict() – preklopi jQuery v varni način (za uporabo na isti strani z več knjižnicami)

Te funkcije se nahajajo na samem jQuery objektu in jih tako tudi izvajamo.

Sedaj pa si oglejmo par primerov funkcij drugega tipa:

  • $(selektor).css() – upravljanje s CSS lastnostmi izbranih elementov
  • $(selektor).attr() – upravljanje s HTML lastnostmi elementov
  • $(selektor).toggleClass() – preklop CSS klase na izbranih elementih

Razlika med prvim in drugim tipom funkcij je obseg delovanja – prvi tip deluje brez izbranih elementov, drugi pa deluje izključno na množici, ki ustrezajo določenemu selektorju oz. je množica sestavljena iz niza drugih operacij.

Ko želimo razširiti funkcionalnost jQuery knjižnice, se moramo najprej vprašati, kakšne zahteve bodo naše funkcije imele. Ali bomo izvajali operacijo, ki kot parameter potrebuje vhodne elemente in/ali na njih vpliva?

Če je odgovor na zgornje vprašanje nikalen, bo to funkcija prvega tipa, torej bomo na jQuery objektu definirali novo funkcijo. To storimo s pomočjo $.extend() funkcije:

$.extend({
  countWords: function(text) {
                return text.replace(/\s+/g, " ").split(" ").length;
              }
});

Še kratka razlaga zapisa: funkciji extend() smo podali nov objekt z eno samo lastnostjo, countWords, katere vrednost je funkcija, ki prešteje besede v tekstu, podanem kot parameter. extend() v tem primeru pripne jQuery objektu novo funkcijo, countWords(), ki jo lahko uporabimo na naslednji način:

alert($.countWords("Lorem ipsum dolor sit amet."));

V tem primeru prikaže opozorilno okno, ki kaže število  besed v podanem nizu.

Če pa želimo vplivati na določeno množico elementov, potem moramo na množici definirati novo funkcijo, kar storimo spet z extend() funkcijo, ampak tokrat na fn lastnosti jQuery objekta:

$.fn.extend({
  alternateRows: function() {
                   return this.each(function() {
                     var $t = $(this);
                     if($t.is("table")) {
                       $t.find("tr:even").addClass("even");
                       $t.find("tr:odd").addClass("odd");
                     }
                   });
                 }
});

Ko dodajamo fn objektu lastnosti, te lastnosti postanejo na voljo, ko imamo opravka z množicami; v zgornjem primeru dodamo funkcijo alternateRows(), ki jo lahko kličemo na naslednji način:

$("table").alternateRows();

Ta funkcija bo iterirala po vseh elementih množice s pomočjo each() funkcije (this se v alternateRows funkciji nanaša na jQuery množico), znotraj iteratorja pa preverimo, če je trenutni element tabela (.is(”table”)) in nato vsem lihim ter sodim vrsticam dodamo even in odd razreda.

V tem primeru smo uporabili moč jQuery selektorjev in omogočili uporabniku našega plugina uporabiti funkcijo, ki naredi končno kodo dosti bolj modularno in berljivo, poleg tega pa se s pisanjem takšne modularne kode držimo principa DRY.

Če želimo definirati parametre funkcije, potem seveda lahko to dodamo v zapis funkcije, ko jo podajamo extend() funkciji:

$.fn.extend({
  alternateRows: function(<strong>oddClass</strong>, <strong>evenClass</strong>) {
                   this.each(function() {
                     var $t = $(this);
                     if($t.is("table")) {
                       $t.find("tr:even").addClass(<strong>evenClass</strong>);
                       $t.find("tr:odd").addClass(<strong>oddClass</strong>);
                     }
                   });
                 }
});

V tem primeru naša funkcija pričakuje 2 parametra, ki jih ob klicu podamo na naslednji način:

$("table").alternateRows("liha", "soda");

O parametrih in privzetih vrednostih pa bom pisal v naslednjem članku v seriji, vključno z boljšim načinom podajanja parametrov. :)

Advertisement