Vjezba4
-
Upload
nicholas-oliver -
Category
Documents
-
view
3 -
download
0
description
Transcript of Vjezba4
![Page 1: Vjezba4](https://reader035.fdocuments.net/reader035/viewer/2022062515/563db98d550346aa9a9e672d/html5/thumbnails/1.jpg)
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.
![Page 2: Vjezba4](https://reader035.fdocuments.net/reader035/viewer/2022062515/563db98d550346aa9a9e672d/html5/thumbnails/2.jpg)
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.
![Page 3: Vjezba4](https://reader035.fdocuments.net/reader035/viewer/2022062515/563db98d550346aa9a9e672d/html5/thumbnails/3.jpg)
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.
![Page 4: Vjezba4](https://reader035.fdocuments.net/reader035/viewer/2022062515/563db98d550346aa9a9e672d/html5/thumbnails/4.jpg)
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.
![Page 5: Vjezba4](https://reader035.fdocuments.net/reader035/viewer/2022062515/563db98d550346aa9a9e672d/html5/thumbnails/5.jpg)
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
![Page 6: Vjezba4](https://reader035.fdocuments.net/reader035/viewer/2022062515/563db98d550346aa9a9e672d/html5/thumbnails/6.jpg)
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.
![Page 7: Vjezba4](https://reader035.fdocuments.net/reader035/viewer/2022062515/563db98d550346aa9a9e672d/html5/thumbnails/7.jpg)
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:
![Page 8: Vjezba4](https://reader035.fdocuments.net/reader035/viewer/2022062515/563db98d550346aa9a9e672d/html5/thumbnails/8.jpg)
8
26. Zatim će se napraviti funkcija show koja će primati kao parametar varijablu index.
27. Napravljena metoda show pomoću komentara:
![Page 9: Vjezba4](https://reader035.fdocuments.net/reader035/viewer/2022062515/563db98d550346aa9a9e672d/html5/thumbnails/9.jpg)
9
28. Sada treba napraviti metodu koja će metodu koja će povećavati/resertirati index i nakon toga
pozivati prethodno napravljenu metodu show
![Page 10: Vjezba4](https://reader035.fdocuments.net/reader035/viewer/2022062515/563db98d550346aa9a9e672d/html5/thumbnails/10.jpg)
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.
![Page 11: Vjezba4](https://reader035.fdocuments.net/reader035/viewer/2022062515/563db98d550346aa9a9e672d/html5/thumbnails/11.jpg)
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.
![Page 12: Vjezba4](https://reader035.fdocuments.net/reader035/viewer/2022062515/563db98d550346aa9a9e672d/html5/thumbnails/12.jpg)
12
34. Cijeli kod:
![Page 13: Vjezba4](https://reader035.fdocuments.net/reader035/viewer/2022062515/563db98d550346aa9a9e672d/html5/thumbnails/13.jpg)
13
![Page 14: Vjezba4](https://reader035.fdocuments.net/reader035/viewer/2022062515/563db98d550346aa9a9e672d/html5/thumbnails/14.jpg)
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ć).
![Page 15: Vjezba4](https://reader035.fdocuments.net/reader035/viewer/2022062515/563db98d550346aa9a9e672d/html5/thumbnails/15.jpg)
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.
![Page 16: Vjezba4](https://reader035.fdocuments.net/reader035/viewer/2022062515/563db98d550346aa9a9e672d/html5/thumbnails/16.jpg)
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
![Page 17: Vjezba4](https://reader035.fdocuments.net/reader035/viewer/2022062515/563db98d550346aa9a9e672d/html5/thumbnails/17.jpg)
17
12. Cijela HTML stranica izgleda ovako:
![Page 18: Vjezba4](https://reader035.fdocuments.net/reader035/viewer/2022062515/563db98d550346aa9a9e672d/html5/thumbnails/18.jpg)
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ć).
![Page 19: Vjezba4](https://reader035.fdocuments.net/reader035/viewer/2022062515/563db98d550346aa9a9e672d/html5/thumbnails/19.jpg)
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
![Page 20: Vjezba4](https://reader035.fdocuments.net/reader035/viewer/2022062515/563db98d550346aa9a9e672d/html5/thumbnails/20.jpg)
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:
![Page 21: Vjezba4](https://reader035.fdocuments.net/reader035/viewer/2022062515/563db98d550346aa9a9e672d/html5/thumbnails/21.jpg)
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
![Page 22: Vjezba4](https://reader035.fdocuments.net/reader035/viewer/2022062515/563db98d550346aa9a9e672d/html5/thumbnails/22.jpg)
22
16. Prvo treba napraviti fadeIn metodu. Ona prima dva parametra: duration i complete.
![Page 23: Vjezba4](https://reader035.fdocuments.net/reader035/viewer/2022062515/563db98d550346aa9a9e672d/html5/thumbnails/23.jpg)
23
17. Zatim hover:
18. Na kraju click:
![Page 24: Vjezba4](https://reader035.fdocuments.net/reader035/viewer/2022062515/563db98d550346aa9a9e672d/html5/thumbnails/24.jpg)
24
19. Cijeli kod:
![Page 25: Vjezba4](https://reader035.fdocuments.net/reader035/viewer/2022062515/563db98d550346aa9a9e672d/html5/thumbnails/25.jpg)
25