LABORATORIJA ZA ELEKTRONSKO POSLOVANJE

jQuery

Sadraj
jQuery......................................................................................................................... 3 Instalacija jQuery-a.....................................................................................................4 jQuery selektori ......................................................................................................... 5 ................................................................................................................................ 12 Ubacivanje efekata u elemente na stranici..............................................................13 Callback funkcija .................................................................................................. 16 Callback funckcija bez argumenata ...................................................................16 Callback funkcija sa argumentima ....................................................................17 Hovertip.................................................................................................................21 Lightbox................................................................................................................ 22 Galerija ................................................................................................................. 24 Plugins za forme....................................................................................................25 Plugin za calendar.................................................................................................25 Plugin za menije....................................................................................................26 Plugin paginator - paginacija sadraja na vie stranica.........................................26 Fancybox...............................................................................................................30 ................................................................................................................................. 30 ................................................................................................................................. 30 Plugin za Drag & Drop funkcionalnost Primer Klizni blok slagalica Puzzle........32 Prevlaenje elemenata .........................................................................................36 Promena veliine nekog elementa........................................................................38 Accordion .............................................................................................................39 Tabovi....................................................................................................................42

jQuery
JQuery je cross-browser JS biblioteka napravljena tako da pojednostavljuje razvoj skriptova klijentske strane (browser, HTML). Prva verzija ove biblioteke je razvijena [Link]. Danas, preko 30% najposeenijih sajtova (Twitter, Facebook koriste mnotvo jQuery efekata) je kreirano primenom jQery biblioteke. Predstavlja najpopularnij JS biblioteku. jQery je open source i dostupan je pod GNU GPL licencom. Osnovna uloga biblioteke se odnosi na olakavanje kretanja kroz dokument, selektovanje DOM elemenata, kreiranje animacija, upravljanje dogaajima i razvoj veb aplikacija. jQuery je moan alat za kreiranje sofitsticiranih efekata na veb stranici. Istovremeno, jQuery prua mogunost razvoja plaginova na osnovu dostupnih funkcionalnosti bibiloteke. Na ovaj nain se stvaraju mone i dinamine veb stranice. jQuery omoguava razliite 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 podeava transparentnost Animate - animacija elementa na veb stranici Itd.

Istovremeno, JQuery omoguava definisanje kada e nabrojani efekti biti izvreni: load: kada se element ili itava veb stranica uitava mouseover: prelazak kursorom mia preko elementa ili dela stranice mouseout: prelazak kursorom mia preko elementa ili dela stranice change: izmena vrednosti odreenog elementa na veb stranci itd.

Instalacija jQuery-a
jQuery se instalira jednostavnim kopiranjem fajla [Link] u odovarajui folder u okviru sajta gde e biti primenjena. Biblioteka se moe downloadovati sa veb adrese [Link] Da bi se jQuery mogao upotrebiti na veb stranici, neophodno je u okviru <head> dela stranice ukljuiti odgovarajui fajl, npr:
<head><script type=text/javascript src=js/[Link]></script></head >

Primer:
<html> <head> <title>Probna stranica</title> <script type=text/javascript src=js/[Link]></script> <script type=text/javascript> $(document).ready(function(){ // ovde ide kod var pContent = $(p).text(); alert (pContent); }); </script> </head> <body> <p>Ovo je neki test.</p> </body> </html>

jQuery se poziva preko oznake $, odnosno $(....), gde se u zagradi navodi element sa kojim se eli neto manipulisati. $(document).ready kada se uita veb stranica u browseru izvri kod koji se nalazi u okviru funkcije. $(p).text(); - U ovom primeru koristi se funkcija text koja ispisuje sadraj HTML elementa tipa p.

jQuery selektori
Selektori slue da pristupimo nekom odreenom 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 <img> koristi se sledea sintaksa: $(img:first), ili poslednjem $(img:last). Pristup elementima odreenog tipa na parnim mestima po rasporedu: $(img:odd) ili na neparnim mestima $(img:even). Elementu odreenog tipa koji se nalazi na treem mestu po redu $(img:eq(2)) ili svim elementima sa koji su po redosledu posle [Link] $(img:gt(4)). Selektovanje elemenata sa odreenim ID $('#idelementa') - obuhvata HTML element sa navedenim ID na stranici Selektovanje elemenat odreene klase $(.nekaClassa) - obuhvata sve HTML elemente navedene klase na stranici Selektovanje elemenata forme $(:input) selektovanje elemenata forme koji slue 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 sadre tekst hrana. Uzima samo one elemente ije je stanje iskljueno, disabled Uzima samo one elemente ije je stanje ukljueno, enabled Uzima samo input elemente tipa file (input[type=file]). Selektuje samo elemente koji sadre najmanje jedan element koji odgovara navedenom selektoru. Selektuje samo elemente koja predstavljaju zaglavlja, na primer: <h1> do <h6>. 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, ukljuujui 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 <option> 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 ukljuenu animaciju.
<!DOCTYPE html> <html>

<head> <style> div { background:yellow; border:1px solid #AAA; width:80px; height:80px; margin:0 5px; float:left; } [Link] { background:green; } </style> <script src="js/[Link]"></script> </head> <body> <button id="pokreniPromenu">Pokrenu promenu</button> <div></div> <div id="pokretljivDiv"></div> <div></div> <script> $("# pokreniPromenu ").click(function(){ $("div:animated").toggleClass("colored"); }); function animateIt() { $("# pokretljivDiv ").slideToggle("slow", animateIt); } animateIt(); </script> </body> </html>

Primer S2: Prikaz broja ekiranih input elemenata.

<!DOCTYPE html> <html> <head> <style> div { color:red; } </style> <script src="js/[Link]"></script> </head> <body> <form> <input type="checkbox" name="godinastudija" checked="checked" value="Brucos" /> <input type="checkbox" name=" godinastudija " value="Druga" /> <input type="checkbox" name=" godinastudija " value="Treca" /> <input type="checkbox" name=" godinastudija " checked="checked" value="Cetvrta" /> <input type="checkbox" name=" godinastudija " value="Apsolvent" /> </form> <div></div> <script> function izbrojiCekiraneElemente () { var n = $("input:checked").length; $("div").text(n + (n <= 1 ? " je" : " su") + " ekiran-a!"); } izbrojiCekiraneElemente (); $(":checkbox").click(izbrojiCekiraneElemente); </script>

</body> </html>

Vie informacija o selektorima kao i o konkretnim primerima moete da saznate na sledeoj adresi: [Link]

Upravljanje dogaajima
Obrada razliitih dogaaja na stranici zahteva dosta JS koda. Istovremeno, neophodno je uzeti u obzir i razlike izmeu browsera. Meutim, zahvaljujui jQuery biblioteci, upravljanje dogaajima zahteva dosta manje koda, kompatibilnost u browserima je unapred obezbeena. Klik na elemenat stranice
<html> <head> <title>Probna stranica</title> <script type=text/javascript src=js/[Link]></script> <script type=text/javascript> $(document).ready(function(){ // ovde ide kod //ukoliko se klikne na div klase clickme izbaci alert $(.clickme).click(function() { alert(Kliknuli ste na dugme.); }); }); </script> </head> <body> <div class=clickme>Uradi neto</div> </body> </html>

Dupli klik na element stranice

<html> <head> <title>Probna stranica</title> <script type=text/javascript src=js/[Link]></script> <script type=text/javascript> $(document).ready(function(){ // ovde ide kod //ukoliko se dvaput klikne na div klase clickme izbaci alert $(.clickme).dbclick(function() { alert(Kliknuli ste na dugme.); }); }); </script> </head> <body> <div class=clickme>Uradi neto, primer sa dupli klik</div> </body> </html>

Fokus
<html> <head> <title>Probna stranica</title> <script type=text/javascript src=js/[Link]></script> <script type=text/javascript> $(document).ready(function(){ // ovde ide kod //ukoliko elemenat sa id poljezaunos dobije fokus izbaci alert $(#poljezaunos).focus(function() { alert(Polje je u fokusu.); }); }); </script> </head> <body> <input type=text id=poljezaunos> </body> </html>

Dogaaji na tastaturi i miem Dogaaj Keydown Keyup Keypress Mousedown Mouseenter Mouseleave Mousemove Mouseout Mouseover Mouseup Hover Primer implenetacije u jQuery
$('#imeprezime').keydown(function(event) { if ([Link] == '13') { alert('Kliknuli ste na enter!'); } }); $('#target').keyup(function() { alert(Primer poziva .keyup() funkcije.'); }); $('#target').keypress(function() { alert('Ovo se deava kada se pritisne taster'); }); $('#target').mousedown(function() { alert(Primer poziva .mousedown() funkcije.'); }); $('#outer').mouseenter(function() { //va kod }); $('#outer').mouseleave(function() { //va kod }); $('#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 dogaaje mouseover i mouseout i ima sintaksu hover(over, out)

Primer dogaaja nad miem

<img src=images/[Link] id=mouseoverme> <div id=outputdiv>This text will change.</div> $(#mouseoverme).hover( function() { $(#outputdiv).text(You moused over the image.); }, function(){ $(#outputdiv).text(You moused out of the image.); } });

Primer dogaaja nad miem 2

<!DOCTYPE html> <html> <head> <style> [Link] { width:40%; height:120px; margin:0 15px; background-color:#D6EDFC; float:left; } [Link] { width:60%; height:60%; background-color:#FFCC00; margin:10px auto; } p { line-height:1em; margin:0; padding:0; } </style> <script src="js/[Link]"></script> </head> <body> <div class="out overout"><p>Pomerite mia</p><div class="in overout"><p>Pomerite mia</p><p>0</p></div><p>0</p></div> <div class="out enterleave"><p> Pomerite mia </p><div class="in enterleave"><p> Pomerite mia </p><p>0</p></div><p>0</p></div> <script> var i = 0; $("[Link]").mouseover(function(){ $("p:first",this).text("mouse over"); $("p:last",this).text(++i); }).mouseout(function(){ $("p:first",this).text("mouse out"); }); var n = 0; $("[Link]").mouseenter(function(){ $("p:first",this).text("mouse enter"); $("p:last",this).text(++n); }).mouseleave(function(){ $("p:first",this).text("mouse leave"); }); </script> </body> </html>

Toggle funkcija - ova funkcija omoguava izvravanje razliitih funkcija svaki put kada se klikne na neki elemenat. Primer Toggle funkcije kada se klikne na stavku liste I promeni se boja slova:
<!DOCTYPE html> <html> <head> <style> ul { margin:10px; list-style:inside circle; font-weight:bold; } li { cursor:pointer; } </style> <script src="js/[Link]"></script> </head> <body> <ul> <li>Idemo na utakmicu</li> <li>Idemo na koncert</li> <li>Idemo na vonju</li> <li>Pokuaj da izabere neto</li> </ul> <script> $("li").toggle( function () { $(this).css({"list-style-type":"disc", "color":"blue"}); //promena stila tekueg elementa }, function () { $(this).css({"list-style-type":"disc", "color":"red"}); //promena stila tekueg elementa }, function () { $(this).css({"list-style-type":"", "color":""}); //promena stila tekueg elementa } ); </script> </body> </html>

Primer Toogle stila kod elije u tabeli.

$("td").toggle( function () { $(this).addClass("selected"); //dodaje se klasa eliji tabele koja je definisana u css-u }, function () { $(this).removeClass("selected"); //brie se klasa eliji tabele koja je definisana u css-u } );

Ubacivanje efekata u elemente na stranici

Sakrivanje i prikazivanje elemenata na stranici (funckija hide() ili show) Primer Efekti1:
<html> <head> <title>Probna stranica</title> <script type=text/javascript src=js/[Link]></script> <script type=text/javascript> $(document).ready(function(){ // ovde ide kod //sakrij div kada se klikne na submit dugme $(:submit).click(function () { $(div).hide(); }); }); </script> </head> <body> <div>Ovo e biti sakriveno.</div> <div> Ovo e biti sakriveno div> <input value=sakrij type=submit></body> </html>

Primer Efekti2:
<html> <head> <title>Probna stranica</title> <script type=text/javascript src=js/[Link]></script> <script type=text/javascript> $(document).ready(function(){ // ovde ide kod //sakrij div sa id hideme kada se klikne na njega $(#hideme).click(function () { $(#hideme).hide(); }); }); </script> </head> <body> <div id=hideme>Ovo e biti sakriveno.</div> <div> Ovo nee biti sakriveno div> <input value=sakrij type=submit></body> </html>

Funkcija hide se moe koristiti i na sledei nain hide(slow), hide(medium) ili hide('fast') element e uz animaciju nestati bre ili sporije. Brzina nestajanja se moe definisati: hide(1000) animacija e trajati 1000ms. Na analogan nain se koristi i funkcija show().

Funkcija toogle se moe koristiti i za podeavanje vidljivosti elemenata. Primer Efekati3:

<html> <head> <title>Probna stranica</title> <script type=text/javascript src=js/[Link]></script> <script type=text/javascript> $(document).ready(function(){ // ovde ide kod //ukoliko je div vidljiv, postaje nevidljiv i obrnuto $(:submit).click(function () { $(div).toggle(); }); }); </script> </head> <body> <div>Ovo e biti sakriveno/prikazano.</div> <input value=sakrij type=submit></body> </html>

Slino funckijama hide i show, u funkciji toggle moe koristiti animaciju (slow, fast). Ubacivanje sliding i fading efekata Efekat sliding se odnosi na izlazak odnosno ulazak stranici. Odgovarajue funkcije su: slideup() i slidedown. Primer fadeIn efekat:
<html> <head> <title>Probna stranica</title> <script type=text/javascript src=js/[Link]></script> <script type=text/javascript> $(document).ready(function(){ // ovde ide kod //div sa slikom polako postaje vidljiv na stranici $(:submit).click(function () { $(div).fadeIn(); }); }); </script> </head> <body> <div style=display:none><img src=slike/[Link] /> </div> <input value=fadein type=submit></body> </html>

odreenog elementa na

Primer slideUp efekat:

<html> <head> <title>Probna stranica</title> <script type=text/javascript src=js/[Link]></script> <script type=text/javascript> $(document).ready(function(){ // ovde ide kod //div e nestati sa stranice tako to e se povlaiti nagore $(:submit).click(function () { $(div).slideUp(); }); }); </script> </head> <body> <div>Ovo e nestati.</div> <input value=sakrij type=submit></body> </html>

Slino kao i u prethodnom poglavlju, moe se podeavati brzina efekata. Odgovarajua toogle funkcija je slideToggle(). Efekat fading omoguava da elemenat postane vidljiv/nevidljiv tako to postepeno postaje vie/manje transparentan. Odgovarajue funkcije su: fadeIn() i fadeOut(). Da bi se mogao primeniti fadein efekat, element mora biti nevidljiv u poetku (display:none). Primer:
<html> <head> <title>Probna stranica</title> <script type=text/javascript src=js/[Link]></script> <script type=text/javascript> $(document).ready(function(){ // ovde ide kod //div sa slikom polako postaje vidljiv na stranici $(:submit).click(function () { $(div).fadeIn(); $(div).fadeTo(slow,0.8); }); }); </script> </head> <body> <div style=display:none><img src=slike/[Link] /> </div> <input value=fadein type=submit></body> </html>

Moe se podeavati brzina efekata, ali i procenat transparentnosti elementa fadeTo(speed, percent)

Animacija elemenata na veb stranici jQuery omoguava animaciju razliitih CSS svojstava elemenata. Ovo se pre svega odnosi na veliinu fonta, visinu i irinu slike ili div elemnta. U stvari, bilo koja numerika vrednost CSS atributa moe se ubaciti u animaciju, tako da jedan HTML elemenat moe da se smanji, uvea, ili prebaci na drugi deo stranice. Primer funckije animate()
<html> <head> <title>Probna stranica</title> <script type=text/javascript src=js/[Link]></script> <script type=text/javascript> $(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 } ); }); }); </script> </head> <body> <div style=width:200px; height:200px; background-color: gray; border:10px>Div sa odgovarajuim stilovima</div> <br /> <input value=Animate type=submit> </html>

Na slian nain se mogu menjati i druge CSS karakteristike, koje se mogu izraziti numeriki. Callback funkcija Callback ili povratni poziv je funkcija koja se prenosi kao argument za neku drugu funkciju I izvrava se nakon izvravanja roditeljske funkcije, odnosno callback funkcija se moe izvrite tek poto se bude izvrila funkcija roditelja. Jo jedna vana stvar, jeste, da se esto zaboravi ispravna sintaksa kako se poziva callback funkcija. Callback funckcija bez argumenata Callback funkcija bez argumenata se poziva na sledei nain: $.get('[Link]', myCallBack); Napomena da drugi parameter predstavlja naziv funkcije ali ne kao string I to samo bez zagrada.

Callback funkcija sa argumentima Moda ete se zapitati ta treba da uradite ako imate argument koje treba da prosledite? Sledi objanjenje ispravnog I pogrenog naina. Greka Ovo predstavlja pogrean nain i nemojte ga koristiti!
$.get('[Link]', myCallBack(param1, param2));

Ispravan nain Problem u predhodnom primeru je da pozivamo callback funkciju pre nego to je ona usvojena kao funkcija. Javascript kao i Jquery u sluajevima poput ovih oekuju 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('[Link]', function(){ myCallBack(param1, param2); });

Paramteri param1 I param2 su ocenjeni kao povratni poziv kada '$.get' dobije web stranicu. Primer korienja callback funkcije kod animacije u jQuery-u:
<!DOCTYPE html> <html> <head> <style> div {position:absolute; background-color:#abc; left:50px; width:90px; height:90px; margin:5px; } </style> <script src="js/[Link]"></script> </head> <body> <button id="left">Pomeri levo</button> <button id="right">Pomeri desno</button> <div class="block"></div> <script> $("#right").click(function(){ $(".block").animate({"left": "+=50px"}, "slow"); }); $("#left").click(function(){ $(".block").animate({"left": "-=50px"}, "slow"); }); </script> </body>

</html>

Upravljanje sadrajem veb stranice

Upravljanje tekstualnim sadrajem Funkcija text()
<html> <head> <title>Probna stranica</title> <script type=text/javascript src=js/[Link]></script> <script type=text/javascript> $(document).ready(function(){ // ovde ide kod //promeni tekst u divu-u $(:submit).click(function () { $(div).text(Novi tekst.) ; }); ;}); </script> </head> <body> <div>Prvobitni tekst </div> <input value=promeni test type=submit></body> </html>

Upravljanje html sadrajem Funckija html() omoguava prikaz/izmenu ne samo tekstualnog sadraja nego itavog HTML-a Upravljanje sadrajem u poljima forme: Funkcija val() - omoguava prikaz/izmenu vrednosti u elemntima za unos na formi Za dodavanje HTML sadraja na postojei HTML elemenat, koriste se funkcije append() i prepand() $(div).append(lopta); - dodaje tekst lopta na kraj sadraja div elementa Za dodavanje HTML sadraja nakon i pre HTML elementa, koriste se funkcije before() i after() Za pomeranje postojeih elemenata u okviru HTML stranice koriste se funkcije insertBefore() i insertafter() Za izmenu sadraja HTML elemenata koristi se funkcija replaceWith() $(p).replaceWith(<div>Novi div umesto paragrafa</div>) ; 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 moe se veoma jednostavno vriti modifikacije nad CSSom, postoje funkcije addClass() i removeClass() koje slue da u tom tenutku dodele nekom elementu neku predhodno definisanu klasu u CSS-u. Pored toga preko jQuery-a moe 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:

<!DOCTYPE html> <html> <head> <style> p { margin: 8px; font-size:16px; } .selected { color:blue; } .highlight { background:yellow; } </style> <script src="js/[Link]"></script> </head> <body> <p>Dobar dan</p> <p>i</p> <p>Dobro vee</p> <script> $("p:last").addClass("selected"); //primer dodavanja $("p:first").removeClass("selected"); //primer brisanja </script> </body> </html>

Primer kad se klikne na div tag, metoda css() vraa vrednost za boju pozadine:
<!DOCTYPE html> <html> <head> <style> div { width:60px; height:60px; margin:5px; float:left; } </style> <script src="js/[Link]"></script> </head> <body> <span id="result">&nbsp;</span> <div style="background-color:blue;"></div> <div style="background-color:rgb(15,99,30);"></div> <div style="background-color:#123456;"></div> <div style="background-color:#f11;"></div> <script> $("div").click(function () { var color = $(this).css("background-color"); $("#result").html("Ovaj DIV tag je <span style='color:" + color + ";'>" + boje + "</span>."); }); </script> </body> </html>

jQuery plugins
jQuery omoguava raznovrsne funkcionalnosti i efekte na veb stranicama. Meutim, veoma esto potrebno je dosta koda i znanja, da bi se sve te funkcionalnosti iskombinovale na odgovarajui nain. jQuery plug-ins su proirenja jQuery biblioteke, koji obezbeuju mone funkcionalnosti. Na veb adresi [Link] se nalazi spisak dostupnih jQuery pluginova. Instalacija plug-ina se svodi na kopiranje odgovarajueg fajla i njegovo ukljuivanje u veb stranicu Hovertip Instalacija: Sa adrese [Link]/p/hovertip/downloads/list downloadovati poslednju verziju plugin-a i kopirati fajlove na odgovarajuu lokaciju:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN" [Link] <html> <head> <title>My Test Page</title> <script type="text/javascript" src="js/[Link]"></script> <script type="text/javascript" src="js/[Link]" ></script> <link rel=StyleSheet href="css/[Link]" TYPE="text/css"> <script type="text/javascript"> $(document).ready(function(){ $('#mylink').hovertip(); }); </script> </head> <body> <a href="" id="mylink">Move your mouse over me</a> <div class="hovertipContent">You are hovering over a link.</div> </body> </html>

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 veu verziju slike.

Danas postoji vei broj razliitih 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 [Link] (npr js folder), a .css fajl bude u folderu css. Iz foldera exmple1 kopirati folder images u folder css na veb server. Slike za prikaz postaviti u okviru foldera slike. Primer
<html> <head> <title>My Test Page</title> <script type="text/javascript" src="js/[Link]"></script> <script type="text/javascript" src="js/[Link]"></script> <link type="text/css" media="screen" rel="stylesheet" href="css/[Link]" /> <script type="text/javascript"> $(document).ready(function(){ $('a').colorbox(); }); </script> </head> <body> <a href="slike/[Link]" title="Naslov slike" >Slika 1</a> </body> </html>

Ukoliko treba prikazati grupu slika promena je samo u <body> delu: <a href="slike/[Link]" title="Naslov slike1" rel=mygroup >Prikaz slika</a> <a href="slike/[Link]" title="Naslov slike2" rel=mygroup ></a> <a href="slike/[Link]" title="Naslov slike3" rel=mygroup ></a>

<a href="slike/[Link]" title="Naslov slike4" rel=mygroup ></a>

Galerija Postoji veliki broj razliitih pluginova za galerije. Jedan od boljih je dostupan na adresi [Link]

<html> <head> <title>My Test Page</title> <script type="text/javascript" src="js/[Link]"></script> <script src="js/[Link]"></script> <script>[Link]('js/themes/[Link]');</script> <script type="text/javascript"> $(document).ready(function(){ $('.slicice').galleria(); }); </script> </head> <body> <div class="images"><img src=" slike/[Link] "><img src=" slike/[Link] "></div> </body> </html>

Plugins za forme Default text primer polja za unos teksta od strane korisnika su popunjena default vrednostima, ali se prazne im korisnik pone sa unosom:
<html> <head> <title>My Test Page</title> <script type="text/javascript" src="js/[Link]"></script> <script src="js/ [Link]"></script> <script type="text/javascript"> $(document).ready(function(){ $(input).clearField(); }); </script> </head> <body> <form> Ime: <input type=text class=hint value=Unesite ime /> <br /> Prezime: <input type=text value= Unesite prezime /> <br /> Komentar: <input type=text value=Komentar /> </form></body> </html>

Postoji mnotvo pluginova za validaciju forme. Jedan od njih se moe nai na adresi: [Link] Plugin za calendar
<html> <head> <title>My Test Page</title> <script type="text/javascript" src="js/[Link]"></script> <script type="text/javascript" src="js/jquery.date_input.js"></script> <link type="text/css" media="screen" rel="stylesheet" href="css/date_input.css" /><script type="text/javascript"> $(document).ready(function(){ $('#datefield').date_input(); }); </script> </head> <body> <input type='text' id='datefield' /> <body> </html>

Primer plugin-a za kalendar Plugin za menije Spisak plugin-ova koji su namenjeni za kreiranje menija moete pronai na adresi: [Link] Jedan od primera koji smo mi izdvojili moete videti na adresi [Link]/projects/accordion.

Plugin paginator - paginacija sadraja na vie stranica Jedan od plugin-ova za paginaciju, moe se nai na adresi [Link]
<html> <head> <title>My Test Page</title> <style type="text/css"> body { margin-left:50px; } .paginator .active { color:#0033CC; border: solid 1px #0000FF; padding:3px 5px; margin:5px; text-decoration:none; } .paginator .inactive { color:#000000; cursor:default; text-decoration:none; border: solid 1px #0000FF; background-color:#00BBFF; padding:3px 5px; margin:5px; }

#example { border:solid 1px #FF66FF; margin: 10px 5px 10px 0; padding: 5px 10px; width: 500px; } </style> <script type="text/javascript" src="js/[Link]"></script> <script type="text/javascript" src="js/[Link]"></script> <script type="text/javascript"> $(document).ready(function(){ itemsPerPage = 4; separator = ''; // To separate paginator's items paginatorPosition = 'bottom'; // where you want the paginator to be. Accepted values are 'top','bottom','both' paginatorStyle = 2; // To define which style of paginator you need. enablePageOfOption = true; // it shows on which are you currently, i.e. Page 3 of 6 , if turned true enableGoToPage = true; // shows a drop down of all pages for go/jump to any page user want to go, if turned true. Useful incase there are large no. of pages enableSelectNoItems = true; // if you want to change items per page on the fly. $("#example").pagination(); }); </script> </head> <body> <div id="example"> <p> Paragarph no. 1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p> <p> Paragarph no. 2 Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p> <p> Paragarph no. 3 Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p> <p> Paragarph no. 4 In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.</p> <p> Paragarph no. 5 Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p> <p> Paragarph no. 6 Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.</p> <p> Paragarph no. 7 Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p> <p> Paragarph no. 8 Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</p> <p> Paragarph no. 9 Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.</p> <p> Paragarph no. 10 Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.</p> <p> Paragarph no. 11 Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien.</p> <p> Paragarph no. 12 Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla.</p> <p> Paragarph no. 13 Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu.</p> <p> Paragarph no. 14 Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris.</p>

<p> Paragarph no. 15 Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum.</p> <p> Paragarph no. 16 Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis.</p> <p> Paragarph no. 17 Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi.</p> <p> Paragarph no. 18 Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor.</p> <p> Paragarph no. 19 Donec posuere vulputate arcu. Phasellus accumsan cursus velit.</p> <p> Paragarph no. 20 Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci.</p> <p> Paragarph no. 21 Phasellus consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque posuere.</p> <p> Paragarph no. 22 Praesent turpis. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis.</p> <p> Paragarph no. 23 Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc.</p> <p> Paragarph no. 24 Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis diam. Pellentesque ut neque.</p> <p> Paragarph no. 25 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium.</p> <p> Paragarph no. 26 Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Aenean viverra rhoncus pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> <p> Paragarph no. 27 Ut non enim eleifend felis pretium feugiat. Vivamus quis mi. Phasellus a est. Phasellus magna. In hac habitasse platea dictumst. Curabitur at lacus ac velit ornare lobortis.</p> <p> Paragarph no. 28 Curabitur a felis in nunc fringilla tristique. Morbi mattis ullamcorper velit. Phasellus gravida semper nisi. Nullam vel sem. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Sed hendrerit.</p> <p> Paragarph no. 29 Morbi ac felis. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Nunc nulla.</p> <p> Paragarph no. 30 Fusce risus nisl, viverra et, tempor et, pretium in, sapien. Donec venenatis vulputate lorem. Morbi nec metus. Phasellus blandit leo ut odio. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem. Sed magna </p> </div> <body> </html>

Primer plugin-a za paganicaiju sadraja

Fancybox Plugin koji slui za fancy prikaz slika, ali i za fancy login forme. Potrebno je downloadovati poslednju verziju plugina sa adrese [Link] i raspakovati fajlove u odgovarajue foldere.

Primer prikaza slike preko Fancybox plugin-a

Primer Fancybox forme za logovanje

Primer koda za fancybox formu:

<html> <head> <title>FancyBox </title> <script type="text/javascript" src="js/[Link]"></script> <script type="text/javascript" src="js/[Link]"></script> <script type="text/javascript" src="js/[Link]"></script> <link rel="stylesheet" type="text/css" href="css/[Link]" media="screen" /> <script type="text/javascript"> $(document).ready(function() { $("a#inline").fancybox({

}); $("[Link]").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(); $.[Link](); return false; } $.[Link](); $.ajax({ type : "POST", cache : false, url : "/data/[Link]", data : $(this).serializeArray(), success: function(data) { $.fancybox(data); } }); return false; }); }); </script> </head> <body> <a id="inline" href="#login_form">Log in</a> <div id="tip5" style="display:none"> <form id="login_form" method="post" action="[Link]"> <p id="login_error">Please, enter data</p> <p> <label for="login_name">Login: </label> <input type="text" id="login_name" name="login_name" size="30" /> </p> <p> <label for="login_pass">Password: </label> <input type="password" id="login_pass" name="login_pass" size="30" /> </p> <p> <input type="submit" value="Login" /> </p> </form> </div> </body> </html>

Plugin za Drag & Drop funkcionalnost Primer Klizni blok slagalica Puzzle Jedan od zanimljivijih primera Drag & Dop funkcionalnosti moemo videti na primeru male Javascript i jQuery igrice Puzzle (Klizni blok slagalica), gde se slika deli na blokove, koji su sluajno postavljeni i cilj je da se ta slika sloi. Plugin moete skinuti sa adrese: [Link]

Primer koda:
<html> <head> <title>Primer Puzzle igrice</title> <script type="text/javascript" src="[Link]"></script> <script src="[Link]"></script> <script type="text/javascript"> $(function() { new Puzzle('#puzzle_holder', '[Link]', 3, 3, 'tl', true); }); </script> </head> <body> Ajmo sad... <div id="puzzle_holder"></div> </body> </html>

jQuery UI
Neki od jQuery plugin-ova su veoma popularni. Zajednica jQuery programera je stvorila posebnu biblioteku na vrhu jQuery biblioteke koja sadri kolekciju dodataka korisnikog interfejsa, kao i interakcije sa elementima i specijalnim efektima. Jquery biblioteka korisnikog interfejsa takoe Vam omoguava da kontroliete izgled plugin-ova, boju slova, pozadinu, veliinu itd. jQuery UI obuhvata sveobuhvatan skup pluginova osnovne interakcije, korisniki interfejs, widget-e kao i vizuelne efekte koje koristi jQuery stil. Svi dodaci su testirani i kompatabilni sa IE 6.0+, Firefox 3+, Safari 3.1+, Opera 9.6+, i Google Chrome pretraivae. jQuery interfejs (jQuery UI) omoguava interakciju sa HTML elementima na novi nain. Na raspolaganju su Vam sledee 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 drite taster mia 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 moe menjati. Promena veliine elemenata tako to se klikne I prevue na uglovima do eljene veliine. Izaberite element u grupi drei pritisnut taster mia I povlaenjem izaberite oko njih. Sortiranje elemenata u listi, tako to ete ih prevui na nove lokacije u listi. Proiruje unutranje jQuery efekte, obuhvata I pretapa ublaavanje. 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 odreeni broj puta, takoe moe da radi i u obrnutom smeru, poevi sa eksplozijom komada kada se pribliava element. Skuplja elemet horizontalno pa zatim vertikalno. Izdvaja najvanije elemente u pozadini u odreenoj boji za prilagoeno trajanje. Pulsira element ka unutra i spolja odreeni broj puta. Element raste ili se smanjuje. Mea element horiontalno I vertikalno odreeni broj puta. Prikazuje element u obliku slajda u i izvan gledita. Prenosi efekat od jednog do drugog elementa.

Pre nego to odluite da koristite jQuery Ui biblioteku,morate prvo izabrati temu, jer tema kontrolie izgled pluginova (npr plugin za calendar, menije, tabove itd.). Tema sadri informacije o izgledu videta, dodataka, ukljuujui I slova koja se koriste, boja kao I okviri koi se koriste za granice. Moete izabrati jedinstven izgled za sve dodatke koje koristite na stranici. Kako bi odmah na poetku Vaeg rada stvorili sliku kako funkcionie i ta prua jQuery UI pogledajte demo primere na adresi [Link] U odeljku demostracije, moete videti u navigacionom meniju ta sve jQuery UI nudi. jQuery UI biblioteka se instalira jednostavnim kopiranjem fajlova I ukljuivanjem datih fajlova na stranama na koje elite da ih koristite. Bibloteku moete skinuti sa adrese [Link] . Na stranici za download moete skinuti kompletnu biblioteku jQuery-a ili pak osnovnu verziju i pojedine komponente koje su Vam potrebne. Elementi koji bi trebalo da budu ukljueni kako bi osnovna biblioteka funkcionisala su:
<link type="text/css" href="css/themename/[Link]" rel="Stylesheet" /> <script type="text/javascript" src="js/[Link]"></script> <script type="text/javascript" src="js/[Link]"></script>

Pored osnovne biblioteke I komponenata potrebno je da skinete i jednu od tema koje prua jQuery UI ili pak moete dizajnirati prilagoenu temu Vaim potrebama. Poslednji korak u pripremi jeste da skinite poslednju stabilnu verziju sa zvaninog sajta. Ovo je veoma vaan korak jer su verzije jQuery UI dizajnirane za specifine verzije jQuery-a. Trenutna verzija jQuery UI 1.8.6 radi sa jQuery 1.3.2+ Temu kao I sve dodatke moete skinuti sa adrese [Link] i imortovati u va projekat. Nakon to ste preuzeli jQuery UI, zip fajl sadri sledee datoteke: /css/ / development-bundle/ /js/ [Link] Ako elite da dizajnirate sopstvenu temu, jQuery je napravio posebnu veoma jednostavnu aplikaciju za tu svrhu. Apliakcija se nalazi na sledeoj adresi [Link]

Spisak plugonova koje podrava 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 Omoguava Omoguava poziciju. Omoguava Omoguava Omoguava da se elementi prevlae sa jedne pozicije na drugoj. da sve DOM elemente spustite na neku odreenu promenu veliine nekog elementa. da selektujete odreeni element. da sotirate DOM elemente.

Omoguava da sadraj grupiete po karticama u obliku harmonike. Omoguava korisnicima da dok kucaju da im se prikau filtrirane informacije. Omoguava obradu dugmeta. Omoguava manipulaciju sa kalendarom. Omoguava prikaz i obradu formi. Omoguava prikaz stanja procesa koji se obrauje. Osnovni horizontalni kliza, ima regulator koji moe da se pomera miem ili tasterima na tasturi. Obino se koristi kada se eliti grupisati sadraj u vie odeljka uz pomo kartica. Omoguava efekat animacije elemenata uz korienje boja. Dodaje i uklanja odreene klase, koristi opciju tranzicije. Dodaje odreene specifine css klase nekom elementu. Uklanja css klase odreenom elementu. Vri promenu css klasa nekog elementa. Dodaje razne efekte DOM elementu. Poboljano u odnosu na jQuery, aizmenino prihvata zadate efekte. Sakriva DOM elemente. Prikazuje DOM elemente.

Prevlaenje elemenata

Draggable (prevlaenje elemenata) funckionalnost, moe se primeniti na svakom DOM elementu. Objekat moete prevui tako to ete kliknuti miem i prevui na mesto gde elite da da stavite. Draggable elementi dobijaju klasu class=ui-draggable, dok za vreme prevlaenja dobija klasu class=ui-draggable-dragging. U tabeli su date neke od opcija koje prua Draggable funkcija, kompletan spisak moete videti na adresi [Link] Opcija disabled addClass es Opis Onemoguava(true) ili omoguava (false) prevlaenje elemenata. Ako se stavi na false, nee biti moguu da se dodaju css klase. Ovo moe biti od koristiti kada elite da uradite optimizaciju kada imate preko stotine elemenata. CSS izgled kursora u toku prevlaenja elementa Primer
$( ".selector" ).draggable({ disabled: true }); $ ( ".selector" ).draggable({ addClasses: false }); $( ".selector" ).draggable({ cursor: 'crosshair' });

cursor

Spisak metoda koje obezbeuje: $( ".selector" ).draggable( "destroy" ) - Vraa elemente na poetno stanje, pre prevlaenja. $( ".selector" ).draggable( "disable" ) - Onemoguava prevlaenje. $( ".selector" ).draggable( "enable" ) - Omoguava prevlaenje. $( ".selector" ).draggable( "option" , optionName , [value] ) - Omoguava da se uzmu I postave opcije za prevlaenje. $( ".selector" ).draggable( "option" , options ) - Omoguava da se postave vie opcija odjednom. $( ".selector" ).draggable( "widget" ) - Vraa .ui-draggable element.
<html> <head> <title>Draggable primer</title> <link type="text/css" href="css/smoothness/[Link]" rel="Stylesheet" /> <script type="text/javascript" src="js/[Link]"></script> <script type="text/javascript" src="js/[Link]"></script> <style> #draggable { width: 150px; height: 150px; padding: 0.5em; } </style> <script> $(function() { $( "#draggable" ).draggable(); }); </script> </head> <body> <div id="draggable" class="ui-widget-content"> <p>Pomeraj po povrsini</p> </div> </body> </html>

Vie informacija kao i dodatne primere i demo skriptove moete videti na adresi [Link] Promena veliine nekog elementa jQuery UI Resizable plugin je primenljiv na sve DOM elemente. Miem je potrebno da doete do ivice elementa i da razvuete do eljene irine i visine. Prilikom kreiranja moete definisati max i min irinu ili visinu, kao i postaviti na vie mesta gde se moe menjati veliina nekog elementa. Sve povratne informacije prihvataju 2 argumenta: originalni pretraiva dogaaja i pripremljen UI objekat. Ovaj dodatak podrava veliki broj opcija, poput podeavanja animacije prilikom promene veliine, podeavanja maksimalne ili minimalne visine i irine, kao i mnogo dodatnih opcija. Spisak opcija kao i demo primere moete videti na adresi: [Link] Plugin UI Resizable obrauje 3 dogaaja: start: ovaj dogaaj pokree opciju za promenu veliine stop: stopira promenu veliine resize: menja veliinu elemenata. Primer:
<html> <head> <title>Promena velicine elemenata</title> <link type="text/css" href="css/smoothness/[Link]" rel="Stylesheet" /> <script type="text/javascript" src="js/[Link]"></script> <script type="text/javascript" src="js/[Link]"></script> <style> #resizable { width: 150px; height: 150px; padding: 0.5em; } #resizable h3 { text-align: center; margin: 0; } </style> <script> $(function() { $( "#resizable" ).resizable(); }); </script> </head> <body> <div id="resizable" class="ui-widget-content"> <h3 class="ui-widget-header">Promeni velicinu elemeta</h3> </div> </body> </html>

Primer prozora kome moe da se menja veliina

Accordion Accordion plugin obezbeuje mogunost da sadraj grupiete po karticama. Omoguava da klikomna zaglavlje proirite ili skupite sadraj kartice. Horiste se h3 tagovi za naslove, tako da se div tagovi koristiti i bez Javascripta.
<div id="accordion"> <h3><a href="#">Prvi naslov</a></h3> <div>Prvi sadrzaj</div> <h3><a href="#">Drugi naslov</a></h3> <div>Drugi sadrzaj</div> </div>

Mogue je oristiti i druge elemente za prikazivanja zaglavlja. Postoje opcje koje to omoguavaju npr. header: '[Link]'. sadraj elementa mora biti uvek pored svog zaglavlja.

Primer:
<html> <head> <title>Modalni Dialog</title>

<link type="text/css" href="css/smoothness/[Link]" rel="Stylesheet" /> <script type="text/javascript" src="js/[Link]"></script> <script type="text/javascript" src="js/[Link]"></script> <script> $(function() { $( "#accordion" ).accordion(); }); </script> </head> <body> <div id="accordion"> <h3><a href="#">Sekcija 1</a></h3> <div> <p> 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. </p> </div> <h3><a href="#">Sekcija 2</a></h3> <div> <p> 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. </p> </div> <h3><a href="#">Sekcija 3</a></h3> <div> <p> 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. </p> <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> </ul> </div> <h3><a href="#">Sekcija 4</a></h3> <div> <p> 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. </p> <p> Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> </div> </div> </body> </html>

Spisak opcija, metoda kao i dogaaje koje obrauje Accordion plugin moete videti na adresi: [Link]

Tabovi Funkcionalnost koja omoguava da svoj sadraj grupiete u logike delove preko kartica odnosno tabova koji su postavljeni horizontalno. Demo primer moete videti na adresi: [Link]

Primer:
<html> <head> <title>Tabovi</title> <meta charset="utf-8"> <link type="text/css" href="css/smoothness/[Link]" rel="Stylesheet" /> <script type="text/javascript" src="js/[Link]"></script> <script type="text/javascript" src="js/[Link]"></script> <script> $(function() { $( "#tabs" ).tabs(); }); </script> </head> <body> <div id="tabs"> <ul> <li><a href="#tabs-1">Fudbal</a></li> <li><a href="#tabs-2">Kosarka</a></li> <li><a href="#tabs-3">Tenis</a></li> </ul> <div id="tabs-1"> <p>Fudbaleri Reala su bez mnogo problema savladali Atletiko rezultatom 2:0 u gradskom derbiju i tako odgovorili na rutinsku pobedu Barselone nad Hetafeom. </p> </div> <div id="tabs-2"> <p>Koarka je zakon!</p> </div> <div id="tabs-3"> <p>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.</p> </div> </div> </body> </html>