KATEDRA ZA ELEKTRONSKO POSLOVANJE

jQuery

Sadržaj jQuery......................................................................................................................... 3 Instalacija jQuery-a..................................................................................................... 4 jQuery selektori.......................................................................................................... 5 Upravljanje događajima.............................................................................................. 8 Ubacivanje efekata u elemente na stranici..............................................................11 Callback funkcija................................................................................................... 14 Callback funckcija bez argumenata....................................................................14 Callback funkcija sa argumentima.....................................................................15 Upravljanje sadržajem veb stranice..........................................................................16 jQuery plugins.......................................................................................................... 18 Hovertip................................................................................................................ 18 Galerija.................................................................................................................. 20 Plugins za forme.................................................................................................... 21 Plugin paginator - paginacija sadržaja na više stranica.........................................22 Spisak plugin-ova koji su namenjeni za kreiranje menija možete pronaći na adresi: .............................................................................................................................. 22 http://plugins.jquery.com/tag/pagination/..............................................................22 Fancybox............................................................................................................... 23 Primer Klizni blok slagalica – Puzzle......................................................................25 jQuery UI.................................................................................................................. 26 Prevlačenje elemenata.......................................................................................... 28 Promena veličine nekog elementa.........................................................................29 Accordion.............................................................................................................. 31 Tabovi.................................................................................................................... 33

jQuery JQuery je cross-browser JS biblioteka napravljena tako da pojednostavljuje razvoj skriptova klijentske strane (browser, HTML). Prva verzija ove biblioteke je razvijena 2006.god. Danas, preko 30% najposećenijih sajtova (Twitter, Facebook koriste mnoštvo jQuery efekata) je kreirano primenom jQuery biblioteke. Predstavlja najpopularnij JS biblioteku. jQuery je open source i dostupan je pod GNU GPL licencom. Osnovna uloga biblioteke se odnosi na olakšavanje kretanja kroz dokument, selektovanje DOM elemenata, kreiranje animacija, upravljanje događajima i razvoj veb aplikacija. jQuery je moćan alat za kreiranje sofitsticiranih efekata na veb stranici.

Istovremeno, jQuery pruža mogućnost razvoja plaginova na osnovu

dostupnih funkcionalnosti bibiloteke. Na ovaj način se stvaraju moćne i dinamične veb stranice. jQuery omogućava različite efekte nad elementima veb stranice:       

Hide - sakriva element na veb stranici Show - prikazuje element na veb stranici, ukolko je bio sakriven SlideDown i SlideUp - pomera element na stranici FadeIn – prikaz uparenih elemenata, gde element dobija postepeno odredjenu vidljivost Fadeout – sakriva uparene elemente i podešava transparentnost Animate - animacija elementa na veb stranici Itd.

Istovremeno, JQuery omogućava definisanje kada će nabrojani efekti biti izvršeni:     

load: kada se element ili čitava veb stranica učitava mouseover: prelazak kursorom miša preko elementa ili dela stranice mouseout: prelazak kursorom miša preko elementa ili dela stranice change: izmena vrednosti određenog elementa na veb stranci itd.

Instalacija jQuery-a jQuery se instalira jednostavnim kopiranjem fajla jquery.js u odovarajući folder u okviru sajta gde će biti primenjena. Biblioteka se može downloadovati sa veb adrese http://jquery.com/. Koristicemo verziju 2. Da bi se jQuery mogao upotrebiti na veb stranici, neophodno je u okviru dela stranice uključiti odgovarajući fajl, npr: <script src="js/jquery.js">

Primer:

<script src="js/jquery.js"> <script> $(document).ready(function(){ // ovde ide kod var pContent = $('p').text(); alert (pContent); });

Ovo je neki test.

jQuery se poziva preko oznake $, odnosno $(....), gde se u zagradi navodi element sa kojim se želi nešto manipulisati. $(document).ready – kada se učita veb stranica u browseru izvrši kod koji se nalazi u okviru funkcije. $('p').text(); - U ovom primeru koristi se funkcija text koja ispisuje sadržaj HTML elementa tipa p.

jQuery selektori Selektori služe da pristupimo nekom određenom objektu ili HTML elementu ili pak grupi elemenata. Selektori za tipove elemenata $('tip HTML elementa') - obuhvata sve HTML elemente navedenog tipa na stranici (npr. ‘img’, ‘a’ i sl.) Ukoliko treba pristupiti prvom elementu na stranici koji je tipa koristi se sledeća sintaksa: $('img:first'), ili poslednjem $('img:last'). Pristup elementima određenog tipa na parnim mestima po rasporedu: $(‘img:odd’) ili na neparnim mestima $('img:even'). Elementu određenog tipa koji se nalazi na trećem mestu po redu $(‘img:eq(2)’) ili svim elementima sa koji su po redosledu posle 5.mesta $('img:gt(4) '). Selektovanje elemenata sa određenim ID $('#idelementa') - obuhvata HTML element sa navedenim ID na stranici Selektovanje elemenat određene klase $('.nekaClassa') - obuhvata sve HTML elemente navedene klase na stranici Selektovanje elemenata forme $(':input') – selektovanje elemenata forme koji služe za unos (text, button, chexkbox i sl.) $(':text') - selektovanje elemenata forme kojima je atribut tip ‘text’ $(':checkbox') - selektovanje elemenata forme kojima je atribut tip ‘checkbox’ $(':radio') - selektovanje elemenata forme kojima je atribut tip ‘radio’ Selektovanje atributa HTML elemenata [attribute]: $('img[height] ') – selektovanje atributa ‘height’ u okviru elemenata ‘img’ [attribute=value]: alert( $(' [class=mojaklasa]') – selektovanje atributa ‘class’ koji imaju vrednosti 'mojaklasa' Selektovanje roditelja i dece

$('div:first-child') – selektuje prvo dete u okviru elementa div $('div:last-child') - selektuje poslednje dete u okviru elementa div

Selektovanje custom jQuery elemenata i CSS selektora Željenom elementu se pristupa preko $(selektor) Selektor :animated :button :checkbox :checked :contains(hrana) :disabled :enabled :file :has(selector) :header :hidden :image :input :not(selector) :parent :password :radio :reset :selected :submit :text :visible

Opis selektora Selektuje sve elemente na kojima je pokrenuta neka animacija. Selektuje samo elemente tipa “button” (input[type=submit], input[type=reset], input[type=button], or button). Selektuje samo checkbox elemente (input[type=checkbox]). Selektuje samo elemente tipa checkbox ili radio čije je stanje checked ✓ Uzima elemente koji sadrže tekst „hrana“. Uzima samo one elemente čije je stanje isključeno, disabled ✓ Uzima samo one elemente čije je stanje uključeno, enabled ✓ Uzima samo input elemente tipa file (input[type=file]). Selektuje samo elemente koji sadrže najmanje jedan element koji odgovara navedenom selektoru. Selektuje samo elemente koja predstavljaju zaglavlja, na primer:

do

. Selektuje samo elemente koji su sakriveni. Selektue samo elemente tipa „image“ (input[type=image]). Selektue samo forma elemente kao što su input, textarea, select, button. Negira navedene selektore. Selektuje samo elemente roditelje, odnosno elemente koji imaju decu, uključujući tekst ali ne i prazne elemente. Selektuje samo password elemente (input[type=password]). Selektuje samo radio elemente (input[type=radio]). Selektuje elemente tipa “reset” (input[type=reset] ili button[type=reset]). Selektuje samo elemente koji su selektovani. Selektuje samo button elemente tipa submit (button[type=submit] or input[type=submit]). Selektuje samo tekstualne elemente (input[type=text]). Selektuje samo elemente koji su vidljivi.

Primer S1: Promena boja pozadine samo elementima koji imaju uključenu animaciju.

<script src="js/jquery.js"> Pokrenu promenu

<script> animateIt(); function animateIt() { $("#pokretljivDiv ").slideToggle("slow", animateIt); } $("#pokreniPromenu ").click(function(){ $("div:animated").toggleClass("colored"); });

Primer S2: Prikaz broja čekiranih input elemenata. <meta charset="UTF-8" /> <script src="js/jquery.js">

<script> function izbrojiCekiraneElemente () { var n = $("input:checked").length; $("div").text(n + (n <= 1 ? " je" : " su") + " čekiran-a!"); } izbrojiCekiraneElemente ();

$(":checkbox").click(izbrojiCekiraneElemente);

Više informacija o selektorima kao i o konkretnim primerima možete da saznate na sledećoj adresi: http://api.jquery.com/category/selectors/

Upravljanje događajima Obrada različitih događaja na stranici zahteva dosta JS koda. Istovremeno, neophodno je uzeti u obzir i razlike između browsera. Međutim, zahvaljujući jQuery biblioteci, upravljanje događajima zahteva dosta manje koda, kompatibilnost u browserima je unapred obezbeđena. Klik na elemenat stranice <meta charset="UTF-8" /> <script src="js/jquery.js"> <script > $(document).ready(function(){ // ovde ide kod //ukoliko se klikne na div klase "clickme" izbaci alert $('.clickme').click(function() { alert('Kliknuli ste na dugme.'); }); });

Dupli klik na element stranice <script src="js/jquery.js"> <script > $(document).ready(function(){ // ovde ide kod //ukoliko se dvaput klikne na div klase "clickme" izbaci alert $('.clickme').dblclick(function() { alert('Kliknuli ste dvaput na dugme. '); });

});

Fokus <script src="js/jquery.js"> <script > $(document).ready(function(){ // ovde ide kod //ukoliko elemenat sa id 'poljezaunos' dobije fokus izbaci alert $('#poljezaunos').focus(function() { alert('Polje je u fokusu.'); }); });

Događaji na tastaturi i mišem Događaj Keydown Keyup Keypress Mousedown Mouseenter Mouseleave

Primer implementacije u jQuery-u $('#imeprezime').keydown(function(event) { if (event.keyCode == '13') { alert('Kliknuli ste na enter!'); } }); $('#target').keyup(function() { alert(Primer poziva .keyup() funkcije.'); }); $('#target').keypress(function() { alert('Ovo se dešava kada se pritisne taster'); }); $('#target').mousedown(function() { alert(Primer poziva .mousedown() funkcije.'); }); $('#outer').mouseenter(function() { //vaš kod }); $('#outer').mouseleave(function() { //vaš kod });

Mousemove Mouseout Mouseover Mouseup Hover

$('#target').mousemove(function(event) { //vaš kod }); $('#outer').mouseout(function() { //vaš kod }); $('#outer').mouseover(function() { //vaš kod }); $('#target').mouseup(function() { //vaš kod }); Funkcija hover u jQuery obuhvata događaje mouseover i mouseout i ima sintaksu hover(over, out)

Primer događaja nad mišem

Ovaj tekst bice promenjen.

<script > $('#mouseoverme').hover( function() { $('#outputdiv').text('Pokazali ste na sliku.'); }, function(){ $('#outputdiv').text('Vise ne pokazujete na sliku.'); } );

Primer događaja nad mišem 2 <meta charset="UTF-8" /> <script src="js/jquery.js">

Pokažite mišem na ovo polje

Pokažite mišem na ovo polje

0

0

Pokažite mišem na ovo polje

Pokažite mišem na ovo polje

0

0

<script> var i = 0; $("div.overout").mouseover(function(){ $("p:first",this).text("Pokazujete na ovo polje"); $("p:last",this).text(++i); }).mouseout(function(){ $("p:first",this).text("Ne pokazujete na ovo polje"); }); var n = 0; $("div.enterleave").mouseenter(function(){ $("p:first",this).text("Pokazujete na ovo polje"); $("p:last",this).text(++n); }).mouseleave(function(){ $("p:first",this).text("Ne pokazujete na ovo polje"); });

Ubacivanje efekata u elemente na stranici Sakrivanje i prikazivanje elemenata na stranici (funckija hide() ili show) Primer Efekti1: <meta charset="UTF-8" /> <script src="js/jquery.js"> <script > $(document).ready(function(){ // ovde ide kod //sakrij div kada se klikne na submit dugme $(':submit').click(function () { $('div').hide(); }); });

Ovo će biti sakriveno.

Ovo će biti sakriveno.

Primer Efekti2:

<meta charset="UTF-8" /> <script src="js/jquery.js"> <script >

$(document).ready(function(){ // ovde ide kod //sakrij div sa id 'hideme' kada se klikne na njega $(':submit').click(function () { $('#hideme').hide(); }); });

Ovo će biti sakriveno.

Ovo neće biti sakriveno

Funkcija hide se može koristiti i na sledeći način hide(‘slow’), hide(‘medium) ili hide('fast') – element će uz animaciju nestati brže ili sporije. Brzina nestajanja se može definisati: hide(1000) – animacija će trajati 1000ms. Na analogan način se koristi i funkcija show().

Funkcija toogle se može koristiti i za podešavanje vidljivosti elemenata. Primer Efekati3: <meta charset="UTF-8" /> <script src="js/jquery.js"> <script > $(document).ready(function(){ // ovde ide kod //ukoliko je div vidljiv, postaje nevidljiv i obrnuto $(':submit').click(function () { $('div').toggle(); }); });

Ovo će biti sakriveno/prikazano.

Slično funckijama hide i show, u funkciji toggle može koristiti animaciju (slow, fast). Ubacivanje sliding i fading efekata Efekat sliding se odnosi na ‘izlazak’ odnosno ‘ulazak’ stranici.

određenog elementa na

Odgovarajuće funkcije su: slideup() i slidedown. Primer fadeIn efekat: <script src="js/jquery.js"> <script > $(document).ready(function(){ // ovde ide kod //div sa slikom polako postaje vidljiv na stranici $(':submit').click(function () { $('div').fadeIn(); }); });

Primer slideUp efekat: <meta charset="UTF-8" /> <script src="js/jquery.js"> <script > $(document).ready(function(){ // ovde ide kod //div će nestati sa stranice tako što će se povlačiti nagore $(':submit').click(function () { $('div').slideUp(); }); });

Ovo ?e nestati.

Slično kao i u prethodnom poglavlju, može se podešavati brzina efekata. Odgovarajuća toogle funkcija je slideToggle(). Efekat fading omogućava da elemenat postane vidljiv/nevidljiv tako što postepeno postaje više/manje transparentan. Odgovarajuće funkcije su: fadeIn() i fadeOut(). Da bi se mogao primeniti fadein efekat, element mora biti nevidljiv u početku (display:none). Primer:

<script src="js/jquery.js"> <script > $(document).ready(function(){ // ovde ide kod //div sa slikom polako postaje vidljiv na stranici $(':submit').click(function () { $('div').fadeIn(); $('div').fadeTo('slow',0.8); }); });

Može se podešavati brzina efekata, ali i procenat transparentnosti elementa fadeTo(speed, percent) Animacija elemenata na veb stranici jQuery omogućava animaciju različitih CSS svojstava elemenata. Ovo se pre svega odnosi na veličinu fonta, visinu i širinu slike ili div elemnta. U stvari, bilo koja numerička vrednost CSS atributa može se ubaciti u animaciju, tako da jedan HTML elemenat može da se smanji, uveća, ili prebaci na drugi deo stranice. Primer funckije animate() <meta charset="UTF-8" /> <script src="js/jquery.js"> <script > $(document).ready(function(){ // ovde ide kod //animacija na elementom div tako da se visina i ¨irina menjaju $(':submit').click(function(){ $('div').animate({ width:'280px', height: '140px' } ); }); });

Div sa odgovaraju? im stilovima

Na sličan način se mogu menjati i druge CSS karakteristike, koje se mogu izraziti numerički. Callback funkcija Callback ili povratni poziv je funkcija koja se prenosi kao argument za neku drugu funkciju i izvršava se nakon izvršavanja roditeljske funkcije, odnosno callback funkcija se može izvršite tek pošto se bude izvršila funkcija roditelja. Još jedna važna stvar, jeste, da se često zaboravi ispravna sintaksa kako se poziva callback funkcija. Callback funckcija bez argumenata Callback funkcija bez argumenata se poziva na sledeći način: $.get('myhtmlpage.html', myCallBack); Napomena da drugi parameter predstavlja naziv funkcije ali ne kao string i to samo bez zagrada. Callback funkcija sa argumentima Možda ćete se zapitati šta treba da uradite ako imate argument koje treba da prosledite? Sledi objašnjenje ispravnog I pogrešnog načina. Greška Ovo predstavlja pogrešan način i nemojte ga koristiti! $.get('myhtmlpage.html', myCallBack(param1, param2)); Ispravan način Problem u predhodnom primeru je da pozivamo callback funkciju pre nego što je ona usvojena kao funkcija. Javascript kao i Jquery u slučajevima poput ovih očekuju pokazivač na fukciju. U nastavku je kreirana anonimna funkcija (samo kao blok naredbi) i registrovana kao callback funkcija. Napomena kako se to koristi 'function(){...}'. Anonimna funkcija radi samo jednu stvar, poziva callback funkciju sa vrednostima param1 i param2. $.get('myhtmlpage.html', function(){ myCallBack(param1, param2); }); Paramteri param1 I param2 su ocenjeni kao povratni poziv kada '$.get' dobije web stranicu.

Primer korišćenja callback funkcije kod animacije u jQuery-u: <meta charset="UTF-8" /> <script src="js/jquery.js"> Pomeri levo Pomeri desno

<script> $("#right").click(function(){ $(".block").animate({"left": "+=50px"}, "slow"); }); $("#left").click(function(){ $(".block").animate({"left": "-=50px"}, "slow"); });

Upravljanje sadržajem veb stranice Upravljanje tekstualnim sadržajem Funkcija text() <script src="js/jquery.js"> <script > $(document).ready(function(){ // ovde ide kod //promeni tekst u divu-u $(':submit').click(function () { $('div').text('Novi tekst.') ; }); ;});

Prvobitni tekst

Upravljanje html sadržajem

Funckija html() – omogućava prikaz/izmenu ne samo tekstualnog sadržaja nego čitavog HTML-a Upravljanje sadržajem u poljima forme:



Funkcija val() - omogućava prikaz/izmenu vrednosti u elementima za unos na formi



Za dodavanje HTML sadržaja na postojeći HTML elemenat, koriste se funkcije append() i prepand() $(‘div’).append(‘lopta); - dodaje tekst ‘lopta’ na kraj sadržaja div elementa



Za dodavanje HTML sadržaja nakon i pre HTML elementa, koriste se funkcije before() i after()



Za pomeranje postojećih elemenata u okviru HTML stranice koriste se funkcije insertBefore() i insertafter()



Za izmenu sadržaja HTML elemenata koristi se funkcija replaceWith() $(“p”).replaceWith(“

Novi div umesto paragrafa

”) ;



Za uklanjanje elementa koristi se funkcija remove() $(“p”).remove() – uklanja sve paragrafe sa stranice i sav kod u okviru njih



Za kopiranje HTML elemenata koristi se funckija clone



Uz pomoć jQuery-a može se veoma jednostavno vršiti modifikacije nad CSSom, postoje funkcije addClass() i removeClass() koje služe da u tom tenutku dodele nekom elementu neku predhodno definisanu klasu u CSS-u. Pored toga preko jQuery-a može se direktno menjati svojstva nekog elementa u CSS-u preko metode $("p ").css(‘naziv_svojstva’,’vrednost_svojstva’).

Primer dodavanja i brisanja css klase nekom elementu: <meta charset="UTF-8" /> <script src="js/jquery.js">

Dobar dan

i

Dobro veče

<script> $("p:first").addClass("selected"); //primer dodavanja $("p:last").removeClass("highlight"); //primer brisanja

Primer kad se klikne na div tag, metoda css() vraća vrednost za boju pozadine: <script src="js/jquery.js">  

<script> $("div").click(function () { var color = $(this).css("background-color"); $("#result").html("Ovaj DIV tag je " + color + "."); });

jQuery plugins jQuery omogućava raznovrsne funkcionalnosti i efekte na veb stranicama. Međutim, veoma često potrebno je dosta koda i znanja, da bi se sve te funkcionalnosti iskombinovale na odgovarajući način. jQuery plug-ins su proširenja jQuery biblioteke, koji obezbeđuju moćne funkcionalnosti. Na veb adresi http://plugins.jquery.com/ se nalazi spisak dostupnih jQuery pluginova. Instalacija plug-ina se svodi na kopiranje odgovarajućeg fajla i njegovo uključivanje u veb stranicu Hovertip Instalacija: Sa adrese code.google.com/p/hovertip/downloads/list downloadovati poslednju verziju plugin-a i kopirati fajlove na odgovarajuću lokaciju: <script src="js/jquery.js"> <script src="js/jquery.hovertip.js" > <script > $(document).ready(function(){ $('#mylink').hovertip(); }); Move your mouse over me

You are hovering over a link.

Primer Hovertip plugina

Lightbox Kada su u pitanju veb stranice termin lightbox se odnosi na efekat nad slikom, takav da kad korisnik klikne na umanjenu verziju slike, otvara se prozor u sredini stranice koji prikazuje veću verziju slike.

Danas postoji veći broj različitih lightbox pluginova, jedan od njih je i colorbox. Nakon downloada, raspakovati fajl, tako da .js fajl bude u istom folderu na veb serveru gde je i jQuery.js (npr js folder), a .css fajl bude u folderu css. Iz foldera example1 kopirati folder images u folder css na veb server. Slike za prikaz postaviti u okviru foldera slike. Primer <script src="js/jquery.js"> <script src="js/jquery.colorbox.js"> <script > $(document).ready(function(){ $('a').colorbox(); }); Slika 1

Ukoliko treba prikazati grupu slika promena je samo u delu: Prikaz slika



Galerija Postoji veliki broj različitih pluginova za galerije. Jedan od boljih je dostupan na adresi http://galleria.aino.se/

U stranicu u koju se želi ubaciti galerija se mora prvo učitati jquery biblioteka, a zatim i galerijin JavaScript fajl, u ovom primeru galleria-1.4.2.min.js. Nakon downloada, potrebno je folder galleria iz arhive prebaciti u root folder. Sve slike koje se žele dodati u galeriju treba dodati pomoću standardnih img tagova u okviru jednog div-a kome ćemo zadati neki poseban ID. Da bi efekat galerije mogao da se primeni na ovaj div, potrebno je još i definisati njegovu visinu i širinu što se može uraditi iz CSS-a. Na kraju treba samo pozvati metode Galleria.loadTheme i Galleria.run kako bi se na željeni div i slike u njemu primenio efekat galerije. Kompletan kod je dat u nastavku: <script src="js/jquery.js"> <script src="galleria/galleria-1.4.2.min.js">

<script> Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js'); Galleria.run('#slicice');

Plugins za forme Provera da li je korisnik uneo podatke u obavezna polja i da li je format nekih unesenih podataka ispravan (npr. e-mail adresa) <script src="js/jquery.js"> <script src="js/jquery.validate.js">

Popunite formu

Ime (obavezno polje, minimalno 2 karaktera)

E-mail (obavezno polje)

Sajt (izborno polje)

Komentar (obavezno polje)

<script> $("#commentForm").validate();

Postoji mnoštvo pluginova za validaciju forme. Jedan od njih se može naći na adresi: http://jqueryvalidation.org/. Potrebno je downloadovati jquery.validate.js. Ovaj fajl možemo modifikovati pa tako npr. možemo pronaći poruku o grešci “This field is required.” i prevesti je na srpski.

Plugin za menije

Superfish plugin za menije Spisak plugin-ova koji su namenjeni za kreiranje menija možete pronaći na adresi: http://plugins.jquery.com/?s=menu Primere koje smo mi izdvojili možete videti na adresama: www.unwrongest.com/projects/accordion http://users.tpg.com.au/j_birch/plugins/superfish/ http://www.outyear.co.uk/smint/ http://www.smartmenus.org/ Plugin paginator - paginacija sadržaja na više stranica Spisak plugin-ova koji su namenjeni za kreiranje menija možete pronaći na adresi: http://plugins.jquery.com/tag/pagination/

Primer koji smo mi izdvojili možete videti na adresi: http://tympanus.net/codrops/2009/11/17/jpaginate-a-fancy-jquery-pagination-plugin/

Primer paginacije Fancybox Plugin koji služi za fancy prikaz slika, ali i za fancy login forme. Potrebno je downloadovati poslednju verziju plugina sa adrese http://fancybox.net i raspakovati fajlove u odgovarajuće foldere.

Primer prikaza slike preko Fancybox plugin-a

Primer Fancybox forme za logovanje Primer koda za fancybox formu: <script src="js/jquery.js"> <script src="js/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"> <script src="js/fancybox/source/jquery.fancybox.js"> <script > $(document).ready(function() {

$("a#inline").fancybox({ }); $("a.group").fancybox({ 'transitionIn' : 'elastic', 'transitionOut' : 'elastic', 'speedIn' : 600, 'speedOut' : 200, 'overlayShow' : false }); $("#login_form").bind("submit", function() { if ($("#login_name").val().length < 1 || $("#login_pass").val().length < 1) { $("#login_error").show(); $.fancybox.resize(); return false; } $.fancybox.showActivity(); $.ajax({ type : "POST", cache : false, url : "/data/login.php", data : $(this).serializeArray(), success: function(data) { $.fancybox(data); } }); return false; }); }); Log in

Please, enter data

Login:

Password:

Primer Klizni blok slagalica – Puzzle

Sa sledećeg linka https://github.com/ptpt/SlidingPuzzle/ downloadovaćemo fajl SlidingPuzzle-master.zip klikom na Download ZIP. Potrebno je da uključimo fajl puzzle.js koji smo downloadovali. Primer koda: <script type="text/javascript" src="js/jquery.js"> <script type="text/javascript" src="js/puzzle.js">

<script> var game = $('#puzzle').puzzle({image: 'url(letnjaskola.png)'}); game.bind('click', function () { this.steps(); }).bind('complete', function () { alert('Bravo!'); }).shuffle();



jQuery UI Neki od jQuery plugin-ova su veoma popularni. Zajednica jQuery programera je stvorila posebnu biblioteku na vrhu jQuery biblioteke koja sadrži kolekciju dodataka korisničkog interfejsa, kao i interakcije sa elementima i specijalnim efektima. Jquery biblioteka korisničkog interfejsa takođe Vam omogućava da kontrolišete izgled plugin-ova, boju slova, pozadinu, veličinu itd. jQuery UI obuhvata sveobuhvatan skup pluginova osnovne interakcije, korisnički interfejs, widget-e kao i vizuelne efekte koje koristi jQuery stil. jQuery interfejs (jQuery UI) omogućava interakciju sa HTML elementima na novi način. Na raspolaganju su Vam sledeće interakcije: Interakcija ✓ Dragging ✓ Dropping ✓ Resizing ✓ Selecting ✓ Sorting ✓ Effects Core ✓ Blind ✓ Bounce ✓ Clip ✓ Drop ✓ Explode ✓ Fold ✓ Highlight ✓ ✓ ✓ ✓ ✓

Pulsate Scale Shake Slide Transfer

Opis interakcije Kliknite na element I držite taster miša da biste prevukli element po stranici ili unutar nekog drugog elementa na stranici. Prevucite I ostavite element na željeni element. Mesto gde se želi spustiti element se može menjati. Promena veličine elemenata tako što se klikne I prevuče na uglovima do željene veličine. Izaberite element u grupi držeći pritisnut taster miša I povlačenjem izaberite oko njih. Sortiranje elemenata u listi, tako što ćete ih prevući na nove lokacije u listi. Proširuje unutrašnje jQuery efekte, obuhvata I pretapa ublažavanje. Kreira valjak slepe animacije na elementu, tako što se element otvori ili zatvori od donje ivice nekog elementa. Odskakanje elemenata horizontalno ili vertikalno navedeni broj puta. Istovremeno otvaranje I zatvaranje elemenata sa dna I vrha. Pomera element I jednom pravcu I istovremeno ga krije. Pauzira element na određeni broj puta, takođe može da radi i u obrnutom smeru, počevši sa eksplozijom komada kada se približava element. Skuplja elemet horizontalno pa zatim vertikalno. Izdvaja najvažnije elemente u pozadini u određenoj boji za prilagođeno trajanje. Pulsira element ka unutra i spolja određeni broj puta. Element raste ili se smanjuje. Meša element horiontalno I vertikalno određeni broj puta. Prikazuje element u obliku slajda u i izvan gledišta. Prenosi efekat od jednog do drugog elementa.

Pre nego što odlučite da koristite jQuery Ui biblioteku,morate prvo izabrati temu, jer tema kontroliše izgled pluginova (npr plugin za calendar, menije, tabove itd.). Tema sadrži informacije o izgledu vidžeta, dodataka, uključujući I slova koja se koriste, boja kao I okviri koi se koriste za granice. Možete izabrati jedinstven izgled za sve dodatke koje koristite na stranici. Kako bi odmah na početku Vašeg rada stvorili sliku kako funkcioniše i šta pruža jQuery UI pogledajte demo primere na adresi http://jqueryui.com/demos/. U odeljku demostracije, možete videti u navigacionom meniju šta sve jQuery UI nudi. jQuery UI biblioteka se instalira jednostavnim kopiranjem fajlova I uključivanjem datih fajlova na stranama na koje želite da ih koristite. Bibloteku možete skinuti sa adrese http://jqueryui.com/ . Na stranici za download možete skinuti kompletnu biblioteku jQuery-a ili pak osnovnu verziju i pojedine komponente koje su Vam potrebne. Elementi koji bi trebalo da budu uključeni kako bi osnovna biblioteka funkcionisala su: <script src="js/jquery.js"> <script src="js/jquery-ui-1.11.2.custom/jquery-ui.js">

Pored osnovne biblioteke I komponenata potrebno je da skinete i jednu od tema koje pruža jQuery UI ili pak možete dizajnirati prilagođenu temu Vašim potrebama. Poslednji korak u pripremi jeste da skinite poslednju stabilnu verziju sa zvaničnog sajta. Ovo je veoma važan korak jer su verzije jQuery UI dizajnirane za specifične verzije jQuery-a. Trenutna verzija jQuery UI 1.11.2 radi sa jQuery 1.6+ Temu kao I sve dodatke možete skinuti sa adrese http://jqueryui.com/download i importovati u vaš projekat. Nakon što ste preuzeli jQuery UI, zip fajl sadrži sledeće datoteke:  /css/  / development-bundle/  /js/  Index.html Ako želite da dizajnirate sopstvenu temu, jQuery je napravio posebnu veoma jednostavnu aplikaciju za tu svrhu. Apliakcija se nalazi na sledećoj adresi www.emeRoller.com

Spisak plugonova koje podržava jQuery UI: Plugin Interactions Draggable Droppable Resizable Selectable Sortable Widgets Accordion Autocomplete Button Datepicker Dialog Progressbar Slider Tabs Effects Color animation Toggle class Add class Remove class Switch class Effect Toggle Hide Show

Opis Omogućava Omogućava poziciju. Omogućava Omogućava Omogućava

da se elementi prevlače sa jedne pozicije na drugoj. da sve DOM elemente spustite na neku određenu promenu veličine nekog elementa. da selektujete određeni element. da sotirate DOM elemente.

Omogućava da sadržaj grupišete po karticama u obliku harmonike. Omogućava korisnicima da dok kucaju da im se prikažu filtrirane informacije. Omogućava obradu dugmeta. Omogućava manipulaciju sa kalendarom. Omogućava prikaz i obradu formi. Omogućava prikaz stanja procesa koji se obrađuje. Osnovni horizontalni klizač, ima regulator koji može da se pomera mišem ili tasterima na tasturi. Obično se koristi kada se želiti grupisati sadržaj u više odeljka uz pomoć kartica. Omogućava efekat animacije elemenata uz korišćenje boja. Dodaje i uklanja određene klase, koristi opciju tranzicije. Dodaje određene specifične css klase nekom elementu. Uklanja css klase određenom elementu. Vrši promenu css klasa nekog elementa. Dodaje razne efekte DOM elementu. Poboljšano u odnosu na jQuery, aizmenično prihvata zadate efekte. Sakriva DOM elemente. Prikazuje DOM elemente.

Prevlačenje elemenata Draggable (prevlačenje elemenata) funckionalnost, može se primeniti na svakom DOM elementu. Objekat možete prevuči tako što ćete kliknuti mišem i prevući na mesto gde želite da da stavite. Draggable elementi dobijaju klasu class=“ui-draggable”, dok za vreme prevlačenja dobija klasu class=”ui-draggable-dragging”. U tabeli su date neke od opcija koje pruža Draggable funkcija, kompletan spisak možete videti na adresi http://jqueryui.com/demos/draggable/#options Opcija

Opis

Primer

disabled addClass es

cursor

Onemogućava(true) ili omogućava (false) prevlačenje elemenata. Ako se stavi na false, neće biti moguu da se dodaju css klase. Ovo može biti od koristiti kada želite da uradite optimizaciju kada imate preko stotine elemenata. CSS izgled kursora u toku prevlačenja elementa

$( ".selector" ).draggable({ disabled: true }); $ ( ".selector" ).draggable({ addClasses: false }); $( ".selector" ).draggable({ cursor: 'crosshair' });

Spisak metoda koje obezbeđuje:  $( ".selector" ).draggable( "destroy" ) - Vraća elemente na početno stanje, pre prevlačenja.  $( ".selector" ).draggable( "disable" ) - Onemogućava prevlačenje.  $( ".selector" ).draggable( "enable" ) - Omogućava prevlačenje.  $( ".selector" ).draggable( "option" , optionName , [value] ) - Omogućava da se uzmu I postave opcije za prevlačenje.  $( ".selector" ).draggable( "option" , options ) - Omogućava da se postave više opcija odjednom.  $( ".selector" ).draggable( "widget" ) - Vraća .ui-draggable element. <script src="js/jquery.js"> <script src="js/jquery-ui-1.11.2.custom/jquery-ui.js"> <script> $(function() { $( "#draggable" ).draggable(); });

Pomeraj po povrsini

Više informacija kao i dodatne primere i demo skriptove možete videti na adresi http://jqueryui.com/demos/draggable/ Promena veličine nekog elementa jQuery UI Resizable plugin je primenljiv na sve DOM elemente. Mišem je potrebno da dođete do ivice elementa i da razvučete do željene širine i visine. Prilikom kreiranja možete definisati max i min širinu ili visinu, kao i postaviti na više mesta gde se može menjati veličina nekog elementa.

Sve povratne informacije prihvataju 2 argumenta: originalni pretraživač događaja i pripremljen UI objekat. Ovaj dodatak podržava veliki broj opcija, poput podešavanja animacije prilikom promene veličine, podešavanja maksimalne ili minimalne visine i širine, kao i mnogo dodatnih opcija. Spisak opcija kao i demo primere možete videti na adresi: http://jqueryui.com/demos/resizable/. Plugin UI Resizable obrađuje 3 događaja:  start: ovaj događaj pokreće opciju za promenu veličine  stop: stopira promenu veličine  resize: menja veličinu elemenata. Primer: <meta charset="UTF-8" /> <script src="js/jquery.js"> <script src="js/jquery-ui-1.11.2.custom/jquery-ui.js"> <script> $(function() { $( "#resizable" ).resizable(); });

Promeni veličinu elemeta

Primer prozora kome može da se menja veličina

Accordion Accordion plugin obezbeđuje mogućnost da sadržaj grupišete po karticama. Omogućava da klikomna zaglavlje proširite ili skupite sadržaj kartice. Horiste se h3 tagovi za naslove, tako da se div tagovi koristiti i bez Javascripta.

Prvi naslov

Prvi sadrzaj

Drugi naslov

Drugi sadrzaj

Moguće je oristiti i druge elemente za prikazivanja zaglavlja. Postoje opcje koje to omogućavaju npr. header: 'a.header'. sadržaj elementa mora biti uvek pored svog zaglavlja.

Primer: <script src="js/jquery.js"> <script src="js/jquery-ui-1.11.2.custom/jquery-ui.js">

<script> $(function() { $( "#accordion" ).accordion(); });

Sekcija 1

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

Sekcija 2

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.

Sekcija 3

Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.

• List item one
• List item two
• List item three

Sekcija 4

Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Spisak opcija, metoda kao i događaje koje obrađuje Accordion plugin možete videti na adresi: http://jqueryui.com/demos/accordion/.

Tabovi Funkcionalnost koja omogućava da svoj sadržaj grupišete u logičke delove preko kartica odnosno tabova koji su postavljeni horizontalno. Demo primer možete videti na adresi: http://jqueryui.com/demos/tabs/.

Primer: <meta charset="UTF-8" /> <script src="js/jquery.js"> <script src="js/jquery-ui-1.11.2.custom/jquery-ui.js"> <script> $(function() { $( "#tabs" ).tabs(); });

• Fudbal
• Kosarka
• Tenis

Fudbaleri Reala su bez mnogo problema savladali Atletiko rezultatom 2:0 u gradskom derbiju i tako odgovorili na rutinsku pobedu Barselone nad Hetafeom.

Košarka je zakon!

Teniserka Srbije Ana Ivanović pobedila je u finalu Balija Ruskinju Alisu Klejbanovu 6:2 i 7:6 i tako posle Linca osvojila još jedan turnir. Ana će posle desete jubilarne titule od ponedeljka biti 17. teniserka sveta.