Rozwiązanie

Cała sztuczka polega na pobraniu wartości inputa, za pomocą metody val();

var content = $("input[name=nazwaPola]").val();

Oraz po wykonaniu .focus, nadpisaniu wartości ponownie do pola, co odznaczy tekst w polu.

$("input[name=nazwaPola]").focus.val(content);

Prawda, że proste?

jQuery

http://jqueryfordesigners.com/
Świetna strona dla programistów korzystających z jQuery.
http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/
Dobrze opisane zapytania Ajaxowe z wykorzystaniem jQuery.

XNA

http://pdnimporter.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=30541
Tekstury Paint.NET do XNA.
http://xnaviewer.codeplex.com/
Kontrolka, pozwalająca na korzystanie z dobrodziejstw XNA w aplikacjach typu WindowsForms. Nie trudno sobie wyobrazić zastosowanie np. przy tworzeniu map.

Inne

http://www.bugmenot.com
Dzięki tej stronie, nie trzeba się rejestrować na różne serwisy społecznościowe, itp., aby móc w pełni przeglądać zasoby tych serwisów.
http://gskinner.com/RegExr/
Świetne narzędzie ułatwiające pracę z mod_rewrite.
http://www.logoinstant.com/
Darmowe wzory logo.
http://code.msdn.microsoft.com/PowerCommands
Przydatny dodatek do Visual Studio (za Procent‘em).
http://blogs.msdn.com/danieb/archive/2009/08/26/pl-windows-7-search-connectors-czyli-integracja-wyszukiwania-z-systemem-operacyjnym.aspx
Opis jednej z nowych bardzo interesujących funkcjonalności w Windows 7.
Word viewer
Programik pozwala na przeglądanie dokumentów Worda, bez potrzeby posiadania pakietu Office.
http://www.hanselman.com/tools
Naprawdę ogromna lista różnego rodzaju narzędzi, które przydadzą się każdemu, podzielona według kategorii. Sam się zdziwiłem, jak wiele przydatnych aplikacji jeszcze nie znałem.

Polecam również galerię prac autora zdjęcia, które reprezentuje ten wpis.

Przechwytywanie klawiszy

Najważniejszą kwestią było przechwycenie klawiszy, używanych przez użytkowników. Aby to zrobić, wystarczyło podpiąć jQuery i napisać kilka prostych lini kodu:

$(function(){
 $('html').keyup(function(e) {
 alert(e.keyCode);
 });
});

Który, pozwolił, klikając na interesujące nas klawisze na poznanie kodu tych klawiszy.

Na przykład, dla następującego kodu:

$('html').keyup(function(e) {
 if(e.keyCode == 13) {
 alert("Klawisz: Enter");
 }
});

Wyświetli się komunikat „Klawisz: Enter”, po naciśnięciu Entera. Należy pamiętać, o nieużywaniu klawiszy, które na stałe są skrótami samej przeglądarki (np. Backspace – powrót do poprzedniej strony).

To jedyne ograniczenie, jakie pojawia się w tym przypadku.

Marginesy

Następną kwestią, było obliczanie odpowiednich marginesów, ponieważ obrazki znajdują się w boxie z overflowem, konieczne było ustawianie odpowiedniego marginesu bocznego, na bazie szerokości obrazków. Trochę matematyki, niewiele filozofii.

Demo

Jak wygląda projekt na żywo, można zobaczyć w wersji demo (działa poprawnie pod najnowszymi wersjami: Internet Explorer / Chrome / Safari / FireFox /Opera ).

Zdaje sobie sprawę, że coś jeszcze można by dodać do tego projektu, zależało mi jednak na podstawowych funkcjonalnościach i w moim przekonaniu, zadanie to udało mi się zrealizować.

Z dedykacją dla Magdy.

Często rodzi się problem, testowania na różnych przeglądarkach witryny www, a szczególnie pod kątem Internet Explorer, rozwiązanie pokazane tutaj, pozwoli zainstalować na każdym komputerze nawet IE 3.0, co niestety w normalny sposób, nie jest możliwe.
Jeżeli jednak, potrzebujemy sporadycznie sprawdzić jak wyświetla się strona, zachęcam ponownie do skorzystania z http://browsershots.org (które notabene, przeszło niedawno małą transformację).

Tworzenie strony www w oparciu o ASP.NET MVC – Darmowy eBook (dodatkowe info). Szczególnie przydatny teraz, gdy 1.0 ujrzało wreszcie światło dzienne. W dodatku źródła framework’a zostały otwarte.

Multi-Touch na Windows 7? – Opis How-To + wideo.

Czynniki sukcesu w biznesie – Autor wpisu opowiada o wrażeniach z wykładu Profesora Romana Kluski, na tegorocznym SFI.

Steve’a Ballmera nie da się nie lubić – Słów kilka na temat obecnego CEO Microsoft’u i nie tylko.

6 niezaprzeczalnie wymiatających narzędzi webmastera – Kilka bardzo interesujący rozwiązań bazujących na jQuery (dzięki Bartek).

Szachy i komputery – Omówienie problemu przetwarzania ruchów przez komputer w szachach. Na szczególną uwagę zasługuje rozdział: silne i słabe strony silników – przykłady.

ie6.pl – Na koniec coś co pomoże programistom, ale i użytkownikom pracować wydajniej i bezpieczniej, czyli „odstaw Internet Explorer 6 do lamusa”.

pChart

Klasa napisana w PHP, o ogromnych możliwościach konfiguracji, generowanego przez nią wykresu. Szybka, prosta, dobrze udokumentowana i posiadająca wiele przykładów jej zastosowania, udostępnionych przez twórców. Wymaga uruchomionego GD na serwerze.

http://pchart.sourceforge.net

Open Flash Chart

Wykres generowany za pomocą Flash’a, nie oferuje tak wielu możliwości, jeżeli chodzi o typy generowanych wykresów, ale konfiguracja jest również, wysoce dowolna.

Autorzy, jako główną zaletę tego rozwiązania, zachwalają możliwość pobierania informacji na podstawie których będzie generowany wykres, po załadowaniu strony do przeglądarki, zatem można generować różne wykresy dla różnych użytkowników. To zachęcające, ale nie będzie problemem, aby w konkurencyjnych rozwiązaniach osiągnąć podobny efekt.

http://teethgrinder.co.uk/open-flash-chart/

jQchart

Plugin dla jQuery. Rozwiązanie proste i szybkie, zalecane, gdy chcemy wygenerować skromne wykresy na witrynach, już wykorzystujących jQuery. Podstawową wadą, jest język jego dokumentacji, ale obrazkowe omówienie i przykłady kodu, powinny nie sprawiać problemów z jego implementacją.

http://jsgt.org/lib/jquery/plugin/jqchart/nightly/nightly.htm

Google Visualisation API

Dzięki temu kombajnowi, nie tylko można generować wykresy, ale również tworzyć wiele dodatkowych, bardzo interesujących rzeczy, takich jak mapy, sortowane tabele, a nawet bardzo proste schematy blokowe.

Jednym z jego elementów jest Google Chart API (http://code.google.com/intl/pl/apis/chart/), dzięki któremu można generować obrazy z wykresami, w dodatku w przydatku tego rozwiązania korzystamy z zasobów serwerowych Google, a nie własnych jak w przypadku poprzedników.

http://code.google.com/intl/pl/apis/visualization/

1. Przykładowy plik HTML

Rozpoczynamy od pliku, na którym będziemy wykonywać nasze nikczemne testy:

<!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>Okno z potwierdzeniem</title>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultrices orci quis nisl. Aliquam at dolor. Sed consequat quam ac leo. Curabitur fringilla sodales sem. Praesent eleifend mauris ac ante dictum aliquet. Etiam sapien nulla, consequat eget, consequat vitae, molestie id, lectus. In hac habitasse platea dictumst. Aliquam feugiat odio ac lectus. Suspendisse egestas varius nisl. Morbi nulla. Pellentesque aliquet interdum felis. Vestibulum euismod luctus libero. Suspendisse sodales interdum enim. Pellentesque orci. Nullam massa nunc, eleifend vel, eleifend varius, congue eget, leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;<br/>
Cras aliquet, ligula quis rutrum accumsan, lorem velit dignissim lorem, fermentum dignissim ligula quam at ligula. Nulla dictum interdum purus. Aenean odio. Vestibulum pretium. Phasellus enim enim, semper aliquet, tempus ac, rutrum gravida, libero. Etiam neque odio, blandit nec, suscipit vel, pellentesque scelerisque, leo. In id metus. Vivamus rutrum. Nullam nec velit. Ut purus nisi, porta at, tincidunt sit amet, scelerisque pulvinar, sem. Sed adipiscing risus. In nisi. In et augue. Phasellus ullamcorper urna quis lacus tempus dapibus. Sed eget est. Etiam tellus erat, adipiscing nec, placerat sed, ultricies a, orci. Cras ac lectus. Curabitur mattis lorem nec nibh. <a href="http://poslinski.net" class="confirm">Maecenas</a> aliquet iaculis turpis.
</p>
<div id="confirm"></div>
</body>
</html>

Przykładowy tekst z generatora Lorem ipsum, trafił wewnątrz znacznika p. Zaraz przed zamknięciem znacznika body, umieściliśmy div#confirm, wewnątrz którego znajdować się będzie kod z naszym oknem do potwierdzania.

2. Warstwa prezentacji

Skupmy się na naszym oknie. W moim przypadku, jego kod html który będzie odpowiadał za całe okno, wyglądać będzie następująco:

<div id="confirm">
<div>
<div>
<h1>Czy na pewno chcesz usunąć ten element?</h1>
<p><button onClick="location.href='TUTAJ TRAFIAĆ BĘDZIE ZAWARTOŚĆ POLA HREF Z LINKU'"> TAK </button> <button> NIE </button></p>
</div><!-- end #confirm div div -->
</div><!-- end #confirm div -->
</div><!-- end #confirm -->

Kod wewnątrz #confirm, wygenerowany zostanie przez JavaScript. Warto jednak zastanowić się, dlaczego wygląda właśnie tak i dlaczego znajduje się na samym dole kodu strony?

Zacznijmy od przyczyny umieszczenia kodu na końcu. Określając position: absolute, dla #confirm, bez parametru z-index, kolejność obiektów z position: absolute, będzie odpowiadać kolejności w jakiej zostaną wygenerowane przez przeglądarkę. Ostatnio wygenerowane, pojawią się najwyżej stosu warstw z position: absolute, zatem, jeśli będą miały np. takie same wymiary, zasłonią warstwy, które pojawiły się w kodzie wcześniej.

Dlaczego wewnątrz confirm, umieściliśmy 2 razy div? Do wyjaśnienia tej kwesti, wystarczy zapoznać się z fragmentem kodu css, który umieścimy wewnątrz sekcji head:

<style type="text/css">
<!--
* { margin: 0px; padding: 0px; }
body { margin: 10px; }
p { width: 600px; margin: 0 auto; line-height: 25px; }

/* CONFIRM */
#confirm { display: none; position: absolute; height: 100%; width: 100%; background: #000; top: 0; left: 0; }
#confirm { height: expression(((window.Enumerable && window.Enumerable.max) ? [document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight].max() : document.documentElement.scrollHeight) + 'px' ); width: expression(((window.Enumerable && window.Enumerable.max) ? [document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, document.documentElement.clientHeight].max() : document.documentElement.scrollWidth) + 'px' );  }
#confirm[id] { position:fixed; }
#confirm div { padding: 10px; margin-top: 200px; }
#confirm div div { background: #900c0c; width: 500px; margin:0 auto; border: 1px solid #CCC; overflow: hidden; }
#confirm div div h1 { font-size: 18px; color: #FFF; }
#confirm div div p { padding: 20px; }
-->
</style>

#confirm określa tutaj tło, które będzie „przykrywać” całą stronę. Druga linijka, (ta z dziwnym height i width), konieczna jest w przypadku Internet Explorer. #confirm[id] zrozumiały jest tylko dla nowocześniejszych przeglądarek i takie było zamierzenie, aby tło naszego okna miało rozmiar 100% na 100% i przewijało się razem ze stroną ( dla IE jest obliczane każdorazowo na bazie aktualnej szerokości i wysokości okna ).

Pierwszy div jest konieczny, aby wyśrodkować 2gi oraz, aby zrobić odstęp od góry okna po przez margin-top. Drugi div określa już nasze okno do potwierdzania, które może zostać wyśrodkowane, ponieważ znajduje się wewnątrz elementu blokowego z width: 100% ( Standardowa wartość dla elementu z display: block – którym jest div )

3. Czas na jQuery

Teraz pozostaje nam odpowiednio zareagować na kliknięcie linka, który znajduje się pod koniec bloku p, w którym umieściliśmy lorem ipsum’a:

<a href="http://poslinski.net" class="confirm">Maecenas</a>

W naszym przypadku, wszystkie linki z klasą confirm, będą reagowały na nasz skrypt. Możemy np. zastosować nasze potwierdzenie dla wszystkich linków, pozwalających na usuwanie jakiejś wartości z bazy danych.

Teraz wymagany kod JavaScript, który umieszczamy na dole strony:

<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".confirm").click(function(){
$("#confirm")
.css({opacity:0.95})
.fadeIn()
.html('<div><div><h1>Przekierować?</h1><p><button onClick=\"location.href=\'' + $(this).attr("href") + '\'\"> TAK </button> <button> NIE </button></p></div></div>');
return false;
});
$("#confirm").click(function(){$(this).fadeOut();});
});
</script>

W pierwszej linii ładujemy jQuery.

Następnie, główna gałąź naszego kodu $(document).ready, uaktywnia nasz kod, po pełnym załadowaniu strony.

Reagujemy na kliknięcie w element z klasą confirm, wywołując w tym przypadku serie metod, na elemencie o id=confirm. Na początek, dodajemy przeźroczystość (element wciąż jednak ma ustawione display: none), następnie korzystając z metody fadeIn, jQuery płynnie przechodzi z display: none do opacity: 0.95 ( w naszym przypadku ). Na koniec, wewnątrz elementu z #confirm, ładujemy kod html z naszymi dwoma divami, wewnątrz których umieszczamy nagłówek h1 oraz dwa przyciski button. Jak pewnie, zauważyliścię, jeden z nich, dodatkowo posiada zadeklarowane zdarzenie onClick, które będzie reagować na pozytywne potwierdzenie użytkownika, przekierowywując go do miejsca, które wskazywał kliknięty link.

Dlaczego return false na końcu tego bloku kodu? Aby przeglądarka, nie przekierowywała nas automatycznie, po kliknięciu na link, nasza funkcja musi zwracać wartość false, w przeciwnym wypadku nastąpi przekierowanie i z okna potwierdzającego będą nici.

Jeżeli klikniemy gdziekolwiek indziej, niż w button z „TAK„, korzystając ze zdarzenia fadeOut(), płynnie zniknie blok z naszym potwierdzeniem, co realizuje $(„#confirm”).click( … ).

Całość napisanego kodu powinna wyglądać, mniej więcej tak:

<!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>Okno z potwierdzeniem</title>
<style type="text/css">
<!--
* { margin: 0px; padding: 0px; }
body { margin: 10px; }
p { width: 600px; margin: 0 auto; line-height: 25px; }

/* CONFIRM */
#confirm { display: none; position: absolute; height: 100%; width: 100%; background: #000; top: 0; left: 0; }
#confirm { height: expression(((window.Enumerable && window.Enumerable.max) ? [document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight].max() : document.documentElement.scrollHeight) + 'px' ); width: expression(((window.Enumerable && window.Enumerable.max) ? [document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, document.documentElement.clientHeight].max() : document.documentElement.scrollWidth) + 'px' );  }
#confirm[id] { position:fixed; }
#confirm div { padding: 10px; margin-top: 200px; }
#confirm div div { background: #900c0c; width: 500px; margin:0 auto; border: 1px solid #CCC; overflow: hidden; }
#confirm div div h1 { font-size: 18px; color: #FFF; }
#confirm div div p { padding: 20px; }
-->
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultrices orci quis nisl. Aliquam at dolor. Sed consequat quam ac leo. Curabitur fringilla sodales sem. Praesent eleifend mauris ac ante dictum aliquet. Etiam sapien nulla, consequat eget, consequat vitae, molestie id, lectus. In hac habitasse platea dictumst. Aliquam feugiat odio ac lectus. Suspendisse egestas varius nisl. Morbi nulla. Pellentesque aliquet interdum felis. Vestibulum euismod luctus libero. Suspendisse sodales interdum enim. Pellentesque orci. Nullam massa nunc, eleifend vel, eleifend varius, congue eget, leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;<br/>
Cras aliquet, ligula quis rutrum accumsan, lorem velit dignissim lorem, fermentum dignissim ligula quam at ligula. Nulla dictum interdum purus. Aenean odio. Vestibulum pretium. Phasellus enim enim, semper aliquet, tempus ac, rutrum gravida, libero. Etiam neque odio, blandit nec, suscipit vel, pellentesque scelerisque, leo. In id metus. Vivamus rutrum. Nullam nec velit. Ut purus nisi, porta at, tincidunt sit amet, scelerisque pulvinar, sem. Sed adipiscing risus. In nisi. In et augue. Phasellus ullamcorper urna quis lacus tempus dapibus. Sed eget est. Etiam tellus erat, adipiscing nec, placerat sed, ultricies a, orci. Cras ac lectus. Curabitur mattis lorem nec nibh. <a href="http://poslinski.net" class="confirm">Maecenas</a> aliquet iaculis turpis.
</p>
<div id="confirm"></div>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".confirm").click(function(){
$("#confirm")
.css({opacity:0.95})
.fadeIn()
.html('<div><div><h1>Przekierować?</h1><p><button onClick=\"location.href=\'' + $(this).attr("href") + '\'\"> TAK </button> <button> NIE </button></p></div></div>');
return false;
});
$("#confirm").click(function(){$(this).fadeOut();});
});
</script>
</body>
</html>

Podsumowanie

Działający przykład, można zobaczyć tutaj.

To przykładowe rozwiązanie, nie zakłada wszystkich możliwości. Możemy kod rozbudować tak, aby potwierdzenie działało także dla formularzy, należało by wtedy sterować wysyłaniem formularza, co również możemy dokonać z poziomu jQuery. Można również, na bazie powyższego kodu stworzyć plugin do jQuery. Zapraszam do dyskusji w komentarzach do tego postu.

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.