jQuery #2 – Zdarzenia i animacje na stronie

Sty 02
2012

Po zapoznaniu się ze składnią i podstawowymi funkcjami jQuery możemy przystąpić do stworzenia animacji oraz nauki obsługi zdarzeń. Postaramy się także napisać skrypt, który po kliknięciu w odnośnik rozsunie tekst znajdujący się w znaczniku obok.

 

 

 

Zdarzenia

Pod zdarzeniami rozumie się wszelkie operacje użytkownika na stronie. Przykładem zdarzenia jest kliknięcie linku, przejechaniem kursorem nad divem, czy wysłanie formularza. Stwórzmy przykładowy dokument HTML z divem i linkiem. Po kliknięciu w link zmienimy kolor tekstu w divie.

<html>
<head>
	<title>Kurs jQuery</title>
	<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
	<script type="text/javascript">
	jQuery(document).ready(function() {
		$("#link").click(function() {
			$("#ajdi").css("color", "red");
		});
	});
	</script>
</head>
 
<body>
	<a href="#" id="link">Kliknij mnie!</a>
	<div id="ajdi" style="width:200px;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumyeirmod tempor invidunt ut la</div>
</body>
</html>

DEMO

Jak widać nie jest to nic skomplikowanego. Podobnie korzysta się z innych zdarzeń. Sprawmy, by po przejechaniu kursorem nad divem tekst zmienił kolor na swój pierwotny.

<html>
<head>
	<title>Kurs jQuery</title>
	<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
	<script type="text/javascript">
	jQuery(document).ready(function() {
		$("#link").click(function() {
			$("#ajdi").css("color", "red");
		});
 
		$("#ajdi").mouseover(function() {
			$(this).css("color", "black");
		});
	});
	</script>
</head>
 
<body>
	<a href="#" id="link">Kliknij mnie!</a><br /><br /><br /><br />
	<div id="ajdi" style="width:200px;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumyeirmod tempor invidunt ut la</div>
</body>
</html>

DEMO

Jako mały bonus zastosowałem tutaj odwołanie do selektora poprzez this. this w naszym kodzie jest selektorem zwracanym przez zdarzenie mouseover(). Jest on bardzo przydatny w funkcjach, gdzie operujemy na bliżej nieokreślonych elementach, do których odwołanie w tradycyjny sposób byłoby utrudnione, bądź niemożliwe.

W skrócie – this zwraca selektor, na którym aktualnie operujemy przy pomocy zdarzeń.

Przyjrzyjmy się jeszcze jednemu przykładowi z użyciem odwołania this.

<html>
<head>
	<title>Kurs jQuery</title>
	<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
	<script type="text/javascript">
	jQuery(document).ready(function() {
		$(".klasa").mouseover(function() {
			$(this).css("background-color", "green");
		}).mouseout(function() {
			$(this).css("background-color", "red");
		});
	});
	</script>
	<style type="text/css">
	.klasa {
		display: block;
		float: left;
		background-color: blue;
		border: 1px solid black;
		width: 200px;
		height: 200px;
	}
	</style>
</head>
 
<body>
	<div class="klasa"></div>
	<div class="klasa"></div>
	<div class="klasa"></div>
	<div class="klasa"></div>
	<div class="klasa"></div>
	<div class="klasa"></div>
	<div class="klasa"></div>
	<div class="klasa"></div>
	<div class="klasa"></div>
	<div class="klasa"></div>
	<div class="klasa"></div>
	<div class="klasa"></div>
	<div class="klasa"></div>
	<div class="klasa"></div>
	<div class="klasa"></div>
</body>
</html>

DEMO

Na stronie zostało umieszczonych 15 kwadratów o wymiarach 200px x 200px. Standardowo mają niebieskie tło. Po najechaniu na jakiś kwadrat $(„.klasa”).mouseover(function() {  zmieniamy jego kolor na zielony $(this).css(„background-color”, „green”). Po usunięciu kursora z kwadrata }).mouseout(function() { jego kolor zmieniany jest na czerwony $(this).css(„background-color”, „red”).

W ramach zadania dodatkowego spróbuj napisać skrypt, który po kliknięciu w kwadrat zmieni jego kolor.

Animacje

Na początek stwórzmy dokument podobny do tego z 1 przykładu. Umieśćmy w nim ukrytego diva style=”display:none;” z przykładową treścią i spróbujmy wyświetlić jego zawartość przy pomocy animacji po kliknięciu linka.

<html>
<head>
	<title>Kurs jQuery #2 example 4</title>
	<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
	<script type="text/javascript">
	jQuery(document).ready(function() {
		$("#link").click(function() {
			$("#ajdi").show("slow");
		});
	});
	</script>
</head>
 
<body>
	<a href="#" id="link">Kliknij mnie!</a>
	<div id="ajdi" style="width:200px;display:none;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diamvoluptua. At vero eos et accusam et justo duo dolores et</div>
</body>
</html>

DEMO

Za pokazywanie elementów z animacją jak można zauważyć odpowiada funkcja show() z parametrem slow, fast, bądź wartością numeryczną podaną w ms w, trakcie których ma wykonać się animacja.

W adekwatny sposób możemy ukrywać różne elementy.

<html>
<head>
	<title>Kurs jQuery #2 example 5</title>
	<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
	<script type="text/javascript">
	jQuery(document).ready(function() {
		$("#link").click(function() {
			$("#ajdi").show("slow");
		});
 
		$("#link2").click(function() {
			$("#ajdi").hide("slow");
		});
	});
	</script>
</head>
 
<body>
	<a href="#" id="link">Pokaz tekst</a> | <a href="#" id="link2">Schowaj tekst</a>
	<div id="ajdi" style="width:200px;display:none;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diamvoluptua. At vero eos et accusam et justo duo dolores et</div>
</body>
</html>

DEMO

hide() jest bliźniaczą funkcją do show() z tą różnicą, że ukrywa ona element, zamiast go pokazywać.

Do dyspozycji mamy o wiele więcej efektów, które różnią się między sobą w sposobie przeprowadzania animacji. Warto także zaznaczyć, że samych zdarzeń jest jeszcze więcej. Polecam zapoznać się całą dokumentacja jQuery, jest ona bardzo przejrzyście napisana, a do każdej funkcji dołączone są przykładowe kody.

<html>
<head>
	<title>Kurs jQuery #2 example 6</title>
	<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
	<script type="text/javascript">
	jQuery(document).ready(function() {
		$("#link").click(function() {
			$("#ajdi").slideDown("slow");
		});
 
		$("#link2").click(function() {
			$("#ajdi").slideUp("slow");
		});
	});
	</script>
</head>
 
<body>
	<a href="#" id="link">Pokaz tekst</a> | <a href="#" id="link2">Schowaj tekst</a>
	<div id="ajdi" style="width:200px;display:none;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diamvoluptua. At vero eos et accusam et justo duo dolores et</div>
</body>
</html>

DEMO

slideDown() – wysuwa tekst od góry do dołu,

slideUp – ukrywa tekst od dołu do góry.

<html>
<head>
	<title>Kurs jQuery #2 example 7</title>
	<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
	<script type="text/javascript">
	jQuery(document).ready(function() {
		$("#link").click(function() {
			$("#ajdi").animate({"left": "50%"}, "slow");
		});
 
		$("#link2").click(function() {
			$("#ajdi").animate({"left": "0%"}, "slow");
		});
	});
	</script>
</head>
 
<body>
	<a href="#" id="link">W prawo</a> | <a href="#" id="link2">W lewo</a>
	<div id="ajdi" style="width:200px; position:absolute;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diamvoluptua. At vero eos et accusam et justo duo dolores et</div>
</body>
</html>

DEMO

animate() – płynne przejścia w stylach CSS. Przejścia nie dotyczą niestety zmiany koloru tekstu i tła.

 

 Szablon dynamicznie ładujący treść do środka

Potrafiąc już obsługiwać podstawowe zdarzenia oraz znając sposób, w jaki wprawić tekst w ruch możemy pokusić się o stworzenie pseudo szablonu z dynamicznie ładującym treść menu.

<html>
<head>
	<title>Kurs jQuery #2 example 8</title>
	<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
	<script type="text/javascript">
	jQuery(document).ready(function() {
		$("a.menu").click(function() {
			var rel = $(this).attr("rel");
			$('.tresc').slideUp('slow');
			$("div#"+rel).slideDown('slow');
		});
	});
	</script>
	<style type="text/css">
	.tresc {
		display: none;
		width: 400px;
		text-align: justify;
	}
	</style>
</head>
 
<body>
	<a href="#" class="menu" rel="home">Home</a> | <a href="#" class="menu" rel="o-nas">O nas</a> | <a href="#" class="menu" rel="kontakt">Kontakt</a><br /><br />
 
	<div class="tresc" id="home">
		<h2>Home</h2>
		<p>
		Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diamvoluptua. At vero eos et accusam et justo duo dolores et
		</p>
	</div>
 
	<div class="tresc" id="o-nas">
		<h2>O nas</h2>
		<p>
		Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diamvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diamvoluptua. At
		</p>
	</div>
 
	<div class="tresc" id="kontakt">
		<h2>Kontakt</h2>
		<p>
		Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diamvolupt
		</p>
	</div>
</body>
</html>

DEMO

Kod może nie jest zbyt długi, ale na pewno jest wart omówienia.

Na początku tworzymy menu w HTMLu. Każdemu odnośnikowi nadajemy klasę „menu” oraz atrybut „rel” z wartością odpowiadającą przeznaczeniu odnośnika. Wartość atrybutu „rel” odpowiada identyfikatorowi diva, który chcemy wyświetlić po kliknięciu w odnośnik.

Każdy z divów ma taką samą klasę „tresc” oraz adekwatny do swojej zawartości identyfikator.

Skrypt wyłapuje kliknięcia w odsyłacze. Po kliknięciu na link pobiera wartość atrybutu „rel” var rel = $(this).attr(„rel”), po czym chowa wszystkie aktywne divy z klasą „tresc$(‚.tresc’).slideUp(‚slow’), a następnie pokazuje div, którego identyfikator jest równy z wartością atrybutu „rel” klikniętego linka $(„div#”+rel).slideDown(‚slow’).

 

Krótkie podsumowanie

Jak pokazałem zdarzenia, czy też animacja nie są rzeczą trudną do okiełznania. Nauczyliśmy się między innymi wychwytywać kliknięcia użytkownika oraz wprawiać w ruch elementy na stronie. W następnej części kursu poznamy technologie AJAX oraz nauczymy się obsługiwać formularze.

5 komentarzy w “jQuery #2 – Zdarzenia i animacje na stronie”

  1. Julian Pszczołowski napisał/a:

    I tak najlepszą częścią artykułu są linki „DEMO”. 🙂

  2. Damian napisał/a:

    Świetnie to przygotowałeś! Interesuje mnie jedna rzecz jeszcze.. W ostatnim przykładzie po kliknięcie na link, treść ładnie się pokazuje a co zrobić żeby po kliknięciu na ten sam link treść się schowała a nie schowała i wyświetliła jeszcze raz. Dokładniej mówiąc chodzi mi funkcję przycisku Schowaj/pokaż kod

    • Komeniusz napisał/a:

      Dziękuję za komentarz. Rozumiem, że chodzi Ci o link, który po pierwszym kliknięciu pokaże kod, a po drugim kliknięciu na ten sam link schowa, wcześniej wysunięty tekst.

      W pierwszej kolejności powinieneś stworzyć oczywiście link i div z tekstem.

      Teraz w kodzie JS pobierasz informację, czy tekst jest pokazany. Jeśli jest, to kliknięcie na link spowoduje jego schowanie. W przeciwnym wypadku tekst zostanie wysunięty.

      Wykorzystamy tutaj zdarzenie $.click, do pobrania statusu naszego diva-kontenera $.css(‚display’). Następnie, aby całość ładnie wyglądała $.SlideDown/$.SlideUp, bądź $.show/$.hide,

      Mam nadzieje, że poniższy kod będzie zrozumiały
      http://blog.grabowski.ostrowwlkp.pl/demo/jquery/2/pokazschowajkod.html
      (Wyświetl źródło strony w przeglądarce, aby przejrzeć skrypt)

  3. MST napisał/a:

    A jak zrobić by pierwsza stronka na starcie się sama załadowała?

  4. MST napisał/a:

    Nieważne, podstawy się kłaniają. Dziękuję za ten tutorialik.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *