Naučite jQuery JavaScript library

jQuery JavaScript library

Već smo pisali o toj mega popularnoj JavaScript library, pisali smo o njenom autoru i koristili je u našim tutorijalima. Danas ćemo vam pokušati malo objasniti kako funkcionira, proći ćemo zajedno par praktičnih primjera i dobiti ćete mnoštvo resursa za učenje. Moto ove moderne knjižnice je jQuery: The Write Less, Do More, JavaScript Library, upravo u toj rečenici autori su objasnili cilj svih tih JavaScript library-a, a ne samo jQuery-a. Zašto da pišete gomilu JavaScript koda kada je netko to već učinio za vas i može se reći da je odradio jako dobar posao. Zaboravite optimizaciju vašeg JavaScript koda za beskonačne verzije browsera, JavaScript library je već optimiziran. To je samo jedan mali primjer onoga što dobivate sa JavaScript libraryem. Naravno da te knjižnice nisu svemoguće ali vam uvelike mogu olakšati svakodnevni posao. Na primjer jQuery JavaScript library koriste mnoga velika imena IT svijeta i ako su oni shvatili prednosti tog malog pomoćnika kako ne bi i vi. Neka od tih velikih imena su: Google, Dell, WordPress, Drupal, CBS, NBC, Microsoft i Nokia su ju počeli ugrađivati u svoje službene aplikacije i mislimo da smo s time rekli sve.

Najnovija verzija (u trenutku pisanja ovog članka) jQuery JavaScript library-a je v.1.3.2 i možete je skinuti na službenim stranicama. Učinite to sada jer će vam trebati za naše primjere. Na službenim stranicama postoje dvije verzije za skinuti, jedna je kompresirana (optimizirana) i služi za produkciju, a druga je normalna i služi za razvoj. Za vas smo napravili on-line alat za kompresiranje JavaScripta.

Oznaka jQuery funkcija je znak dolara $ i sve počinju s njim. Najčešća jQuery sintaksa koju ćete viđati je:

$(document).ready(function() {
  ...
});

Taj dio koda (ready event) govori vašem browseru da cijeli JavaScript unutar te funkcije može biti izvršen čim je stranica spremna bez nepotrebnog čekanja da se učitaju sve slike, oglasi itd.

Izvršenje koda nakon učitavanja stranice

Prije se to radilo na sljedeći način, a zasigurno neki web developeri još uvijek tako rade:

window.onload = function(){ alert("dobrodošli"); }

window.onload JavaScript funkcija znači da se definirani kod izvršava tek kada je stranica u potpunosti učitana, to su sve one slike, banneri i ostale nepotrebne stvari. Govorimo nepotrebne jer nisu bitne za naš JavaScript. Već na samome početku možete uočiti prednosti jQuery-a i to je samo jedna u nizu.

Pogledajmo jedan praktični primjer:

 $(document).ready(function(){
   $("a").click(function(event){
     alert("Hvala na posjeti!");
   });
 });

Ovom jQuery event (.click) funkcijom postavili smo mali alert na sve linkove unutar naše stranice. Znači kada korisnik klikne na link, iskoči alert prozor s porukom Hvala na posjeti!

Da smo koristili obični inline JavaScript učinili bi to na sljedeći način:

<a href="http://www.kroativ.net" onclick="alert('Hvala na posjeti');">Kroativ web dizajn blog</a>

Znači umjesto jQuery-a i par linija koda morali bi dodati onclick event na svaki link ili pisati cijelu novu skriptu koja bi pronalazila sve linkove, dodavala onclick event na njih, naravno morali bi tu našu skriptu i optimizirati za sve browsere, ukratko zašto bi se mučili?

jQuery ima jako puno gotovih eventa i nećemo ih sada sve ovdje objašnjavati, drugi su to već odavno učinili i dobro su odradili posao. Dodati ćemo još samo objašnjenje za preventDefault() event. Taj nam dodatak omogućuje da zaobiđemo osnovnu funkciju. Na primjer mi ne želimo da korisnik bude preusmjerene na novu lokaciju nakon što klikne na link:

$(document).ready(function(){
   $("a").click(function(event){
     alert("Hvala na posjeti ali nemojte još otići!");
     event.preventDefault();
   });
 });

Dodali smo unutar našeg click eventa dodatak event.preventDefault() koji ograničava osnovnu funkciju, znači otvaranje nove lokacije. U normalnom JavaScriptu bi to napravili sa return false kao u sljedećem primjeru:

<a href="http://www.kroativ.net" onclick="alert('Ajde bok');return false;">Kroativ web dizajn blog</a>

Možda vam se sada to ne čini wow ali vjerujte da je, jer ovdje se radi samo o banalnim primjerima.

Dodavanje i brisanje CSS klasa

jQuery nam omogućava da automatski dodajemo ili brišemo CSS klase, u žargonu on fly. Sve sljedeće primjere moramo dodati unutar $(document).ready(function(){} funkcije koju smo objasnili na početku.

Da bi dodali klasu ili klase elementu koristimo funkciju addClass

Pogledajmo jednostavni primjer za dodavanje klase elementu (naravno, prvo ste napravili tu CSS klasu u svojoj stranici):

$(document).ready(function(){
   $("a").addClass("test");
});

Ova jedna linija koda dodala je automatski svim link elementima klasu test. Naravno to ne izgleda wow, reći će neki pa ja to napravim u CSS-u. Točno, rekli smo već da su ovo banalni primjeri ali recimo zamislite situaciju gdje imate formu za kontakt. Napravite lijepo klasu error koju ćete dodati svakom elementu koji je pogrešno ispunjen. Na taj način možete korisnika obavijestiti o grešci. To je samo jedna moguća situacija gdje bi vam addClass dobro došao.

Funkcija za brisanje klase ide ovako:

$(document).ready(function(){
   $("a").removeClass("test");
});

Vrlo jednostavno, zar ne? Ove funkcije znači dodaju css klase, a kako css dozvoljava više klasa na jednom elementu tako ih i vi možete dodavati više od jedne.

Specijalni efekti s jQuery JavaScript library

Još jedna super mogućnost jQuery-a su gotove funkcije za efekte. Uz par linija koda možete elemente pokazivati, sakrivati, pomicati, fejdati i još mnogo toga. Također ih ima puno i možete ih sve pogledati ovdje. Mi ćemo ovdje proći osnovnu primjenu, a malo kasnije u tutorijalu pokazati ćemo i neki praktični primjer.

U ovom primjeru koristiti ćemo efekt hide koji će dodati animaciju laganog nestajanja svakom linku na stranici.

$(document).ready(function(){
 $("a").click(function(event){
   $(this).hide("slow");
 }); 
});

Zaključak i praktični primjeri

Kroz ovih par primjera mogli ste vidjeti kako jQuery funkcionira. Znači može vam olakšati i ubrzati posao, ne trebate se zamarati s izradom JavaScript-a kompatibilnog sa svim verzijama browsera jer je sve to već učinjeno za vas. Imate hrpu gotovih plug-ina koje možete modificirati ili koristiti kako god želite. Pogledajte izvorni tutorijal prema kojem je ovaj naš rađen, a na dnu stranice vas čeka još hrpa jQuery resursa.

Primjer 1

U našem prvom primjeru dodati ćemo malu ikonu na sve linkove koji vode na druge stranice van naše domene, ova metoda označavanja linkova spada u domenu Progressive Enhancements

$(document).ready(function() {
	$('a').filter(function() {
		return this.hostname && this.hostname !== location.hostname;
	}).addClass('extlink');
});

Prvo smo filtrirali (.filter funkcija) sve linkove čija domena nije ista kao trenutna lokacija. Nakon što smo dobili sve linkove s vanjskim linkom (poveznicom) automatski smo im dodali CSS klasu extlink kao external link.

Ta css klasa nam može izgledati ovako:

.extlink {
  background:url(/slike/extlink.png) top right no-repeat;
  padding: 0 12px 0 0;
  /* padding-right postavite par pixela više od width-a ikone */
}

I dobili smo linkove kao na ovome primjeru.

Primjer 2

U ovome primjeru naučiti ćete kako dinamički izmijeniti svojstva nekog elementa.

$(document).ready(function(){
    $('a.kroativ').toggle(
        // Kliknemo prvi put
        function(){
            $('.kroword').css({
                backgroundColor: '#6dcff6',
                fontWeight: 'bold'
            });
            $(this).text('Sakrij Kroativ');
            return false;
        },
        // Kliknemo drugi put
        function(){
            $('.kroword').css({
                backgroundColor: '#fff',
                fontWeight: 'normal'
            });
            $(this).text('Pokaži Kroativ');
            return false;
        }
     );
});

U ovome primjeru koristiti ćemo efekt toggle kako bi automatski izmijenili css i tekst zadanom elementu. Metoda toggle automatski mijenja stanja, ako je recimo element skriven toggle će ga pokazati i obratno. U našem slučaju napravili smo dvije funckije unutar toggle metode koje se izmjenjuju na klik miša. U ovom našem primjeru aktivator će biti link s CSS klasom kroativ, a mjenjamo svojstva elementu s CSS klasom kroword. jQuery već ima gotove metode za manipulaciju CSS stilovima ili tesktom. Koristiti ćemo .css metodu kako bi dodali i oduzeli CSS atribute, u našem slučaju igramo se s pozadinskom bojom te bojom teksta. Za manipulaciju teksta koristiti ćemo metodu .text.

Kako to u stvarnosti izgleda pogledajte na sljedećem primjeru.

Primjer 3

I za kraj smo ostavili vama možda najzanimljiviji primjer, a to je opadajući menu.

$(document).ready(function () {
    $('img.gumb').click(function () {
	$('ul.menu').slideToggle('medium');
    });
});

U ovom primjeru koristili smo jQuery metodu slideToggle koja nam na jednostavni način omogućava promjenu css atributa vidljivosti (display:none;) uz glatku animaciju širenja/skupljanja po visini. Dodali smo click metodu (opisali smo je na početku tutorijala) slici s CSS klasom gumb i našoj unordered listi linkova s CSS klasom menu i postavljenim css diplay:none dodali smo efekt slideToggle s medium brzinom.

Pogledajmo css za primjer jQuery opadajućeg menua:

#kromenu {
	width: 120px;
	height: 30px;	
	margin: auto;
	position:relative;
}
ul, li {
	margin:0; 
	padding:0; 
	list-style:none;
	border-bottom:1px solid #575757;
}
 
.gumb {
	border:none;
	cursor:pointer;
}
.menu {
	display:none;
	width:250px;
	border: 1px solid #575757;
}
.menu li {
	background-color: #2a2929;
}
.menu li a {
	color:#FFFFFF; 
	text-decoration:none; 
	padding:10px; 
	display:block;
}
.menu li a:hover {
	padding:10px;
	font-weight:bold;
	color: #6dcff6;
	background-color:#000;
}

Ovaj css nije potrebno posebno objašnjavati, css tutorijal smo već napisali. Bitno je samo da layer koji drži sve, u našem slučaju #kroman ima position:relative da naš meni ne bi odlazio ispod sadržaja i definirajte mu veličinu istu kao što je i veličina slike gumba. Klasi .gumb dodamo cursor:pointer jer naša slika nije link te nema kursor pointer. Zadnje i najbitnije je klasa .menu koju dodajemo našoj listi linkova, ona mora imati display:none kako bi meni bio skriven.

Pogledajte još i html za meni:

  <div id="kromenu">
  	<img src="http://www.kroativ.net/slike/button.png" width="120" height="30" class="gumb" />
    <ul class="menu">
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
      <li><a href="#">Link 5</a></li>
    </ul>
  </div>

Znači cijeli sadržaj smo omotali u layer s id-om #kroman, odmah ispod smo uključili našu sliku gumba kojoj smo dodali klasu gumb i ispod nje ide naša lista sa linkovima i klasom .menu

Pogledajte cijeli primjer i slobodno zavirite u source kod jer ćete tako najbolje shvatiti ovaj primjer.

Eto nas i na kraju ovog našeg kratkog uvoda u čari jQuery JavaScript library-a. Nadamo se da smo vam barem malo objasnili upotrebu jQuery-a i naravno, pozivamo vas na ispravke te dopune ovog tutorijala. Donosimo vam par linkova na kojima možete nastaviti učenje ili gdje možete pronaći korisne jQuery resurse.

• Službena jQuery dokumentacija
• Službeni jQuery tutorijali
• jQuery plug-ins
• jQuery UI
• Visual jQuery
• Službeni jQuery blog
• Learning jQuery blog (vanjska ikona)
• NETtuts – 15 resursa za početak s Jquery-em
• 15 days of jQuery
• jQuery za početnike
• jQuery HowTo