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>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>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>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>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>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>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>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>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.
I tak najlepszą częścią artykułu są linki „DEMO”. 🙂
Ś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
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)
A jak zrobić by pierwsza stronka na starcie się sama załadowała?
Nieważne, podstawy się kłaniają. Dziękuję za ten tutorialik.