1

Vježba 4: jQuery vježbe

1. Skinite arhiviranu datoteku jQueryVjezbe.zip sa stranice Kolegiji, te je raspakirajte u vašu mapu na

D disku.

2. Pokrenite Visual Studio 2012, odaberite File/Open/Web site… i otvorite navedenu mapu.

3. Nakon toga pritisnite Ctrl+Shift+A, odaberite HTML Page i pod Name upišite mojastranica (Bez

razmaka !!).

4. U Visual studio-u biste trebali dobiti sljedeće:

5. U html tagu obrišite xmlns="http://www.w3.org/1999/xhtml" i stavite lang=“hr“, te encoding –

UTF-8.

6. U tagu title stavite Moja stranica – {Vaše ime i prezime} (Na primjer: Moja stranica – Saša Mitrović).

7. Nakon toga u body-u stranice treba dodati div s id-em container.

2

8. Division s id-em container treba sadržavati sljedeće HTML elemente:

a. h1 – Jednostavni slider s jQueryem

b. p – Klikom na button sa strelicom dolje mijenjamo slike

c. div

i. id – gallery

d. div

i. id – thumbs

e. a

i. href - #

ii. id – next

9. U div s id-em gallery treba dodati 6 img tagova koji vode do slika 1,2,3,4,5,6 u img folderu.

3

10. U div s id-em thums treba dodati 6 img tagova koji vode do ikona 11,22,33,44,55,66 u img folderu.

4

11. Izgled napravljene html stranice:

12. Nakon što je već datoteka pripremljena, treba pozvati već napravljenu CSS datoteku za stranicu, te

jQuery library.

13. Kreiranu css datoteku potrebno je pomoću link taga u head dijelu html stranice pozvati.

5

14. Nakon toga, potrebno je i u mojastranica.html datoteci pozvati (slično kako se je pozivala i css

datoteka) jQuery library.

15. U head dijelu, ispod pozvanja css datoteke, mojastranicaFirst.html treba napraviti tag script.

16. Unutar početnog taga script treba dodati dva atributa:

a. type - text/javascript

b. src – jquery.js

6

Slider

17. Nakon toga treba pritisnuti Ctrl+Shift+A, odabrati JavaScript File i pod Name upisati slider (Bez

razmaka !!).

18. Povucite napravljenu slider.js datoteku u folder js.

19. Nakon što je napravljena JavaScript datoteka, potrebno ju je u mojastranica.html datoteci pozvati.

20. Nakon pozivanja vanjske js datoteke, treba otvoriti slider.js datoteku.

21. U js datoteci napravite funkciju koja se izvršava kada se html stranica učita.

22. Zatim treba učitati slike iz div-ova gallery i thumbs u zasebne varijable.

7

23. Nakon toga će se definirati varijabla index koja će biti potrebna kod prikazivanja slika.

24. Za svaku sliku u varijabli images i ikonu u varijabli thumbs dodati će se klasa i broj. To će se učiniti

pomoću for petlje.

25. Dodavanje klase i broja u for petlji:

8

26. Zatim će se napraviti funkcija show koja će primati kao parametar varijablu index.

27. Napravljena metoda show pomoću komentara:

9

28. Sada treba napraviti metodu koja će metodu koja će povećavati/resertirati index i nakon toga

pozivati prethodno napravljenu metodu show

10

29. U shift metodi treba napraviti if…else uvjet koji će vršiti provjere i postavljanje indexa, te treba

pozvati metodu shift.

30. Pošto na slideru postoji i strelica (vidljivo na slici) na koju korisnik može kliknuti, stoga je potrebno

metodu shift pozvati i kada korisnik klikne na strelicu. Prethodno navedeno će se učiniti stvaranjem

click eventa.

31. Zatim je potrebno stvoriti jednu virtualnu infinite petlju ikonica s desne strane kako one nikada ne

bi došle do kraja, već se stalno vrtile u krug.

11

32. Također, pošto je to slider, slike se same trebaju mijenjati u određenom intervalu. U ovom slučaju

postaviti ćemo 8 sekundi (odnosno 8000 ms)

33. Za kraj treba pozvati metodu show koja će prikazati sliku s indexom 0 nakon što se stranica učita.

12

34. Cijeli kod:

13

14

Animation EFOS

1. U Visual Studio-u 2012, odaberite File/Close Solution kako biste zatvorili Slider web site na kojemu

ste prethodno radili (Nemojte zaboraviti snimiti sve datoteke prije zatvaranja!!).

2. Pokrenite Visual Studio 2012, odaberite File/Open/Web site… i otvorite navedenu mapu.

3. Nakon toga pritisnite Ctrl+Shift+A, odaberite HTML Page i pod Name upišite mojastranica (Bez

razmaka !!).

4. U Visual studio-u biste trebali dobiti sljedeće:

5. U html tagu obrišite xmlns="http://www.w3.org/1999/xhtml" i stavite lang=“hr“, te encoding –

UTF-8.

6. U tagu title stavite Moja stranica – {Vaše ime i prezime} (Na primjer: Moja stranica – Saša Mitrović).

15

7. U head dijelu pozovite Content/bootstrap.min.css CSS datoteku i Scripts/jquery-2.0.3.js jQuery

library.

8. Nakon toga napravite style tag u head dijelu.

9. U style tagu će se dodati za img element CSS svojstvo position absolute.

16

10. U body dijelu treba dodati sljedeće elemente:

a. input

i. id – stopButton

ii. type - button

iii. class - btn

iv. value – stop

b. p

c. img

i. id - img

ii. src - Content/images/efos-header-logo.png

d. script

11. U script dijelu će se dodati sljedeće jQuery metode:

a. hide

b. show

c. animate

d. delay

e. animate

f. click event na input type button

17

12. Cijela HTML stranica izgleda ovako:

18

Button

1. U Visual Studio-u 2012, odaberite File/Close Solution kako biste zatvorili AnimationEFOS web site

na kojemu ste prethodno radili (Nemojte zaboraviti snimiti sve datoteke prije zatvaranja!!).

2. Pokrenite Visual Studio 2012, odaberite File/Open/Web site… i otvorite navedenu mapu.

3. Nakon toga pritisnite Ctrl+Shift+A, odaberite HTML Page i pod Name upišite mojastranica (Bez

razmaka !!).

4. U Visual studio-u biste trebali dobiti sljedeće:

5. U html tagu obrišite xmlns="http://www.w3.org/1999/xhtml" i stavite lang=“hr“, te encoding –

UTF-8.

6. U tagu title stavite Moja stranica – {Vaše ime i prezime} (Na primjer: Moja stranica – Saša Mitrović).

19

7. Nakon toga treba pritisnuti Ctrl+Shift+A, odabrati JavaScript File i pod Name upisati button (Bez

razmaka !!).

8. Nakon što je napravljena JavaScript datoteka, potrebno je sljedeće datoteke pozvati u head dijelu:

a. CSS:

i. Content/font-awesome.min.css

ii. button.css

b. JS:

i. Scripts/jquery-2.0.3.min.js

ii. Scripts/jquery.easing.1.3.js

iii. button.js

9. U head dijelu treba dodati sljedeće elemente:

a. div

i. id – btn

b. script

20

10. U div s id-em treba dodati sljedeće elemente:

a. i

i. class - icon-shopping-cart icon-large

b. span – Kupi!

11. U script tagu treba pozvati metodu BuyNowButton, koja se nalazi u RDWA namespace-u, te joj

predati dva parametra:

a. id btn

b. callback alert

12. Pozivanje BuyNowButton-a:

21

13. Zatim u JavaScript datoteci button.js treba narpaviti BuyNowButton metodu:

14. Nakon toga parametre id i callback (cb) učitati u varijable, da bi se dalje u kodu mogle koristiti

15. Button-om ćemo manipulirati pomoću 3 metode:

a. fadeIn

b. hover

c. click

22

16. Prvo treba napraviti fadeIn metodu. Ona prima dva parametra: duration i complete.

23

17. Zatim hover:

18. Na kraju click:

24

19. Cijeli kod:

25