14 korisnih jQuery snippet-a za web developere

jQuery je jedna od najkorišćenijih biblioteka, DOM manipulaciju čini lakom i brzom. Razlog za veliku popularnost jQuery-ja je njegova jednostavnost. Gotovo da možemo da uradimo šta god poželimo pomoću ove moćne biblioteke. Pored svih otvorenih mogućnosti koje pruža jQuery, nekim snipetima se često vraćamo. Predstavljamo vam 14 jQuery snippet-a koji su korisni za svakog, od početnika do naprednijih developera.

1) Dugme za povratak na vrh

[code]

// Povratak na vrh

$(‘a.top’).click(function () {
$(document.body).animate({scrollTop : 0},800);
return false;
});

// HTML link za povratak na vrh

<a class=”top” href=”#”>Povratak na vrh</a>

[/code]

Kao što vidite korišćenjem animate i scrollTop funkcije u jQery nije nam potreban plugin za jednostavnu animaciju za povratak na vrh stranice.
Menjanjem vrednosti scrollTop funkcije možemo odrediti gde želimo da se zaustavi stranica, u ovom slu;aju koristili smo vrednost 0 zato želimo da ode skroz na vrh stranice, ukoliko želite na primer da se vrati na 100px od vrha stranice, jednostavno ukucate umesto nule 100px u funkciji.
Dakle ono što se zapravo dešava primenom ovog koda je animacija dokumenta da se kroz 800ms vrati na vrh stranice.

2) Proveravanje da li su slike učitane

[code]

$(‘img’).load(function() {
console.log(‘image load successful’);
});

[/code]

Ponekad želite da proverite da li su slike na stranici u potpunosti očitane kako biste mogli da nastavite sa daljim skriptama, pomoću ove tri linije jQurey-ja to lako možete proveriti.
Takođe možete proveriti jednu sliku pojedinačno tako što zamenite img tag sa ID ili klasom.

3) Dodavanje klase na hover

[code]

$(‘.btn’).hover(function() {
$(this).addClass(‘hover’);
}, function() {
$(this).removeClass(‘hover’);
}
);
[/code]

Obično želimo da je promenljiv izgled elementa koji imaju funkciju kada korisnik pređe pokazivačem preko njih. Ovaj jQuery snipet radi upravo to, dodaje klasu element dok je pokazivač miša na njemu, čim korisnik pomeri miš sa tog elementa klasa nestaje, dakle sve što je potrebno je da dodate stilove u vaš CSS fajl.

4) Isključivanje polja za unos podataka

[code]
$(‘input[type=“submit“]’).attr(„disabled“, true);
[/code]

Ukoliko želite da dugme za potvrdu ili polja za unos podataka bude isključeno dok korisnik ne izvede određenu akciju prethodno (npr. Čekira “Pročitao sam uslove korišćenja”) ova linija koda omogućuje to. Dodaje atribut disabled na polja tako da ih možete uključiti kada želite.
Da biste uradili to potrebno je pokrenuti removeAttr funkciju na polju koje ima disabled parametar.

[code]
$(‘input[type=“submit“]’).removeAttr(„disabled”);
[/code]

5) Toggle fade/slide

[code]
// Fade
$( “.btn“ ).click(function() {
$( “.element“ ).fadeToggle(„slow“);
});
// Toggle
$( “.btn“ ).click(function() {
$( “.element“ ).slideToggle(„slow“);
});
[/code]

Slide i Fade je nešto što se često koristi za animacije u jQuery, ukoliko želimo da se neki element prikaže kada kliknemo na nešto za to je fadeIn i slideDown idealna metoda, ali ukoliko želimo da se taj element pojavljuje na prvi klik i nestaje na drugi klik, ovaj kod će raditi posao.

6) Jednostavni accordion

[code]
// Zatvaranje svih panela
&nbsp;
$(‘#accordion’).find(‘.content’).hide();
// Accordion
$(‘#accordion’).find(‘.accordion-header’).click(function(){
var next = $(this).next();
next.slideToggle(‘fast’);
$(‘.content’).not(next).slideUp(‘fast’);
return false;
});
[/code]

Dodavanjem ove skripte sve što treba uraditi je dodavanje neophodnog HTML koda koji će omogućiti da ovaj accordion funkcioniše.
Kao što vidite u ovom kodu prvo su svi paneli zatvoreni i onda se klikom sadržaj koji je povezan sa header-om prikazuje, a ostali se zatvaraju.

7) Izjednačavanje visine dva div-a

[code]
$(‘.div’).css(‘min-height’, $(‘.main-div’).height());
[/code]

Ukoliko želite da dva div-a imaju istu visinu bez obzira kakav je sadržaj u njima, ova linija koda omogućuje upravo to. U ovom slučaju postavlja se min-height što znači da može biti veći od glavnog div-a ali nikako manji. Ovo je odlično za masonry sajtove.

8) „Zebra“ lista

[code]
$(‘li:odd’).css(‘background’, ‘#E8E8E8’);
[/code]

Sa ovom linijom koda možete lako kreirati “zebra” liste, ovo postavlja definisanu boju pozadine za svaki neparan element liste. Ovaj kod je primenjiv za svaki element od table do div.

9) Učitavanje spoljašnjeg sadržaja

[code]
$(„#content“).load(„somefile.html“, function(response, status, xhr) {
// error handling
if(status == „error“) {
$(„#content“).html(„An error occured: “ + xhr.status + “ “ + xhr.statusText);
}
});
[/code]

Želite da dodate sadržaj san neke druge stranice u div? Ovo je prilično lako sa jQuery.

10) Postavljanje div-a na celu širinu/visinu

[code]
// globalne promenljive
var winWidth = $(window).width();
var winHeight = $(window).height();

// postavljanje inicijalne visine i širine div-a
$(‘div’).css({
‘width’: winWidth,
‘height’: winHeight,
});

// širina i visina div-a prilikom resize-ovanja prozora
$(window).resize(function() {
$(‘div’).css({
‘width’: winWidth,
‘height’: winHeight,
});
});
[/code]

Ovaj kod je idealan za modal prozore ili popup-ove

11) Automatsko učitavanje sadržaja prilikom scroll-ovanja

[code]
var loading = false;
$(window).scroll(function() {
if((($(window).scrollTop()+$(window).height())+250)&gt;=$(document).height()) {
if(loading == false) {
loading = true;
$(‘#loadingbar’).css(„display“,“block“);
$.get(„load.php?start=“+$(‘#loaded_max’).val(), function(loaded) {
$(‘body’).append(loaded);
$(‘#loaded_max’).val(parseInt($(‘#loaded_max’).val())+50);
$(‘#loadingbar’).css(„display“,“none“);
loading = false;
});
}
}
});

$(document).ready(function() {
$(‘#loaded_max’).val(50);
});
[/code]

Neki web sajtovi kao što su Twitter ili Facebook učitavaju sadržaj dok scroll-ujete. Što znači da se sav sadržaj dinamički učitava dokle god scroll-ujete.

12) Abecedno sortiranje liste

[code]
$(function() {
$.fn.sortList = function() {
var mylist = $(this);
var listitems = $(‘li’, mylist).get();
listitems.sort(function(a, b) {
var compA = $(a).text().toUpperCase();
var compB = $(b).text().toUpperCase();
return (compA &lt; compB) ? -1 : 1;
});
$.each(listitems, function(i, itm) {
mylist.append(itm);
});
}

$(„ul#demoOne“).sortList();

});
[/code]

U nekim slučajevima može biti veoma korisno da se soritra dugačka lista. Ovaj kod omogućuje da se lista sortira po abecednom redosledu.

13) Dodavanje HTML-a

[code]
var sometext = „here is more HTML“;
$(„p#text1“).append(sometext); // added after
$(„p#text1“).prepend(sometext); // added before
[/code]

Korišćenjem metode .append() lako možemo dodati HTML kod direktno u DOM. Možete dodati novi HTML kod definisan u promenljivoj ili klonirati već postojeći HTML sa stranice.

14) Otvaranje spoljašnjih linkova u novim tab-ovima

[code]
$(‘a’).each(function() {
var a = new RegExp(‘/’ + window.location.host + ‘/’);
if(!a.test(this.href)) {
$(this).click(function(event) {
event.preventDefault();
event.stopPropagation();
window.open(this.href, ‘_blank’);
});
}
});
[/code]

Atribut target=”_blank” omogućuje da se linkovi otvaraju u novim tabovima. Preporučljivo je da se spoljašnji linkovi otvaraju u novim tabovima, dok unutrašnji linkovi trebaju da se otvaraju u istom prozoru.
Ovaj kod detektuje da li je link spoljašnji, ako jeste dodaje mu atribut target=”_blank”.