Dawid Pośliński » menu http://blog.poslinski.net Code is poetry. Mon, 06 Sep 2010 18:23:14 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 jQuery: find() http://blog.poslinski.net/jquery-find/ http://blog.poslinski.net/jquery-find/#comments Sun, 30 Nov 2008 19:03:27 +0000 Dawid Pośliński http://blog.poslinski.net/?p=35 jQuery to świetny framework JavaScript. Jeżeli jeszcze nie mieliście okazji z nim pracować, mam nadzieje, że poniższa publikacja, zachęci Was, do skorzystania z tego właśnie rozwiązania. Cechuje go bowiem szybkość, optymalizacja kodu, mająca na celu dostosowanie go pod jak największą liczbę przeglądarek, a także, co pewnie wielu zainteresuje najbardziej – prostota tworzenia złożonych rozwiązań.

W dzisiejszym artykule skupimy się na bardzo przydatnej metodzie find().

Jeżeli nie miałeś wcześniej do czynienia z tym frameworkiem, zachęcam do zapoznania się z podstawami selektorów, korzystając z oficjalnego API na temat selectorów, lub też z przygotowanego przez Bartosza Medonia kursu podstaw jQuery. Ta wiedza znacznie ułatwi pojmowanie zamieszczonych tutaj rozwiązań.

Najlepiej zajmijmy się jakimś konkretnym przykładem zastosowania tej metody. Na większości stron, jednym z podstawowych elementów służących do nawigacji jest menu. Spróbujemy stworzyć własne animowane menu, korzystając z minimalnej ilości elementów i działające pod każdą przeglądarka obsługującą JavaScript.

1. Przygotowanie elementów

Zacznijmy od stworzenia pustego dokumentu html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu</title>
</head>
<body>
</body>
</html>

Następnie pobieramy najnowszą wersję jQuery z oficjalnej strony projektu ( production ) i kopiujemy do folderu z naszym plikiem html.

Wewnątrz tego dokumentu, przydałaby się jakaś przykładowa treść, oraz nasze menu. Wykorzystajmy do tego tagi div oraz span. Oczywiście pozycje w naszym menu, powinny być linkami, zatem umieścimy je w bloku a. Całość umieścimy wewnątrz bloku div o id=menu. Dodany również plik z jQuery wykorzystując tag script. Całość powinna wyglądać mniej więcej tak:

<div id="menu">
<div>
<a href="#">#1 Menu</a>
<span>
<a href="#">#1.1 Menu</a>
<a href="#">#1.2 Menu</a>
<a href="#">#1.3 Menu</a>
</span>
</div>
<div>
<a href="#">#2 Menu</a>
<span>
<a href="#">#2.1 Menu</a>
<a href="#">#2.2 Menu</a>
<a href="#">#2.3 Menu</a>
<a href="#">#2.4 Menu</a>
<a href="#">#2.5 Menu</a>
</span>
</div>
<div>
<a href="#">#3 Menu</a>
<span>
<a href="#">#3.1 Menu</a>
<a href="#">#3.2 Menu</a>
<a href="#">#3.3 Menu</a>
<a href="#">#3.4 Menu</a>
</span>
</div>
<div>
<a href="#">#4 Menu</a>
<span>
<a href="#">#4.1 Menu</a>
<a href="#">#4.2 Menu</a>
</span>
</div>
</div><!-- end #menu -->
Jakaś tam przykładowa treść. Jakaś tam przykładowa treść.
Jakaś tam przykładowa treść. Jakaś tam przykładowa treść.
Jakaś tam przykładowa treść. Jakaś tam przykładowa treść.
Jakaś tam przykładowa treść. Jakaś tam przykładowa treść.
Jakaś tam przykładowa treść. Jakaś tam przykładowa treść.
<script type="text/javascript" src="jquery.js"></script>

Specjalnie umieściłem wiele pozycji w menu, aby pokazać jak łatwym, będzie odwołanie się do wielu z nich z poziomu jQuery, w zależności od tego, na który blok najedziemy myszką.

2. Zdefiniowanie wyglądu menu (css)

W tym dziale, zdefiniujemy wygląd wykorzystanych w pliku html, bloków kodu. Ja przygotowałem sobie, następujący fragment kodu ze stylem, umieszczony w sekcji head:

<style type="text/css">
<!--
* { margin: 0px; padding: 0px; }
a { text-decoration: none; font: 20px Georgia, "Times New Roman", Times, serif; }
html, body { margin: 10px; }

#menu { top: 0px; float: left; width: 100%; }
#menu div { position: relative; float: left; }
#menu div a:active, #menu div a:link, #menu div a:visited { display: block; position: relative; vertical-align: middle; background: #ccc; color: #fff; padding: 5px 10px; width: 150px; }
#menu div a:hover { background: #999; }
#menu div span { display: none;  position: absolute; top: 100%; left: 0; float: none; }
#menu div span a:active, #menu div span a:link, #menu div span a:visited { position: relative; display: block; float: left; top: 0px; background: #ddd; color: #fff; padding: 5px 10px; width: 150px; }
#menu div span a:hover { background: #999; }
-->
</style>

W naszym przykładzie tworzymy tylko proste dwupoziomowe menu, ale nic nie stoi na przeszkodzie, aby zmodyfikować je i dostosować do dowolnej ilości poziomów.

Jeśli już jesteśmy przy tej kwestii, warto również zapoznać się z frameworkiem do tworzenia css’owego menu.

3. Gwóźdź programu – find.

Tym oto sposobem, mamy przygotowaną całą stronę do implementacji kodu JavaScript. Wiemy także, o czym mowa, mówiąc selektor. W naszym przypadku, przykład jest dość prosty, albowiem mamy tylko 4 menu główne, ale nie trudno sobie wyobrazić, iż może być ich więcej, a każde z nich może mieć wiele rozgałęzień. To dyskwalifikuje metodę pętli, również wyklucza metodę brute-force, uwzględniającą przeanalizowanie wszystkich przypadków osobno. Jednak dzięki metodzie find, problem sprowadza się do jednej, bardzo czytelnej lini kodu, która zrealizuje za nas całe zadanie. Dobrze jest, aby nasz kod JavaScript znajdował się w $(document).ready, co zagwarantuje nam, odwoływanie się do niego, dopiero po załadowaniu strony, wszystkich zewnętrznych skryptów, stylów i innych plików.

<script type="text/javascript">
<!--
// <![CDATA[
$(document).ready(function(){
	$("#menu div").hover(
		function() {
			$(this).find("span").css({opacity:0.98}).slideToggle("fast");
		},
		function() {
			$(this).find("span").slideToggle("fast");
		}
	);
});
// ]]>
-->
</script>

Powyższy kod zalecam umieścić po znaczniku script, w którym odwołujemy się do jQuery, na dole strony.

W głównym selektorze, odwołujemy się do znacznika od id=”menu”, wewnątrz którego znajduje się znacznik div. Metoda .hover(), oznacza zdarzenie najechania myszki, na wybrany element i jako parametry, przyjmuje jedną lub 2 funkcje, które są realizowane podczas zainicjowania tego zdarzenia. Druga funkcja jest opcjonalna i jest wykonywana wówczas, gdy opuścimy kursorem obszar naszego elementu. Postarałem się tak przedstawić kod, aby obie funkcje były przejrzyste dla czytelnika, ale zalecam minimalizację kodu w funkcjonujących projektach.

Przeanalizujmy teraz kod wewnątrz funkcji. Znowu wykorzystujemy tutaj selektor, tym razem odwołujemy się od obiektu, w którym się znajdujemy. Każdy selektor jQuery zwraca obiekt, do którego możemy się odnieść przez klauzulę this. Jednak jeśli chcemy, wewnątrz elementu, odnieść się do elementu znajdującego się wewnątrz danego elementu, wykorzystujemy metodę find, która wyszukuje i zwraca wszystkie pasujące elementy. Należy o tym pamiętać, ponieważ jeśli chcemy odnieść się do jakiegoś konkretnego elementu, należało by zastosować na przykład klasę i odwołać się po przez .find(„.classNazwa”). Oczywiście, wewnątrz find, możemy również odnosić się do bardziej skomplikowanej struktury elementów, tak samo jak w selektorach jQuery.

Pierwsza funkcja jak widać, modyfikuje zwracany przez metodę find obiekt, i zmienia jego przeźroczystość, następnie, korzystając z metody slideToggle(), zainicjowana zostaje animacja, w tym przypadku, jest to animacja „zjeżdżania” na dół, o czym decyduje parametr display ustawiony na none w ustawieniach css elementu ( element jest niewidoczny, więc slide jedyne co może wykonać to pokazanie go ).

W przypadku drugiej funkcji, wszystko wygląda bardzo podobnie, z tą różnicą, że nie musimy już modyfikować opacity, albowiem zostało ono już zmienione. Zrobiliśmy to po przez jQuery, m.in. dlatego, ponieważ w css, nie było by to możliwe, w taki sposób, aby uzyskać pełną zgodność z validatorem w3c, a także, aby przeźroczystość wyświetlana była prawidłowo, na wszystkich nowoczesnych przeglądarkach obsługujących JavaScript.

4. Podsumowanie

Celem tego artykułu, nie było nauczenie się tworzenia animowanego menu, lecz, poznanie wielu ciekawych kwestii dotyczących metody find(), a także samego jQuery. Możliwości jakie niesie, są ogromne i mam nadzieje, że po lekturze tego artykułu, zyska ono kilku entuzjastów.

Natomiast efekt naszej pracy, możemy zobaczyć w demonstracji.

]]> http://blog.poslinski.net/jquery-find/feed/ 1