• Artykuł

          

Samouczek jQuery - Obsługa zdarzeń  Udostępnij na: Facebook

Autor: Aurelia Tokarek

Opublikowano: 2012-02-23

W poprzednim odcinku poznaliśmy podstawowe zdarzenia i sposób ich obsługi w jQuery. Teraz nadszedł czas na poszerzenie naszej wiedzy i wykorzystanie dodatkowych informacji dostarczanych w tej bibliotece.

Przed wykonaniem zadań powinieneś wiedzieć:

Po wykonaniu zadań nauczysz się:

  • wyświetlać koordynaty X i Y kursora,
  • zwijać elementy,
  • uniemożliwić pisanie w polu textbox,
  • wyświetlać elementy strony w alertach.

Implementacja

W przeglądarce Internet Explorer 9 otwórz stronę internetową jTest.html, znajdującą się w pliku JavaScript.zip. Jeśli nie możesz pobrać pliku, to zobacz Jak przygotować stronę samouczka. W linijce przed elementem </body> umieść następujący kod:

<script type="text/javascript"  src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>

Naszym zadaniem będzie poznanie i wykorzystanie dodatkowych możliwości oferowanych przez bibliotekę jQuery.  

Rys. 1. Koordynaty po kliknięciu w dowolnym miejscu na stronie.

Wyświetlanie koordynat X i Y

W poprzednim odcinku poznaliśmy najprostszą formę wykorzystania metody click():

.click(funkObslugi(obiektyZdarzenia))

Obiekt obiektyZdarzenia przechowuje dodatkowe informacje związane m.in. z koordynatami X i Y kursora. Są one przechowywane odpowiednio we właściwości pageX i pageY  tego obiektu.

W tym zadaniu, po kliknięciu na dowolny element na stronie w elemencie o id=pokaz wyświetlimy koordynaty X i Y pozycji kursora na stronie.

  1. W przeglądarce Internet Explorer 9 otwórz stronę internetową jTest, znajdującą się w pliku JavaScript.zip.
  2. Wciśnij klawisz F12 lub wybierz Narzędzia -> F12 Narzędzia deweloperskie.
  3. Kliknij w oknie na zakładkę Script (oznaczoną 1 na Rys. 2.), a w wierszu, w prawym dolnym rogu (oznaczonym 2 na Rys. 2.), wpisz:
$('*').click(function(e){ $('#pokaz').text('x= '+e.pageX+', y= '+e.pageY); })

Rys. .2. Narzędzia programistyczne do jQuery w Internet Explorer 9.

  1. Wciśnij Enter.
  2. Kliknij w dowolnym miejscu na stronie (Rys. 1.).
  3. Odśwież stronę.
  4. Teraz wpisz:
$('*').bind('mousemove',function(event){$('#pokaz').text('x= '+event.pageX+', y= '+event.pageY);})
  1. Wciśnij Enter.
  2. Porusz myszką na stronie.

Zwijanie elementów za pomocą toggle

Jednym z ciekawszych efektów, które możemy w prosty sposób użyć w naszej aplikacji jest naprzemienne ukrywanie i wyświetlanie elementu po kliknięciu na inny. Do tego celu służy polecenie toogle(). Jeśli początkowy element będzie ukryty, zostanie wyświetlony, jeżeli będzie wyświetlony, zostanie ukryty. Funkcja toggle(), bez podania parametrów, takich jak fast i slow, jest metodą przełączania widoczności. Po podaniu tych parametrów staje się animacją.

  1. Odśwież stronę.
  2. W oknie narzędzi deweloperskich w prawym dolnym rogu wpisz:
$('p').click(function(){$('li').toggle();})
  1. Wciśnij Enter.
  2. Kliknij na akapit.
  3. Powinny się zwinąć wszystkie wypunktowane elementy.
  4. Kliknij ponownie, na któryś z akapitów, aby elementy wypunktowane pojawiły się ponownie.
  5. Odśwież stronę.

Zablokowanie możliwości pisania w polu tekstowym

Po wybraniu na stronie, takich elementów jak <input>, <select>, czy łączy <a>, wywoływana jest metoda focus(). Jeśli chcemy zablokować możliwość wpisywania tekstu, możemy wywołać metodę blur() na wybranym elemencie.

W tym zadaniu zablokujemy możliwość wpisywania treści w polu tekstowym.

  1. Odśwież stronę.
  2. W oknie narzędzi deweloperskich w prawym dolnym rogu wpisz:
$("input[type=text]").focus(function(){$(this).blur();})
  1. Spróbuj coś napisać w polu tekstowym.

Jednokrotne wykonywanie określonego działania

Jeśli w naszej aplikacji użytkownik może wykonać jakąś operację tylko raz, to zamiast metody bind() możemy wykorzystać metodę one(). Jej składnia jest identyczna z bind().

W tym zadaniu, wyświetlimy zawartość akapitu po kliknięciu, ale tylko jednokrotnie. Przy kolejnym kliknięciu funkcja już nie zadziała.

  1. Odśwież stronę.
  2. W oknie narzędzi deweloperskich w prawym dolnym rogu wpisz:
$("p").one("click",function(){alert($(this).text());})
  1. Wciśnij Enter.
  2. Kliknij na paragraf.
  3. Powinien wyświetlić się alert z zawartością danego paragrafu (Rys. 3.).
  4. Zamknij alert.
  5. Kliknij raz jeszcze na ten sam paragraf. Nic nie powinno się wydarzyć.
  6. Możesz sprawdzić, jak zachowuje się reszta akapitów.

Rys. 3. Zawartość akapitu wyświetlona w alercie.

Podsumowanie

W tym artykule nauczyliśmy się sprawdzać położenie kursora myszy na naszej stronie internetowej, zwijać i rozwijać elementy. Wiemy także, jak uniemożliwić użytkownikowi pisanie w polu tekstowym oraz, jak wyświetlić poszczególny element strony w alercie.

W kolejnym artykule nauczymy się animować elementy za pomocą jQuery.