rss

jQuery pro začátečníky: Události

9. 10. 2008

Událost je nějaká akce, která se na HTML stránce stane. Může to být třeba vaše kliknutí na cokoli, pohyb myší na nějaký prvek, stisknutí klávesy v zadávacím políčku apod. Já i vy většinou potřebujeme něco udělat, pokud některá taková událost nastane. Typickým příkladem může být schování nějakého prvku, pokud se na něco klikne. Schovávání už umíte z dílu Metody a efekty, takže ho můžeme krásně použít.

Událost se zapisuje tak, že vybereme nějaký prvek a tečkou na něj přilepíme nějakou událost. Do závorky se pak napíše function(){} a do složených závorek napíšeme kód, který se má provést. Možná trochu krkolomné, ale rychle se to naučíte. Podívejte se na příklad s událostí click():

$("#schovavac").click(function(){
    $("#muj_odstavec").toggle();
});

Příklad si můžete vyzkoušet.

Pokud se tedy klikne na prvek s ID schovavac, spustí se událost, ve které je náš kód. tento kód zase spustí metodu toggle() na prvek s ID muj_odstavec. Odstavec se tedy zmizí nebo se objeví.

Názvy událostí jsou podobné jako přímo v Javasciptu, akorát nezačínají na on (například onclick). Jejich kompletní výčet sem ani nemá cenu psát, najdete ho v dokumentaci.

Co všechno lze s událostmi dělat? Ukážu několik dalších příkladů na různé události. V každém příkladu se zároveň naučíme něco nového o jQuery.

Příklad 1: Zvýraznění rámečkem při najetí myší

V tomto příkladu si mimojiné všimněte použití $(this). Toto this vybere vždy prvek, kterého se událost týká. Událost mouseover() se týká prvku #muj_odstavec, takže v tomto případě $(this) zastupuje prvek #muj_odstavec. Více o this si můžete přečíst v Profimagazínu.

Metoda css() má velmi jednoduché použití, přiřadí prvku nějaký kaskádový styl, v našem případě červený rámeček.

$("#muj_odstavec").mouseover(function(){
    $(this).css('border','1px solid red');
});
$("#muj_odstavec").mouseout(function(){
    $(this).css('border','none');
});

Zkuste si

Příklad 2: Stisknutí klávesy

Pro druhý příklad jsem vybral jeden přímo z dokumentace jQuery. Použijeme událost keyup(), která se vykoná, je-li zmáčknuta a uvolněna nějaká klávesa.

$(document).keyup(function(event){
    if (event.keyCode == 27) {
        alert("Stiskli jste ESCAPE");
    }
});

Nejdřív bych chtěl upozornit na výběr prvku document. Znamená to, že budeme pracovat s celým dokumentem a událost se bude tedy detekovat na celém dokumentu.

Novinka pro nás je slovíčko event v závorkách funkce. Díky němu pak můžeme zjistit, která konkrétní klávesa byla zmáčknuta. V našem příkladu se ptáme, jestli byla zmáčknuta klávesa s kódem 27, cože je klávesa ESCAPE. Příklad si vyzkoušejte.

Příklad 3: Zobrazení okénka na místě kurzoru

V tomto příkladu bych vám chtěl ukázat hned 3 věci, které ještě neznáte. Nejdřív příklad:

$("#odkaz").click(function(e){
        var leftVal = e.pageX + "px";
        var topVal = e.pageY + "px";
        $("#okenko").css({left:leftVal,top:topVal}).fadeIn(200);
});

První věc je to malé éčko v závorce funkce. Jde o ten samý případ, jako v předchozím příkladu (kde jsme však použili proměnnou event a vy si tu proměnnou můžete pojmenovat jak chcete). Díky tomuto éčku můžeme zjistit polohu kurzoru ve chvíli, kdy nastala událost, tedy v tzv. moment kliku :) Potom pomocí zápisu e.pageX a e.pageY zjistíme souřadnice. Ty potom použijeme při polohování okénka pomocí CSS.

Další novinkou je zvláštní zápis v metodě CSS. Je to speciální zápis, díky kterému můžete prvku přiřadit více CSS vlastností najedou. Zápis je jednoduchý, stačí na to složené závorky a pak vždy vlastnost dvojtečka hodnota čárka vlastnost dvojtečka hodnota a tak dále. Například {font-size: "12em", font-color: "red"}. My jsme si v našem příkladu nastavili vlastnosti top a left.

Třetí zajímaovstí je poslední řádek příkladu. Asi se divíte, že jsem nejdříve vybral prvek (to už umíme), pak jsem mu přiřadil metodu css() (to už také umíme), ALE pak jsem tam přilepil ještě za další tečku další metodu. Jakto? Jde o další skvělou vlastnost frameworku jQuery. Jmenuje se to řetězení a dovoluje nám to krásně zkrátit a zjednodušit kód. Místo toho, aby psal toto:

$("#okenko").css({left:leftVal,top:topVal});
$("#okenko").fadeIn(200);

napíšu toto:

$("#okenko").css({left:leftVal,top:topVal}).fadeIn(200);

A udělá to to samé, jenom to vypadá přehledněji a jednodušeji. Prostě pokud chci s jedním prvkem udělat více věcí po sobě, nalepím to za sebe tečkami a ono se provede. Hezké ne?

Tak zbývá už jenom vyzkoušet si náš příklad. Aby se okénko opravdu zobrazovalo na místě kurzoru, je nutné aby obsahovalo CSS vlastnost position:absolute. To nám pak dovolí ho pozicovat pomocí vlastností top a left. Pojďme si příklad vyzkoušet do zkoušečky.

To je k událostem asi vše. Samozřejmě jako vždy, jQuery toho umí s událostmi mnohem víc. To už však nechám jen na vašem studiu a zájmu.

Protože jsem chtěl ukázat jQuery pro opravdové začátečníky, beru to hodně povrchově a proto nás už čeká jenom jeden a poslední díl. Bude však velmi zajímavý, bude o AJAXu.

Zajímají mě také vaše názory na seriál. Jste pořád v obraze? Pomohl vám nějak? Zkusili jste díky němu už jQuery někde použít? Povedlo se vám objevit další jeho funkce, které jsem v seriálu neuvedl?


Komentáře

Jakub

Šikovný seriál :)

Jirka

U toho zvyrazneni okenka pri najeti mysi bych spise doporucoval udalost hover.

$(?#muj_odsta­vec?).hover(fun­ction(){
$(this).css(?bor­der?,?1px solid red?); }, function(){
$(this).css(?bor­der?,?none?); });

Kdyz jQuery, tak poradne :)

Ondra

seriál je naprosto skvělý, nepomohl mi se orientovat v JS, který jsem se předtím neučil, ale zjistil jsem že hodně věcí jde dělat prostě jednoduše pomocí jQuery než patlat se s kódem o x řádcích.

alča

tohle jsem hledala :-)

Miroslav Šedivý

Dnes jsem objevil jQuery a je to opravdu bomba musím říct, i když jse se JS vždycky bál, hned jsem se ho pokoušel použít v praxi, ale tvrdě jsem narazil a nevím jak si s tím poradit. Chtěl jsem pomocí funkcí show a hide schovávat sudé řádky tabulky, ale jak se zdá, někde je chyba, po zobrazení se předtím schované řádky chovají jako plovoucí a nechce se jim vrátit zpět do tabulky. Pomohl by prosím někdo? Jak to vypadá se můžete podívat tady: http://www.sdruzeni.kvetakov.net/pokus.php

Ondra

Mám otázku mám událost, které se týká divu má se provést efekt slide který mi beze všeho funguje, avšak se jedná o to že má jít na .klick function jenže na jiný div.asi tak kliknu na div A ale slide se mi provede u divu B.Děkuji za případnou odpověď.

maaat

serial je super. dik za nej. je to idealni vstup do krasy jQuery!

Schultz

Ahoj, seriál se mi líbí, vše se mi jeví jasné, jen to budu zkoušet později. Snad by mne jen zajímalo, jaký je správný zápis do atributu ?href? u odkazu. Jestli to dobře chápu, tak veškeré akce vychází ze skriptu. Zatím to píšu z lenosti hledat. Kdo ví, možná na to přijdu hned v dalším článku :-)

FiS

Zdravím. Chtěl bych se zeptat na tu funkci click. Pochopil sem jí úplně celou a zkoušel sem to udělat naopak. Že když kliknu na text tak se zobrazí jiný text ale bohužel mi to nefunguje. $(document).re­ady(function(){
$(?#schovavac?)­.click(functi­on(){
$(?#muj_odsta­vec?).toggle();
});
}); ahoj můžete mi poradit ?? nas.s@seznam.cz díky :-)

FiS

se tu nějak nezobrazujou html kody pls můžete mi to poslat na meil??

micron

Tak tohle je dar z nebes, po dlouhý době jsem se fakt nevyhnul nějakýmu JS a tak si říkám než to s?ní , aby to šlo v každým browseru, zkusíš nějakej framework. Volba padla na jQuery a? sehnat nějaký povídání ? tady je úplně nejlepší! Musím říct, že už jenom to prvotní koumání se vyplatilo, za tu dobu co sem vstřebával jQuery, bych to možná ani neodladil.

Zap

Hezký seriál, narazil jsem na něj náhodou a ihned se mi jQuery zalíbilo. Dík ;-)

Mirek

Zdravim,

chtěl bych se zeptat zda je možné pomocí jQuery neustále načítat obsah z nějakého skriptu, nemělo by to být vázáno na nějakou akci jako je klik nebo tak ale prostě neustále nebo v nějakém časovém intervalu?? a popř. pokud poradíte jak?

Díky moc

Ginny

Tohle je ten nejlepší seriál, co jsem kdy viděl! Krásně stručné, přehledné, hlavně dobře strukturované a nezahltíš člověka moc velkým množstvím informací. Jen tak dále, jQuery jsem se dřív bál používat, ale teď už vůbec nemusím :)

Podbi

Pěkný seriál. Jasný a přehledný. Jen tak dál !

Joelp

Zjistil jsem, že se nejlíp naučím nové věci od lidí, kteří o programování vědí mnohem méně než já (z toho důvodu si ponechám stranou připomínky :) ). Dobrý úvod do jQuery. Teď už ta knihovna v mém systému nebude v podstatě jen jednoúčelovka :)

BTW: zvýrazňování raději řeším přímo pomocí CSS. Je to ještě elegantnější než s jQuery, a navíc to funguje i s vypnutým JavaScriptem.

Adam

Seriál je povedený, kombinace příkladů se živými ukázkami je velmi efektní pro začátek. Brzy jQuery budu aplikovat na své weby.

Ajax

Musim jen rict: DIKY!! Po dvou dnech velmi neuspesneho boje s JS jsem zacal pouzivat jQuery a najednou: jde to! :) DIKY DIKY DIKY MOC!!

niobi

Ahoj, s jQuery jsem chtel zacit uz dlouho, tento navod je skvelym uvodem do teto problematiky.. Dekuji za nej

Peter

Som spokojny na zaciatok to bolo super? Diky moc :))

Hans

Jen stručně: ?Díky, kámo!!!? :-)

Hynek

Ahoj, chci poděkovat za tento článek velmi mi pomohl! Skvělá práce díky.

Louski

Díky za tento výstižný tutorial, moc mi pomohl.

Martin O

Taky děkuji za vysvětlující návody. Skvělá práce.

jan Ocel

Děkuji za super návody.

Marto

Ahoj, diky za tutorial. JQ je uplne perfektni, konkretne u tohoto prikladu: jde napr. o zjistovani souradnic x, y mysi. Za pomoci klasickeho javascriptu to byl docela problem, ruzne prohlizece vracely ruzne hodnoty a u nekterych to byl docela problem. JQ toto resi a uplne elegantne.

manas

dobrej typ, pomohlo.. dik

luki

priklad 1:

lepsi variant je: var el=$(?#muj_od­stavec?); el.mouseover(fun­ction(){
el.css(?border?,?1px solid red?); }).mouseout(fun­ction(){
el.css(?border?,?no­ne?); });

v tvem priklade se vytvori 4krat zbytecne jquery object

Laky

Ola, parádní web, přímo ukázkový. Plný užitečného materiálu, který mi velmi pomohl zorientovat se v jQuery, i přes to, že dříve JS nebyl zrovna můj kamarád. Zvláštní pochvalu uděluji za Adamovu zkoušečku, výborně provedené z Vaší i ?Adamovy? strany. Jediná výtka, kterou bych si dovolil zmínit: Je při nejmenším slušné, u odkazů přidávat parametr target=?_blank?. Čili otevírání odkazu v novém panelu prohlížeče. Je to jen upozornění na tento malý nedostatek, protože určitě nejen mě trošku vadí, že po editaci Vašeho kódu ve zkoušečce (testování atd.), pak člověk musí 10× zmáčknout tlačítko Zpět, aby se dostal zpět na Vaši stránku. Mnohem jednodušší, rychlejší a pohodlnější je prostě zavřít záložku. Celkově bych web shrnul jako velmi užitečný a chtěl bych poděkovat za mnoho zkušeností, které jste mi předal. ;-)

Lukáš

Jasný a výstižný. Moc díky !!!

Martin

Vivat!!!!!!!!!


Archiv