Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

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

Podobné prezentace


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 › S podporou starších prohlížečů (IE 6 – 8)  verze › 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   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:

16 Mouse EventsKeyboard EventsForm EventsDocument / window events clickkeypresssubmitload dblclickkeydownchangeresize mouseenterkeyupfocusscrool mouseleaveblurunload Zdroj:

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: › ax_get_post.asp

18   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    MARGORÍN, M. jQuery bez předchozích znalostí. Brno : ISBN  BAŠE, O. jQuery pro neprogramátory. Brno : ISBN 

47


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

Podobné prezentace


Reklamy Google