22.júla 2016 JQUERY. Ing.Drgo Pavel

Transkript

1 22.júla 2016 JQUERY Ing.Drgo Pavel 22.júla 2016

2 OBSAH 1.Úvod do JQUERY jQuery syntax jQuery Selectors jQuery metódy udalostí jQuery Effekty Hotová řešení v JavaScriptu s jquery...74

3 1.Úvod do JQUERY JQuery je databáza funkcií, ktorá je naprogramovaná v Javascripte Je veľmi rýchly Malý Pomerne jednoducho sa sním pracuje Je kompabilitný so všetkými prehliadačmi(to nám klasický Javascript nezaručí) Umožnuje vytvárať efekty a animácie veľmi jednoducho Zjednoduší nám prácu s HTML Obsahuje množstvo funkcií, ktoré vložia do stránky dynamiku Jednoduché použitie AJAXU WIKIPédia workpress využívajú pri tvorbe stránok Jquery Pre prácu s Jquery potrebujeme: Znalosti HTML Javascript Znalosť kaskádových štílov CSS Akýkoľvek textový editor z vyznačenou syntaxou Notepad++,Netbeans,PSpad Inštalácia JQUERY: Do vyhľadávača napíšeme: jquery Vyberieme: Vyberieme:download JQUERY Ponúkne sa voľba :compressed a uncompressed Vyberieme nekomprimovanú a uložíme ju do zložky js na vašom disku Súbor má názov:jquery js Relatíny link na Jquery: src="jquery js"></s Relink je v priečinku do ktorého ho uložíme.najlepšie tam, kde je html súbor. A toto je absolútny link: src="

4 2.jQuery syntax S jquery vyberáme HTML elementy a vykonávame na nich "akcie" Syntax jquery je šitý na mieru pre výber prvkov HTML a vykonávanie nejakej akcie na prvku alebo prvkoch. Základná syntax je nasledujúci: $ ( volič ). akcia () $ znamenia definovanie prístupu do jquery ( volič,selektor) určuje dopyt na HTML elementy JQuery akcie (), ktorá má byť vykonaná na prvoku (prvkoch) Príklady: $ (This).hide () - skryje aktuálny prvok. $ ( "P").hide(). - Skryje všetky <P> elementy. $ ( ". Test").hide(). - Skryje všetky prvky s class = "Test". $ ( "# Test"). hide() -. Skryje prvok s id = "Test". Ste oboznámení s CSS selektory? JQuery používa syntax CSS pre výber prvkov. Dozviete sa viac o syntaxe voliča v nasledujúcej kapitole tohto návodu. Dokument Ready Event Možno ste si všimli, že všetky metódy jquery v našich príkladoch sú vnútri pripravenosti (ready) dokumentu na udalosti(event):

5 // jquery methods go here... Zabráni sa tomu,aby sa spustil kód jquery predtým ako je dokument dostatočne načítaný Je dobrým zvykom čakať na dokument, ktorý nie je pripravený pred začatím práce s ním. To tiež umožňuje mať svoj kód JavaScriptu pred telom dokumentu, v časti hlavy.(head) Tu sú niektoré príklady akcií, ktoré môžu zlyhať, ak dokumenty nie sú dostatočne pripravené. Snažia sa skryť prvok, ktorý ešte nie je vytvorený Snaží získať veľkosť obrazku, ktorý ešte nie je vložený Tip: Tím jquery tiež vytvoril ešte kratšie metódu pre dokument pripravený na udalosti: $(function(){ // jquery methods go here... 3.jQuery Selectors(voliče) jquery selektory sú jednou z najdôležitejších častí knižnice jquery. jquery selektory umožnia vybrať a manipulovať s HTML elementami. jquery selektory sa používajú pri hľadaní alebo výbere HTML elementov podľa ich mena, ID, triedy, typu, atribútov, hodnoty atribútov a mnoho ďalších. Selektor je založený na existujúcich selektorov CSS, a okrem toho, že má ešte niektoré vlastné užívateľské selektory. Všetky selektory v jquery začínajú znakom dolára a zátvorky: $ ().

6 volič elementu JQuery volič vyberá prvky založené na názve elementu. Môžete si vybrať všetky <p> prvky na stránke, ako je tento: $("p") PR.1.príklad Keď používateľ klikne na tlačidlo(button), budú všetky <P> prvky hide(skryté) Riešenie príkladu $("button").click(function(){ $("p").hide(); PR1.Skúste si to sami» src="

7 <s $("button").click(function(){ $("p").hide(); </s <h2>toto je nadpis</h2> <p>toto je odsek</p> <p>toto je ďaľší odsek</p> <button>stlač ma!</button> Toto je po stlačení tlačidla ID Selector Volič ID jquery používa atribút ID značky HTML na hľadanie konkrétneho prvoku. ID musí byť jedinečné v rámci stránky, takže by sme mali používať volič ID, ak chcete nájsť jediný a jedinečný prvok.

8 Ak chceme nájsť prvok s určitým id, napíšeme znak#(hash), nasledovaný id prvku HTML: $("#test") Keď používateľ klikne na tlačidlo(button), prvok s id = "test",bude skytý(hide): Riešenie príkladu $("button").click(function(){ $("#test").hide(); PR2Skúste si to sami» <s $("button").click(function(){ </s $("#test").hide(); <h2>toto je nadpis</h2> <p>toto je odsek.</p> <p id="test">toto je odsek s identifikátorom "test".</p> <button>stlač ma!</button>

9 Toto je stav po použití tlačidla:.class Selector výber tried Volič tried jquery nájde prvky s určitou triedu. Ak chcete nájsť prvky s určitou triedu, napíšeme znak $(dollar), nasledovaný názvom triedy: $(".test") Keď používateľ klikne na tlačidlo, prvky s triedov class = "test" budú skryté: $("button").click(function(){ $(".test").hide(); PR3 Skúste si to sami»

10 <s $("button").click(function(){ </s $(".test").hide(); <h2 class="test">toto je nadpis s triedou "test"</h2> <p class="test">toto odsek s triedou "test".</p> <p>toto je ďaľší osek.</p> <button>stlač ma!</button> Toto je stav po stlačení tlačidla:

11 Ďalšie príklady jquery výberom Syntax Description Example $("*") Vyberie všetky elementy html kódu Try it $(this) Vyberie aktívny element HTML Try it $("p.intro") Vyberie všetky odseky s triedou "intro" Try it $("p:first") Vyberie prvý odsek Try it $("ul li:first") Vyberie prvú položku zoznamu Try it $("ul li:first-child") Vyberie prvé položky z každého zoznamu Try it $("[href]") Vyberie všetky elementy s odkazom href Try it $("a[target='_blank']") Vyberie všetky <a> elements s target attribute rovným "_blank" Try it $("a[target!='_blank']") Vyberie všetky <a> elementy,ktorých target attribute neobsahuje "_blank" Try it $(":button") Vyberie všetky <button> elements and <input> elements of type="button" Try it

12 $("tr:even") Vyberie všetky párne riadky tabuľky Try it $("tr:odd") Vyberie všetky nepárne riadky tabuľky Try it PR4 Skúste si to sami : Vyberie všetky nepárne riadky tabuľky $("tr:odd") <s $("tr:odd").css("background-color", "blue"); /* Vyberie všetky nepárne riadky tabuľky a zobrazí ich modrou farbou */ </s <h1>vitajte na mojej web stránke</h1> <table border="1"> <tr> <th>spoločnosť</th> <th>krajina</th> </tr> <tr> <td>alfreds Futterkiste</td> <td>germany</td> </tr> <tr> <td>berglunds snabbkop</td> <td>sweden</td> </tr> <tr> <td>centro comercial Moctezuma</td> <td>mexico</td> </tr>

13 <tr> <td>ernst Handel</td> <td>austria</td> </tr> <tr> <td>island Trading</td> <td>uk</td> </tr> </table> Funkcie v samostatnom súbore Ak vaša webová stránka obsahuje veľa stránok, a chcete, aby sa vaše jquery funkcie, ľahko udržiavali, môžete si dať svoje funkcie jquery v samostatnom súbore JS. Keď sme demonštrovať jquery v tomto tutoriálu, funkcie sú pridané priamo do sekcie. Avšak, niekedy je vhodnejšie umiestniť do samostatného súboru, takto (pomocou atribútu src odkázať na JS súboru): src=" ery.min.js"> </s src="my_jquery_functions.js"></s

14 PR5 Skúste si to sami:použitie zapisu scriptu do externého súboru:query.js Použite corektný selektor pre skrytie všetkých elementov s href atribútom. Hlavný súbor src="jquery.js"></s <p>toto je odsek</p> <p>toto je ďaľší odsek.</p> <a href=" Tutorial</a> <a href=" Tutorial</a> <br><br> <button>stlač ma!</button> Externý script: /* Skryje všetky elementy s a href */ $("button").click(function(){ $("#test").hide(); $("[href]").hide();

15 Po stlačení tlačidla: 4.jQuery metódy udalostí jquery je šitý na reagovanie na udalosti v HTML stránke. Udalosť predstavuje presný okamih, kedy sa niečo stane. Príklady: pohybom myši nad prvkom výberom prepínača Kliknutím na prvok Termín "fires /fired" je často používaný s udalosťou. Príklad: "Udalosť stlačenie klávesu je aktivovaná, v okamihu, pri stlačení klávesy". Tu sú niektoré bežné DOM udalosti:

16 Mouse Events Keyboard Events Form Events Document/Window Events click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll mouseleave blur unload jquery syntax pre metódy udalostí Ak chcete priradiť udalosť click pre všetky odseky na stránke, môžete to urobiť: $("p").click(); Ďalším krokom je definovať, čo by sa stalo, keď sa udalosť spustí. Musíte vložiť funkciu do akcie: $("p").click(function(){ // Akcia príde sem Bežne používané metódy jquery Event $(document).ready(function() Táto metóda $ (document).ready () nám umožňuje vykonať funkciu, keď je dokument plne načítaný.

17 click () Funkcia sa vykonaná, keď používateľ klikne na prvok HTML. V nasledujúcom príklade sa hovorí: Keď nastane udalosť kliknutia na <p> prvok;skryje sa aktuálny <p> prvok: Riešenie príkladu $("p").click(function(){ $(this).hide(); PR6 Skúste si to sami :Udalosť kliknutia!doctype html> <s /* Kliknutím na odsek vyberiete element,ktorý sa má skryť */ $("p").click(function(){ </s $(this).hide(); <p>ak kliknete na mňa, zmiznem.</p> <p>ak ma chcete skryť, kliknite na mňa!</p> <p>kliknite na mňa tiež!</p>

18 DblClick () Funkcia je vykonaná, keď používateľ dvakrát klikne na prvok HTML: Riešenie príkladu $("p").dblclick(function(){ $(this).hide(); PR7 Skúste si to sami skrytie na dvojklik» src=" <s /* ak dvakrát klikneme na prvok na ktorom je kurzor,prvok sa skryje */ $("p").dblclick(function(){ $(this).hide(); </s

19 <p>ak dvakrát kliknete na mňa, ja zmiznem.</p> <p>aj na mňa dvakrát kliknite,ak chcete aby som zmizol!</p> <p>kliknite na mňa tiež</p> mouseenter () Metóda mouseenter () prikladá funkciu spracovania udalosti do HTML elementu. Funkcia sa vykonaná, keď kurzor myši vstúpi do HTML element: Riešenie príkladu $("#p1").mouseenter(function(){ alert("presunuli ste kurzor na odsek p1!"); PR8 Skúste si to sami»!doctype html> src=" <s /*Zobrazí sa správa v alerte ak presuniete myš na odsek p1 */

20 $("#p1").mouseenter(function(){ alert("presunuli ste kurzor na p1!"); </s <p id="p1">presuňte kurzor do tohto odseku.</p> mouseleave () Funkcia je vykonaná, keď ukazovateľ myši opustí prvok HTML: Riešenie príkladu $("#p1").mouseleave(function(){ alert("ahoj!.práve som opustil element p1!"); PR 9Skúste si to sami» src=" <s $("#p1").mouseleave(function(){ alert("ahoj,opustil som odsek p1!!!");

21 </s <p id="p1">presuňte kurzor na odsek p1,a potom ho presuňte mimo odsek p1.</p> mousedown () Funkcia je vykonaná, keď je ľavé, prostredné alebo pravé tlačidlo myši stlačené, zatiaľ čo myš je nad prvok HTML: Riešenie príkladu $("#p1").mousedown(function(){ alert("mouse down over p1!");

22 PR10.Skúste si to sami» src=" <s $("#p1").mousedown(function(){ alert("tlačidlo myši bolo stlačené na odseku p1!"); </s <p id="p1">na tento odsek presuňte kurzor myši a stlačte ľubovolné tlačidlo.</p> mouseup () Funkcia je vykonaná keď,ľavé,stredné alebo pravé tlačidlo na myši je uvoľnené,zatiaľ čo kurzor myši je nad elementom html: Riešenie príkladu $("#p1").mouseup(function(){ alert("tlačidlo myši bolo uvoľnené nad odsekom p1!");

23 PR11Skúste si to sami» src=" <s $("#p1").mouseup(function(){ alert("tlačidlo myši bolo uvoľnené nad odsekom p1!"); </s <p id="p1">na tento odsek presuňte kurzor myši.potom stačte tlačidlo na myši a uvoľnite ho.</p> hover() Metóda hover () vykoná dve funkcie.je kombináciou metódy mouseenter () a mouseleave(.

24 Prvá funkcia sa vykoná, keď sa myš vstúpi do HTML element, a druhá funkcia je vykonaný, keď myš opustí prvok HTML: Riešenie príkladu $("#p1").hover(function(){ alert("presunul si kurzor na odsek p1!"); }, function(){ alert("ahoj!opustil si kurzorom odsek p1!"); PR12 Skúste si to sami» <s $("#p1").hover(function(){ alert("presunul si kurzor na odsek p1!"); }, function(){ alert("ahoj!opustil si kurzorom odsek p1!"); </s <p id="p1">na tento odsek presuň kurzor.</p>

25 focus () Metóda focus () (Inak povedané zamerania)prikladá funkcii spracovanie udalosti na poli formulára HTML. Funkcia je vykonaná, keď je pole formulára bude zamerané kliknutím myši: Riešenie príkladu $("input").focus(function(){ $(this).css("background-color", "#cccccc"); PR13 Skúste si to sami» <s /* Ak formulárové pole input vyberieme kliknutím,zmení farbu na šedú */

26 $("input").focus(function(){ $(this).css("background-color", "#cccccc"); /* Ak pole nebude vybrané zmení farbu na bielu*/ $("input").blur(function(){ $(this).css("background-color", "#ffffff"); </s Name: <input type="text" name="fullname"><br> <input type="text" name=" "> Blur() rozmazať() Metóda blur () prikladá funkcii spracovanie udalosti na poli formulára HTML. Funkcia je vykonaná, keď pole formulára stratí focus (je deaktivované): Riešenie príkladu $("input").blur(function(){ $(this).css("background-color", "#ffffff");

27 PR14Skúste si to sami» <s /* Ak formulárové pole input vyberieme kliknutím,zmení farbu na modrú */ $("input").focus(function(){ $(this).css("background-color", "#33CCff"); /* Ak pole nebude vybrané zmení farbu na bielu*/ $("input").blur(function(){ $(this).css("background-color", "#ffffff"); </s Name: <input type="text" name="fullname"><br> <input type="text" name=" "> The on() Method Metóda On () pripája jednu alebo viac udalostí pre vybrané prvky.

28 Riešenie príkladu Pripojiť udalosť kliknutí na <p> prvok: $("p").on("click", function(){ $(this).hide(); PR15 Skúste si to sami» <s /*Na všetky odseky aplikujte kliknutie */ $("p").on("click", function(){ $(this).hide(); </s <p>ak kliknete na mňa zmiznem.</p> <p>kliknute na mňa</p> <p>kliknite na mňa tiež!</p> Riešenie príkladu Pripojte obsluhu viacerých udalostí na <p> prvok:

29 $("p").on({ mouseenter: function(){ $(this).css("background-color", "lightgray"); }, mouseleave: function(){ $(this).css("background-color", "lightblue"); }, click: function(){ $(this).css("background-color", "yellow"); } PR16 Skúste si to sami» <s /* Ak presunie kurzor na odsek p, zmení sa jeho farba na šedú *Ak presunieme kurzor mimo odsek p,zmení sa jeho farba na modrú *V prípade,že klikneme na odseku p,zmení sa jeho farba na žltú */ $("p").on({ mouseenter: function(){ $(this).css("background-color", "lightgray"); }, mouseleave: function(){ $(this).css("background-color", "lightblue"); }, click: function(){ $(this).css("background-color", "yellow"); } </s

30 <p>kliknite na odsek p alebo presunutie ukazovateľa myši na tento odsek.</p> Úvodný stav odseku: Presunutie kurzora na odsek: Presunutie kurzora mimo odsek: Kliknutie na odsek p: a)jquery hide () a show () efekt 5.jQuery efekty S jquery môžete skryť a zobraziť HTML elementy pomocou hide () a Show () metódy:

31 Riešenie príkladu $("#hide").click(function(){ $("p").hide(); $("#show").click(function(){ $("p").show(); PR17Vyskúšajte si to sami» <s $("#hide").click(function(){ $("p").hide(); $("#show").click(function(){ $("p").show(); </s <p>ak kliknete na "hide" tlačidlo, ja sa schovám.v prípade,že kliknete na tlačidlo "Show" ja sa zobrazím</p> <button id="hide">hide</button> <button id="show">show</button>

32 syntaxe: $(selector).hide(speed,callback); $(selector).show(speed,callback); Nepovinný parameter rýchlosť určuje rýchlosť Zobrazenie / skrytie, a môže nadobúdať nasledujúce hodnoty: "pomaly", "rýchlo", alebo milisekúnd. Voliteľný parameter callback je funkcia, ktorá má byť vykonaná po tom, čo sa táto metóda skryť () alebo zobraziť () dokončí. Nasledujúci príklad ukazuje parameter speed efektu Hide (): Riešenie príkladu $("button").click(function(){ $("p").hide(1000); PR18 Vyskúšajte si to sami» <s /* Kliknutím na "hide" tlačidlo sa s onekorením 3 sekundy skryjú odseky p */ $("button").click(function(){ $("p").hide(3000); </s

33 <button>hide</button> <p>to je krátky odsek.</p> <p>toto je ďaľší krátky odsek.</p> b) toggle() efekt prepínať () S jquery, môžete prepínať medzi hide () a show () metódou metódou prepínania ()- toggle(). syntaxe: $(selector).toggle(speed,callback); Nepovinný parameter speed môže mať nasledujúce hodnoty: "pomaly", "rýchlo", alebo milisekúnd. Voliteľný parameter callback je funkcia, ktorá sa po dokončení toggle() dokončí. Zadanie príkladu:zobrazené prvky sú skryté a skryté elementy sú zobrazené

34 Riešenie príkladu $("button").click(function(){ $("p").toggle(); PR18 Vyskúšajte si to sami» <s /* KLiknutím na button sa spustí efekt prepínača(toggle)*/ $("button").click(function(){ $("p").toggle(); </s <button>prepínanie medzi skrývaním a zobrazením odsekov</button> <p>toto je odsek s krátkym obsahom.</p> <p>a toto ďaľší odsek s krátkym obsahom.</p>

35 c) efekty - Fading S jquery môžete prvok zoslabovať alebo zosilňovať na viditeľnosti. jquery má nasledujúce metódy fade: I. fadein () II. fadeout() III. fadetoggle () IV. fadeto () I. fadein () efekt Metóda jquery fadein () sa používa na rozsvietenie skrytého prvku. syntaxe: $(selector).fadein(speed,callback); Parameter speed určuje dobu trvania účinku. To môže trvať nasledujúce hodnoty: "pomaly"(slow), "rýchlo"(fast), alebo milisekúnd. Voliteľný parameter callback je funkcia, ktorý sa vykoná, keď je zobrazenie skrytého prvku skončené. Nasledujúci príklad ukazuje metódu fadein () s rôznými parametrami: Riešenie príkladu $("button").click(function(){ $("#div1").fadein(); $("#div2").fadein("slow"); $("#div3").fadein(3000); PR19 Vyskúšajte si to sami»

36 <s /* Prvý div sa zobrazí rýchlo,druhý pomalšie a tretí sa zobrazí až po 6 sekundách */ $("button").click(function(){ $("#div1").fadein(); $("#div2").fadein("slow"); $("#div3").fadein(6000); </s <p>demonštrovanie fadein() s rozdielnymi parametrami speed.</p> <button>pre spustenie demonštrácie kliknite na tlačidlo</button><br><br> <div id="div1" style="width:80px;height:80px;display:none;backgroundcolor:red;"></div><br> <div id="div2" style="width:80px;height:80px;display:none;backgroundcolor:green;"></div><br> <div id="div3" style="width:80px;height:80px;display:none;backgroundcolor:blue;"></div>

37 II. fadeout () efekt Metóda jquery fadeout () sa používa na miznutie viditeľného prvku. syntaxe: $(selector).fadeout(speed,callback); Parameter rychlosť určuje dobu trvania účinku. To môže trvať nasledujúce hodnoty: "pomaly", "rýchlo", alebo milisekúnd. Parameter speed určuje dobu trvania účinku. To môže trvať nasledujúce hodnoty: "slow", "fast", alebo milisekúnd. Voliteľný parameter callback je funkcia, ktorý sa vykoná, keď sa blednutie dokončí. Nasledujúci príklad ukazuje metódu fadeout () s rôznymi parametrami:

38 Riešenie príkladu $("button").click(function(){ $("#div1").fadeout(); $("#div2").fadeout("slow"); $("#div3").fadeout(5000); PR20 Vyskúšajte si to sami» <s /* Po kliknutí na tlačidlo,sa div postupne stratia */ $("button").click(function(){ $("#div1").fadeout(); $("#div2").fadeout("slow"); $("#div3").fadeout(5000); </s <p>demonštrácia fadeout() s rôznymi parametrami.</p> <button>pre spustenie demonštrácie stlačte toto tlačidlo</button><br><br> <div id="div1" style="width:80px;height:80px;backgroundcolor:red;"></div><br> <div id="div2" style="width:80px;height:80px;backgroundcolor:green;"></div><br> <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

39 III.fadeToggle () efekt Metóda jquery fadetoggle () prepína medzi fadein () a fadeout metódy (). Ak sú prvky zobrazené fadetoggle (),ich bude zoslabovať Ak sú prvky skryté, fadetoggle (),ich bude postupne zobrazovať. syntaxe: $(selector).fadetoggle(speed,callback); Parameter speed určuje dobu trvania efektu. To môže trvať nasledujúce hodnoty: "pomaly", "rýchlo", alebo milisekúnd.(slow,fast,milisekundy) Voliteľný parameter callback je funkcia, ktorý sa vykoná, keď sa efekt dokončí.

40 Nasledujúci príklad ukazuje metódu fadetoggle () s rôznymi parametrami: Riešenie príkladu $("button").click(function(){ $("#div1").fadetoggle(); $("#div2").fadetoggle("slow"); $("#div3").fadetoggle(3000); PR21 Vyskúšajte si to sami» <s /* Po kliknutí na tlačidlo,sa div postupne stratia alebo ak sú skryté sa zobrazia */ $("button").click(function(){ $("#div1").fadetoggle(); $("#div2").fadetoggle("slow"); $("#div3").fadetoggle(3000); </s <p>demonštrácia fadetoggle() s rôznymi parametrami.</p> <button>pre spustenie demonštrácie stlačte toto tlačidlo</button><br><br> <div id="div1" style="width:80px;height:80px;backgroundcolor:red;"></div><br> <div id="div2" style="width:80px;height:80px;backgroundcolor:green;"></div><br> <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

41 IV. fadeto () efekt Spôsob jquery fadeto () umožňuje vyblednutie na danú opacity (hodnota medzi 0 a 1).//opacity=priesvitnosť syntax: $(selector).fadeto(speed,opacity,callback); Parameter požadovaná rýchlosť určuje dobu trvania účinku. To môže trvať nasledujúce hodnoty: "pomaly", "rýchlo", alebo milisekúnd. Parameter požadovanej opacity v metóde fadeto () stanovuje vyblednutiu na danú priesvitnosť (hodnota medzi 0 a 1). Voliteľný parameter callback je funkcie, ktorá majú byť vykonaná po tom, čo sa funkcie fadeto() dokončí. Nasledujúci príklad ukazuje metódu fadeto () s rôznymi parametrami:

42 Riešenie príkladu $("button").click(function(){ $("#div1").fadeto("slow", 0.15); $("#div2").fadeto("slow", 0.4); $("#div3").fadeto("slow", 0.7); PR22 Vyskúšajte si to sami» <s /* Po kliknutí na tlačidlo,sa div postupne rozsietia na nastavenú priesvitnosť */ $("button").click(function(){ $("#div1").fadeto("slow", 0.15); $("#div2").fadeto("slow", 0.4); $("#div3").fadeto("slow", 0.7); </s <p>demonštrácia priesvitnosti - fadeto()- s rôznymi parametrami.</p> <button>pre spustenie demonštrácie stlačte toto tlačidlo</button><br><br> <div id="div1" style="width:80px;height:80px;backgroundcolor:red;"></div><br> <div id="div2" style="width:80px;height:80px;backgroundcolor:green;"></div><br> <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

43 d) efekty Sliding(Vysúvanie) S jquery môžete vytvoriť posuvné vplyvy na prvky. jquery má nasledujúce metódy Slide: I. slidedown() II. slideup () III. slidetoggle ()

44 I.efekt slidedown () Metóda slidedown () sa používa na kĺzať prvku dolu. syntaxe: $( selector ).slidedown( speed,callback ); Parameter speed určuje dobu trvania efektu. To môže trvať nasledujúce hodnoty: "slow", "fast", alebo milisekúnd. Voliteľný parameter callback je funkcia, ktorá bude spustená po klzných efektoch Nasledujúci príklad ukazuje spôsob slidedown (): Riešený príklad $("#flip").click(function(){ $("#panel").slidedown(); PR23 Vyskúšajte si to sami» <s /* kliknutím na div s ID flip sa vysunie dolu div s ID panel */ $("#flip").click(function(){ $("#panel").slidedown("slow"); </s <style> #panel, #flip { padding: 5px;

45 } text-align: center; background-color: #e5eecc; border: solid 1px #c3c3c3; #panel { padding: 50px; display: none; } </style> /*Zásobník rolety */ <div id="flip">klikni na vysunutie dolného panelu</div> /* Roleta */ <div id="panel">zdravím ťa svet!!!</div> Chome: II.efekt slideup () Metóda Metóda slideup () sa používa na posúvanie elementu hore. syntax: $( selector ).slideup( speed,callback ); Parameter speed určuje dobu trvania efektu. To môže trvať nasledujúce hodnoty: "slow-pomaly", "last-rýchlo", alebo milisekúnd. Voliteľný parameter callback je funkcia, ktorá je spustená po klzných efektoch. Nasledujúci príklad ukazuje spôsob slideup ():

46 príklad $("#flip").click(function(){ $("#panel").slideup(); PR24 Vyskúšajte si to sami» <s /* Kliknutím na panel "flip" sa zbalí rozbalená roleta */ $("#flip").click(function(){ $("#panel").slideup("slow"); </s <style> #panel, #flip { padding: 5px; text-align: center; background-color: #e5eecc;/*šedá farba pozadia*/ border: solid 1px #c3c3c3; } #panel { padding: 50px; } </style> <div id="flip">klikni sam pre zbalenie rozbalenej rolety "up panel"</div> <div id="panel">hello world!</div>

47 III.efekt slidetoggle () Metóda jquery slidetoggle () prepína medzi slidedown () a slideup () efektami. Ak sú prvky vysunuté, slidetoggle () bude kĺzať smerom hore. Ak prvky boli zbalené, slidetoggle () ich rozbalí -bude kĺzať smerom dole. syntax $( selector ).slidetoggle( speed,callback ); Nepovinný parameter speed môže mať nasledujúce hodnoty: "slow-pomaly", "fast-rýchlo", milisekúnd. Voliteľný parameter callback je funkcia,ktorá bude spustená po klzných efektoch. Nasledujúci príklad ukazuje spôsob slidetoggle (): Riešenie príkladu $("#flip").click(function(){ $("#panel").slidetoggle(); PR25 Vyskúšajte si to sami» <s

48 /* Kliknutím na panel "flip" sa zbalí rozbalená roleta a rozbalí zbalená roleta */ $("#flip").click(function(){ $("#panel").slidetoggle(); </s <style> #panel, #flip { padding: 5px; text-align: center; background-color: #00cccc;/*Modrá farba pozadia*/ border: solid 1px #000000;/*Čierna farba okraja */ } #panel { padding: 50px; } </style> <div id="flip">pozrav pekne!</div> <div id="panel">dobrý deň pán učiteľ!</div> Otestujte sa cvičenie! Cvičenie 1»

49 Použite efekt slide up na kľzanie prvku <div> smerom hore. <html> <s /* zbalí rozbalený div smerom nahor */ $("div").slideup(); </s <div style="width:80px;height:80px;background-color:red;"></div> Nedá sa zaznamenať staticky Cvičenie 2» Použiť slideup() na posunutie nahor prvku <div>. Trvanie efektu by mal byť "slow". <s /* zbalí rozbalený div smerom nahor rychlosťou slow */ $("div").slideup("slow"); </s

50 <div style="width:80px;height:80px;background-color:red;"></div> Nedá sa zaznamenať Cvičenie 3» Použite efekt slidedown() pre rozbalenie prvku <div> smerom dole.. Effect bude trvať 3000 milliseconds. <html> <s $("div").slidedown(3000); </s <div style="width:80px;height:80px;display:none;backgroundcolor:red;"></div> Cvičenie 4»

51 Použite efekt toggle na prepínanie medzi sliding up and down prvku <div>, kliknutím na tlačidlo. Trvanie efektu bude 1000 milliseconds. <s $("button").click(function(){ $("div").slidetoggle(1000); </s <button>kliknite na tlačidlo pre posúvanie rolety up/down pre prvok div</button><br><br> <div style="width:80px;height:80px;background-color:red;"></div>

52 e) efekty - Animácie efekt animate()-živý () umožňuje vytvárať vlastné animácie. I.Efekt animate() Metóda animate () sa používa na vytvorenie vlastnej animácie. syntax: $( selector ).animate({ params },speed,callback ); Povinný parameter params definuje vlastnosti CSS, ktoré majú byť animované. Parameter speed určuje dobu trvania efektu. Ten môže trvať nasledujúce hodnoty: "slow -pomaly", "fast-rýchlo", alebo milisekúnd. Voliteľný parameter callback je funkcia, ktorá majú byť vykonaná po dokončení animácie. Nasledujúci príklad demonštruje jednoduché použitie efektu animate(). Prvok <div> sa pohybuje vpravo, pokiaľ nedosiahne ľavá poloha 250 pixelov: Riešený príklad $("button").click(function(){ $("div").animate({left: '250px' PR26 Vyskúšajte si to sami» Štandardne majú všetky prvky HTML statickú pozíciu, a nemôžu byť presunuté. K manipulácii polohy, nezabudnite najprv nastaviť vlastnosť position CSS prvku na relative, fixed, or absolute!

53 <s $("button").click(function(){ $("div").animate({left: '250px' </s <button>štart animácie-pohyb do prava až po nastavenú ľavú polohu</button> <p>štandardne majú všetky prvky HTML statickú pozíciu, a nemôžu byť presunuté. K manipulácii polohy, nezabudnite najprv nastaviť vlastnosť position CSS prvku na relative, fixed, or absolute!</p> <div style="background:#98bf21;height:100px;width:100px;position:absolute;"></di v>

54 II.Animate() - manipuláciu s viacerými vlastnosťami Všimnite si, že niekoľko vlastností môže byť animovaných súčasne: príklad $("button").click(function(){ $("div").animate({ left: '250px', opacity: '0.5', height: '150px', width: '150px' PR27 Vyskúšajte si to sami» <s $("button").click(function(){ $("div").animate({ left: '250px', opacity: '0.5', height: '150px', width: '150px' </s <button>štart animácie</button> <p>štandardne majú všetky prvky HTML statickú pozíciu, a nemôžu byť presunuté. K manipulácii polohy, nezabudnite najprv nastaviť vlastnosť position CSS prvku na relative, fixed, alebo absolute!</p>

55 <div style="background:#98bf21;height:100px;width:100px;position:absolute;"></di v> Je možné manipulovať so všetkými vlastnosti CSS s metódou animate()? Áno, takmer! Je tu však jedna dôležitá vec na zapamätanie: Musíme napísať paddingleft miesto padding-left, marginright miesto marginright,, a tak ďalej. Tiež, farba animácie nie je súčasťou jadra jquery knižnice. Ak chcete animovať farbu, je potrebné stiahnuť Color Animácie plugin od jquery.com. III.Animate() - Používanie relatívnej hodnoty

56 Je tiež možné definovať relatívnej hodnoty (hodnota je potom vzhľadom k aktuálnej hodnote prvku). To sa vykonáva tým, že + = alebo - = pred hodnoty: Riešený príklad $("button").click(function(){ $("div").animate({ left: '250px', height: '+=150px', width: '+=150px' PR28 Vyskúšajte si to sami» <s $("button").click(function(){ $("div").animate({ left: '250px', height: '+=150px', width: '+=150px' </s <button>štart animacie</button> <p>štandardne majú všetky prvky HTML statickú pozíciu, a nemôžu byť presunuté. K manipulácii polohy, nezabudnite najprv nastaviť vlastnosť position CSS prvku na relative, fixed, alebo absolute!</p>

57 <div style="background:#98bf21;height:100px;width:100px;position:absolute"></div > III.animate()- pomocou prednastavených hodnôt Môžete dokonca určiť hodnoty animácie ako "show", "hide", alebo " "toggle": Riešený príklad

58 $("button").click(function(){ $("div").animate({ height: 'toggle' PR29 Vyskúšajte si to sami» <s $("button").click(function(){ $("div").animate({ height: 'toggle' </s <p>kliknutím na tlačidlo môžeme viackrát meniť animáciu.</p> <button>štart animácie</button> <p>štandardne majú všetky prvky HTML statickú pozíciu, a nemôžu byť presunuté. K manipulácii polohy, nezabudnite najprv nastaviť vlastnosť position CSS prvku na relative, fixed, alebo absolute!</p> <div style="background:#98bf21;height:100px;width:100px;position:absolute;"></di v>

59 IV.animate()-Používanie zásobnikov funkčnosti V predvolenom nastavení, je jquery dodávaný s funkciami zasobnikov pre animácie. To znamená, že ak píšete viac animate () po sebe, jquery vytvára "vnútorné" zásobníky s volaním efektov.potom sa vykonáva animate() jeden po druhom. Takže, ak chcete, aby sa vykonávali rôzne animácie po sebe, využívame zásobníky funkčnosti var: Riešenie príkladu $("button").click(function(){ var div = $("div"); div.animate({height: '300px', opacity: '0.4'}, "slow"); div.animate({width: '300px', opacity: '0.8'}, "slow"); div.animate({height: '100px', opacity: '0.4'}, "slow"); div.animate({width: '100px', opacity: '0.8'}, "slow"); PR30 Vyskúšajte si to sami» <s /* Animácia sa opakuje po každom stlačení tlačidla button */

60 $("button").click(function(){ var div = $("div"); div.animate({height: '300px', opacity: '0.4'}, "slow"); div.animate({width: '300px', opacity: '0.8'}, "slow"); div.animate({height: '100px', opacity: '0.4'}, "slow"); div.animate({width: '100px', opacity: '0.8'}, "slow"); </s <button>opakovaný štart animácie</button> <p>štandardne majú všetky prvky HTML statickú pozíciu, a nemôžu byť presunuté. K manipulácii polohy, nezabudnite najprv nastaviť vlastnosť position CSS prvku na relative, fixed, alebo absolute!</p> <div style="background:#98bf21;height:100px;width:100px;position:absolute;"></di v>

61 Nižšie uvedený príklad najprv posunie <div> prvok na pravo a potom sa zväčší veľkosť písma textu: Riešenie príkladu $("button").click(function(){ var div = $("div"); div.animate({left: '100px'}, "slow"); div.animate({fontsize: '3em'}, "slow"); PR31 Vyskúšajte si to sami» <s /* Animácia najskôr presunie vpravo a potom sa zväčší veľkosť písma */ $("button").click(function(){ var div = $("div"); div.animate({left: '100px'}, "slow"); div.animate({fontsize: '3em'}, "slow"); </s <button>stlač toto tlačidlo pre spustenie animácie</button> <p>štandardne majú všetky prvky HTML statickú pozíciu, a nemôžu byť presunuté. K manipulácii polohy, nezabudnite najprv nastaviť vlastnosť position CSS prvku na relative, fixed, alebo absolute!</p> <div style="background:#98bf21;height:100px;width:200px;position:absolute;">ahoj!</div>

62 Otestujte sa cvičenie! Cvičenie 1» Použite efekt animate() na presunutie <div> element o 250 pixels to the right. <html> <s $("div").animate({left: '250px' </s

63 <div style="background:#98bf21;height:100px;width:100px;position:absolute;"></di v> Cvičenie 2» Použite efekt animate() na nastavenie height prvku <div> na 500 pixels. <html> <s $("div").animate({height: '500px' </s <div style="background:#98bf21;height:100px;width:100px;position:absolute;"></di v>

64 Cvičenie 3» Použite efekt animate() na nastavenie nasledovných CSS vlastností pre prvok <div>: opacity: 0.4, height: 500px, width: 500px. <html> <s $("div").animate({ opacity: '0.4', height: '500px',

65 width: '500px' </s <div style="background:#98bf21;height:100px;width:100px;position:absolute;"></di v> Cvičenie 4» Použite efekt animate() na nastavenie font-size prvku <div> to 100 pixels. Nastavte efekt animácie na "slow". <html> <s $("div").animate({fontsize: '100px'}, "slow"); </s

66 <div style="background:#98bf21;height:200px;width:600px;">hello World</div> f) Stop Animations Metóda stop () sa používa na zastavenie animácie alebo efekty pred jej ukončením. Metóda jquery stop () sa používa na zastavenie animácie alebo efektu pred jej ukončením. Táto metóda stop () funguje u všetkých efektov, vrátane posuvných, blednutiu a vlastné animácie. syntaxe: $( selector ).stop( stopall,gotoend ); Voliteľný parameter stopall určuje, či aj zásobník animácie by mala byť vyčistený, alebo nie. Východisková hodnota je false, čo znamená, že len

67 aktívna animácia sa zastaví, čo umožňuje že v zásobníku animácie, sú len tie,ktoré majú byť vykonané neskôr. Voliteľný parameter gotoend určuje, či sa má alebo nemá dokončiť aktuálna animácia. Východisková hodnota je false. Takže tým, že v predvolenom nastavení je metóda stôp (),zastaví aktuálnu animáciu vykonávanú na vybraný prvok. Nasledujúci príklad ukazuje metódu stop (), bez parametrov: Riešený príklad $("#stop").click(function(){ $("#panel").stop(); PR31 Vyskúšajte si to sami» <s $("#flip").click(function(){ $("#panel").slidedown(5000); $("#stop").click(function(){ $("#panel").stop(); </s <style> #panel, #flip { padding: 5px; font-size: 18px; text-align: center; background-color: #555; color: white;

68 } border: solid 1px #666; border-radius: 3px; #panel { padding: 50px; display: none; } </style> <button id="stop">zastavenie vysúvania</button> <div id="flip">stlačením tlačidka vysuň roletu</div> <div id="panel">dobrý deň!!!</div> Pre úplný prehľad o všetkých efektov jquery, prejdite na našom jquery Effect referencie. g) Callback Functions v efektoch (funkcie spätného volania) JavaScriptu sú vykonané príkazy riadok po riadku. Avšak, s účinkami, ďalšieho riadoku kódu môže byť spustený aj napriek tomu, že účinok nie je dokončený. To môže vytvárať chyby.

69 Aby sa tomu zabránilo, môžeme vytvoriť funkciu spätného volania. Funkcia spätného volania je vykonaná po tom, keď efekt je na konci. Príklad syntax: $ (volič).hide (rýchlosť, spätné volanie); Tento príklad má pod parameterom spätné volanie, funkciu, ktorá bude vykonaná po tom, čo je efekt ukončený: Príklad s Callback $("button").click(function(){ $("p").hide("slow", function(){ alert("odsek je teraz skrytý "); PR32 Vyskúšajte si to sami» <s /* Hláška sa zobrazí až po dokončení efektu "hide" */ $("button").click(function(){ $("p").hide("slow", function(){ alert("odsek je teraz skrytý"); </s <button>skryť odsek a potom zobraziť hlášku</button> <p>toto je odsek z krátkym obsahom.</p>

70 Tento príklad nemá žiaden parameter callback a výstražné okno sa zobrazí pred dokončením hide()efektov: Príklad bez Callback $("button").click(function(){ $("p").hide(3000); alert("odsek je teraz skrytý "); PR33 Vyskúšajte si to sami» <s

71 /* Efekt nečaká na dokončenie skrývania a hneď zobrazí hlášku */ /* Je to bez použitia funkcie spätného volania callback*/ $("button").click(function(){ $("p").hide(3000); alert("odsek je teraz skrytý"); </s <button>skry odsek</button> <p>toto je odsek s krátkym obsahom.</p> h)chaining-spájanie efektov S jquery, môžete spájať spolu akcie / metódy. Reťazenie nám umožňuje spúšťať niekoľko efektov (na rovnakom prvku) v rámci jediného príkazu. Až doteraz sme písanie skončenie efektov jeden po druhom. Avšak, tam je technika tzv reťazenie, ktorý nám umožňuje spúšťať viac príkazov jquery, jeden po druhom, na rovnakom prvku (ov). Tip: Týmto spôsobom nemusia nájsť rovnaký prvok (y) viac ako raz. Ak chcete spojiť efekty, stačí pripojiť akciu sa k predchádzajúcej činnosti. Nasledujúci príklad spájania dohromady CSS () metódy, slideup (), a slidedown (). "P1" prvok prvý zmení na červenú, potom to kĺže nahor, a potom to skĺzne dolu: Riešenie príkladu $("#p1").css("color", "red").slideup(2000).slidedown(2000);

72 PR34 Vyskúšajte si to sami» <s $("button").click(function(){ $("#p1").css("color", "red").slideup(2000).slidedown(2000); </s <p id="p1">jquery je zábavný!!</p> <button>stlač ma pre spustenie spojených efektov</button> Mohli by sme tiež pridať ďalšie volanie efektov v prípade potreby. Tip: Pri spájaní by sa, riadok kódu mohol stať celkom dlhý. Avšak, jquery nie je príliš prísny na syntax; môžete ho formátovať ako chcete, vrátane koncov riadkov a medzier. To tiež funguje v pohode:

73 Riešený príklad $("#p1").css("color", "red").slideup(2000).slidedown(2000); PR34 Vyskúšajte si to sami» <s $("button").click(function(){ $("#p1").css("color", "red").slideup(2000).slidedown(2000); </s <p id="p1">jquery je zábavný!!</p> <button>stlač ma pre spustenie spojených efektov</button> jquery odstáni nadbytočné medzery a vykonáva vyššie uvedené riadky ako jeden dlhý riadok kódu.

74 6.Hotová řešení v JavaScriptu s jquery Zdoj :itnetwork.cz-použijem iný zdroj PR6.1.