 Základní informace o jQuery  Jak začít?  Syntaxe  Efekty / události  JQuery UI  Praktické příklady.

Prezentace na téma: " Základní informace o jQuery  Jak začít?  Syntaxe  Efekty / události  JQuery UI  Praktické příklady."— Transkript prezentace:

1

2  Základní informace o jQuery  Jak začít?  Syntaxe  Efekty / události  JQuery UI  Praktické příklady

3  JavaScriptový framework (knihovna)  Vydána v roce 2006  John Resig  Zpracováváno na straně klienta  Free open source

4  verze 1.11.0 › S podporou starších prohlížečů (IE 6 – 8)  verze 2.1.0 › Bez podpory IE 6 - 8

5  Kompatibilita v prohlížečích  Jednodušší syntaxe oproti JS

6

7

8  JavaScript › getElementById(„id“) › getElementsByTagName(„p“)  JQuery › $(„selektor“)

9  1. stažení aktuální verze jQuery  2. import knihovny do stránky  3. import jednotlivých skriptů

10  www.jquery.com www.jquery.com  1) komprimovaná verze › produkční  2) nekomprikovaná verze › vývojová

11  1. způsob  2. způsob (Google AJAX libraries API)  3. způsob

12  Vytvoření skriptu prvni.js  Import skriptu

13  Označení využívání jQuery › JQuery.trim(promenna) = $.trim(promenna)  Určení selektoru › $(this).hide() – skrytí aktuálního elementu › $(„p“).hide() – skrytí všech odstavců › $(„.trida“).hide() – skrytí všech elementů s třídou „trida“ › $(„#identifikator“).hide() – skrytí elementů s identifikátorem „identifikator“  Tvorba proměnných › var promenna = $ („.tabulka“) – uložení elementu s třídou tabulka do proměnné

14 Metoda get / setPopis text() / text(„text“)Vrací /nastavuje text html() / html(„ Hello “)Vrací /nastavuje html val() / val(„value“)Vrací /nastavuje hodnotu (např. z textboxu) attr() / attr("href","http://www.w3schools.c om/jquery"); Vrací /nastavuje hodnotu atributu MetodaPopis append(„appended text“)Přidání textu na konec prepend(„preppended text“)Přidání textu na začátek after(„after text“)Přidání za objekt (obrázek) before(„before text“)Přidání před objekt (obrázek) remove()odstranění elementu addClass(„blue“) / removeClass(„blue“) Přidání / odstranění css třídy

15 EfektPopis Hide()/show()Zobrazení/skrytí elementu Fade() (fadeIn(), fadeOut(), fadeToggle(), fadeTo()) Postupné zobrazení, či zmizení Slide()Vysunutí Animate()Animace (posun elementu) Stop()Zastavení Callback()Zpětná vazba po vykonání operace Zdroj: www.w3schools.com/jquery/default.aspwww.w3schools.com/jquery/default.asp

16 Mouse EventsKeyboard EventsForm EventsDocument / window events clickkeypresssubmitload dblclickkeydownchangeresize mouseenterkeyupfocusscrool mouseleaveblurunload Zdroj: www.w3schools.com/jquery/default.aspwww.w3schools.com/jquery/default.asp

17  Metoda load() › $(selector).load(URL, data, callback); › Načte data ze serveru a uloží je do elementu  Metoda get() › $.get(URL, callback);  Metoda post() › #.post(URL, data, callback)  Praktické příklady: › http://www.w3schools.com/jquery/jquery_aj ax_get_post.asp

18  http://www.jqueryui.com http://www.jqueryui.com  Knihovna s otevřeným zdrojovým kódem  Okamžitě použitelné komponenty  4 kategorie: › Interakce › Ovládací prvky › Efekty › Pomocné nástroje  Možnost stylování  K dispozici motivy vzhledů

19  Dialog  Datepicker  Autocomplete  Progressbar  Slider

20  Resizable  Draggable  Droppable  Sortable  Selectable

21  Blind  Explode  Fold  Pulsate  Shake  Slide

22  Tabulka  Zobrazení / skrytí elementu  Rozbalovací nabídka  Validace formuláře  Fotogalerie  Nabídka (klouzání)

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46  www.w3schools.com www.w3schools.com  www.wikipedia.com www.wikipedia.com  MARGORÍN, M. jQuery bez předchozích znalostí. Brno : 2011. ISBN 978-80-251- 3379-8  BAŠE, O. jQuery pro neprogramátory. Brno : 2012. ISBN 978-80-251-3750-5  www.jaknajquery.cz

47