JavaScript

Kurs jQuery – cz.5, obsługa zdarzeń za pomocą biblioteki jQuery

Jak już nie raz wspominaliśmy, główną zaletą stosowania jQuery jest interaktywność stron www, które tworzymy. Jeśli użytkownicy mogą naprawdę wejść w interakcję z witryną, to nasze dzieła przestają mieć czysto statyczny charakter. Owe interakcje są dość skomplikowane i składają się z wielu elementów, ale można powiedzieć, że w fundamentach sprawa sprowadza się do obsługi zdarzeń.

To czym zajmiemy się w tym artykule to wprowadzenie do wydarzeń w przypadku posługiwania się biblioteką jQuery. Natomiast jeśli ktoś chciałby poszerzyć swoją wiedzę to zapraszamy tu. Od razu podam też link do odpowiedniej strony dokumentacji, na której znajdziecie listę wszystkich zdarzeń obsługiwanych przez jQuery.

Wszystko co robimy przy użyciu przeglądarki wiąże się z jakimiś zdarzeniami, których zajście jest zgłaszane przez nasze oprogramowanie do surfowania po sieci. Nawet kiedy kursor „wisi” nad (z pozoru) pustym fragmentem strony zachodzi zdarzenie mouseover dla elementu body. Kiedy klikamy, wciskamy klawisze klawiatury, uzupełniamy formularze, zawsze wtedy dochodzi do zgłoszenia jakiś zdarzeń. Zgłoszeniem nazywamy poinformowanie przeglądarki o zaistnieniu zdarzenia.

W podstawowym zarysie proces wykorzystywania zdarzeń podczas posługiwania się biblioteką jQuery będzie wyglądał następująco:

$(document).ready(function(){
$('#przyklad').click(function(){
$('#przyklad ul').slideUp();
});
});

Tak naprawdę robimy trzy rzeczy. Po pierwsze wyławiamy obiekt DOM, który interesuje nas z punktu widzenia tworzenia interakcji i przypisujemy mu zdarzenie. Po drugie dodajemy anonimową funkcję jako argument w wywołaniu funkcji click. Po trzecie znowu tworzymy obiekt jQuery i przypisujemy mu jakieś operacje.

Prześledźmy pewien przykład. Przypuśćmy, że na naszej stronie znajduje się lista z linkami do szczegółowych ustawień konta taka jak ta poniżej:

<ul class=”items”>
    <li><a href=”#”>Lorem ipsum dolor sit ament</a></li>
    <li><a href=”#”>Duis elementum placerat </a></li>
    <li><a href=”#”>Praesent adipiscing</a></li>
    <li><a href=”#”>Adipiscing</a></li>
</ul>

Chcielibyśmy aby pojawiała się ona dopiero po kliknięciu linku o klasie konto tak abyśmy mogli zaoszczędzić miejsce na stronie.

Od początku:

$(document).ready(function(){
$('.konto').click(function(){

});
});

W tym momencie podaliśmy do zdarzenia click funkcję anonimową jako argument. Teraz musimy obmyślić jak wyświetlić listę o klasie items.

$(document).ready(function(){
$('.konto').click(function(){
$('.items').fadeIn(500);
});//click event
});//document ready

Powyższy kod sprawi, że po kliknięciu linku o klasie konto, pojawi się lista o klasie items. Dzięki temu rozwiązaniu nasz użytkownik będzie mógł zobaczyć listę dopiero po kliknięciu w odpowiednie miejsce, a my zyskamy cenną przestrzeń na stronie :)

Skoro już doszliśmy do tego momentu to pewnie zastanawiacie się co zrobić kiedy użytkownik nie będzie chciał już przeglądać listy items. Popularnym rozwiązaniem jest wyłączanie wyświetlania drop down’ów kiedy użytkownik opuści pole rozwijanej listy. Zrobimy tak samo. Kiedy kursor myszy opuści obszar elementu .menu zawierającego w sobie rozwijaną listę, po prostu zastosujemy .fadeOut();

$(document).ready(function(){
    $('.konto').click(function(){
        $('.items').fadeIn(500);
    });//click event
    $('.menu').mouseleave(function(){
        $('.items').fadeOut();
    });// mouseleave
});//document ready

W ten oto sposób otrzymujemy proste rozwijane menu dzięki jedynie kliku linijkom kodu JavaScript. Jest jeszcze tylko jedna rzecz, którą powinniśmy zrobić aby zakończyć ten przykład:

$(document).ready(function(event){
    $('.konto').click(function(){
        $('.items').fadeIn(500);
        event.preventDefault();
    });//click event
    $('.menu').mouseleave(function(){
        $('.items').fadeOut();
    });//mouseleave
});//document ready

Dodaliśmy do kodu fragment event.preventDefault(); Sprawi on że kliknięcie linka nie wywoła domyślnej akcji. Alternatywnie (nie do końca, alternatywnie, ale dla uproszczenia tak to nazwijmy) możemy w takich przypadkach używać return false; ale są istotne powody by dobrze rozumieć i rozróżniać oba przypadki. Jeśli chcemy używać return false; to używajmy w go w przypadkach, gdy rzeczywiście  chcemy zapobiec propagacji.

Reszta tego przykładu to już „tylko” kwestia stylów CSS, które znajdziecie poniżej.

Warto jednak wspomnieć, że przykład z rozwijaną listą jest jedynie demonstracyjny. Linkowanie całej biblioteki jQuery do strony tylko po to żeby zrobić coś takiego jest… absurdalne :)

Cały kod przykładu:

<!DOCTYPE html>
<html lang="pl" dir="ltr">
<head>
<title>TYTUŁ STRONY</title>

<!-- meta -->
<meta charset='utf-8'>

<style type="text/css">
    .wrap {width:50%; background:#efefef; margin:20% auto 0; padding:20px; clear:both;}
    .menu {width:300px; background:#ccc; margin:20px; padding:20px;}
    .items {display:none;}
</style>

</head>
<body>

<div class="wrap">

<div class="menu">

<a href="#" class="konto">Ustawienia konta</a>

<ul class="items">
    <li><a href="#">Lorem ipsum dolor sit ament</a></li>
    <li><a href="#">Duis elementum placerat </a></li>
    <li><a href="#">Praesent adipiscing</a></li>
    <li><a href="#">Adipiscing</a></li>
</ul>

</div>

</div>

<!-- js -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script type="text/j-avascript" >
    $(document).ready(function(event){
        $('.konto').click(function(){
            $('.items').fadeIn(500);
            event.preventDefault();
        });//click event
        $('.menu').mouseleave(function(){
            $('.items').fadeOut();
        });//mouseleave
    });//document ready
</script>

</body>
</html>

Ciąg dalszy nastąpi.

komentarzy 7

  • Awatar
    Michał Załęcki

    16 maja 2013 18:48

    Warto poczytać o metodzie .on(), gdyż obsługuję wszystkie wyżej omawiane zdarzenia, a można zastosować ją również w takich bibliotekach jak Zepto.js, przez co kod staje się bardziej elastyczny.

    Odpowiedz
    • Awatar
      Mr.Mr

      16 maja 2013 19:59

      Słusznie. W następnym artykule będzie bardziej rozbudowany przykład związany ze zdarzeniami.

      Odpowiedz
  • Awatar
    Mr.Mr

    5 czerwca 2013 19:53

    jeszcze tak mi sie przypomniało podczas przygotowywania kolejnego artykułu (lepiej późno niż wcale), że w wypadku powyżej najlepiej by było ukryć elemento klasie .items za pomocą js – to daje fallback gdyby ktoś nie miał js włączonego

    Odpowiedz
  • Awatar
    Dariusz "weogrim" Chowański

    19 sierpnia 2013 19:06

    Jedna uwaga do kursu. JQuery praktycznie całkowicie odchodzi już od metod takich jak click, mouseon itp. Nawet bind i live zostało zastąpione przez on(). Możliwe, że niedługo zostaną całkowicie usunięte z biblioteki. Tu jest to dokładniej opisane http://stackoverflow.com/questions/8065305/whats-the-difference-between-on-and-live-or-bind

    Odpowiedz
  • Awatar
    gadacz

    6 marca 2014 19:54

    Witajcie, przeglądałem ten „kurs” jeśli można to tak nazwać i
    zdecydowanie muszę przyznać, że kursem nie powinien się nazywać.
    Rozumiem, że jest to za darmo, że autor obiecywał wpisy co tydzień, a
    tutaj cisza.
    Jeśli chodzi o uwagi moje to:
    Wypadałoby każdy przykład poświadczyć „żywym” kodem, który choćby można zobaczyć na jsfiddle.net (kopiowany kod z Waszej strony zawiera zbędne znaki, które robią „śmietnik” w kodzie i źle to wygląda”.
    O ile nic nie pominąłem to przez te sześć lekcji, które zostały tutaj przedstawione, to są aż dwa „gotowce” do zerknięcia.
    Pisaliście również o sukcesach odnośnie kursu WordPress i czegoś jeszcze, ale niestety ta wiedza jest bardzo bardzo skromna.
    No chyba, że piszecie wyłącznie dla miesięcznych UU i ew. zysków z reklam,
    co jest poniekąd zrozumiałe, bo z czegoś utrzymać się musicie, ale
    skoro przekazujecie jakąś wiedzę, to wypadałoby zrobić to porządnie.
    Dziękuję za uwagę i liczę na poprawę, a może kurs odżyje? Czy Autor już
    nie ma zamiaru pisać?

    Odpowiedz
  • Awatar
    gadacz

    6 marca 2014 19:59

    ps. tutaj:

    jest błąd, ponownie jak wspomniał kolega w poprzednim wpisie,
    nie został poprawiony.
    Usuńcie myślink z J-AVASCRIPT.

    Odpowiedz
  • Awatar
    kubek

    14 stycznia 2015 11:28

    No i ciąg dalszy już nie nastąpił. A bardzo szkoda, bo kurs zapowiadał się bardzo obiecująco. Można się nauczyć w łatwy sposób podstawy jQuery i rozwijać każde zagadnienie we własnym zakresie.

    Może jeszcze się doczekamy kontynuacji ;)

    Odpowiedz

Zostaw odpowiedź