Dzięki frameworkowi jQuery stworzysz w 5 min profesjonalnie wyglądające „chmurki” (ang. „cloud”) opisujące elementy Twojej strony!
Chociaż wielu z nas używa atrybutów 'title’ dla linków i 'alt’ dla obrazków, to tak naprawdę, każdy wie, że poza ich zastosowaniem w pozycjonowaniu czy dostępności strony, same w sobie nie oferują naszej stronie żadnej ciekawej funkconalności.
Dzięki frameworkowi jQuery stworzymy dzisiaj „chmurki” oparte na atrybutach 'title’ oraz 'alt’, które sprawią, że nasza strona nabierze dynamiki.
Struktura HTML
Na początku stwórzmy jakiś prosty szablon HTML, na przykład taki:
<html> <head> <title>jQuery - chmurki</title> <style> <!-- /* tutaj znajdzie się kod css */ --> </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> // tutaj znajdzie się nasz kod jQuery </script> </head> <body> <!-- div w który będzie naszą chmurką --> <div id="cloud"></div> <img src="http://webinside.pl/img/logo.jpg" alt="logo webinside.pl" /> <br /> <a href="http://www.webinside.pl/" title="wortal dla webmasterów">webinside.pl</a> </body></html>
Ten prosty dokument HTML wyświetli dwa istotne dla nas elementy – obrazek oraz link, oba zostały wyposażone w atrybuty opisujące.
Blok div o identyfikatorze „cloud” będzie natomiast, jak można się domyślić, naszą chmurką – z tym, że póki co tylko pustym kontenerem.
Naszym zadaniem będzie teraz zaprogramowanie jQuery w ten sposób, aby artybuty alt i title były wyświetlane dynamicznie, po najechaniu kursoerm na dany element.
Nim jednak przejdziemy dalej, upewnij się, że do katalogu zawierającego plik z powyższym kodem, zawiera również plik javaScript z biblioteką. Jeśli nie, możesz go pobrać z strony.
jQuery – krok pierwszy
Zanim stworzymy nasz efekt końcowy, proponuję najpierw, stworzyć poniższy „prototyp”, który pozwoli nam zrozumieć zasadę działania jQuery:
<script type="text/javascript"> $(function(){ //obsługa zdarzenia dla obrazków $('img').mousemove(function(){ var alt = $('img').attr('alt'); $('#cloud').text(alt); }); //obsługa zdarzenia dla hiperłączy $('a').mousemove(function(){ var title = $('a').attr('title'); $('#cloud').text(title); }); });</script>
Oba zdarzenia działają analogicznie. W momencie wykrycia przez js ruchu kursora nad obiektem, uruchamiana jest funkcja, która w pierwszej kolejności pobiera wartość atrybutów (odpowiedzialna jest za to metoda „attr()”).
Drugi etap działania funkcji obsługującej zdarzenie jest przepisanie właśnie zdobytej wartości, do naszego bloku div (o identyfikatorze „cloud”).
Z resztą – sam sprawdź!
jQuey – krok drugi
Mankamentem powyższego rozwiązania, jest fakt, że nasz prototyp chmurki po pojawieniu się już nie znika. Poprawmy to!
<script type="text/javascript"> $(function(){ // obsługa najechania kursorem na obrazek $('img').mousemove(function(){ var alt = $('img').attr('alt'); $('#cloud').text(alt); $('#cloud').show(); }); // obsługa zjazdu kursorem z obrazku $('img').mouseout(function(){ $('#cloud').hide(); }) // obsługa najechania kursorem na link $('a').mousemove(function(){ var title = $('a').attr('title'); $('#cloud').text(title); $('#cloud').show(); }); // obsługa zjazdu kursorem z linku $('a').mouseout(function(){ $('#cloud').hide(); }) });</script>
Powyższe poprawki usprawniły działanie kodu. Teraz nasz prototyp chmurki pojawia się i chowa – w zależności od pozycji kursora. Od strony jQuery to jednak nadal nie wszystko..
jQuery + CSS – krok trzeci
Jesteśmy już na finiszu. Dodamy teraz do naszego kodu, dosłownie kilka linijek, które będą odpowiedzialne za informowanie „chmurki” o pozycji. Ostateczny kod jQuery wygląda tak:
<script type="text/javascript"> $(function(){ // obsługa ruchu kursora na obrazku $('img').mousemove(function(e){ var alt = $('img').attr('alt'); $('#cloud').text(alt); $('#cloud').show(); $('#cloud').css({'top': e.pageY + 5, left: e.pageX + 5}); }); // obsługa zjazdu kursorem z obrazku $('img').mouseout(function(){ $('#cloud').hide(); }) // obsługa ruchu kursora na linku $('a').mousemove(function(e){ var title = $('a').attr('title'); $('#cloud').text(title); $('#cloud').show(); $('#cloud').css({'top': e.pageY + 5, left: e.pageX + 5}); }); // obsługa zjazdu kursorem z linku $('a').mouseout(function(){ $('#cloud').hide(); }) });</script>
Powyżej dokonałem dwóch analogicznych zmian. Po pierwsze dodałem obiekt 'e’ dla obsługi myszki (może brzmi to jakoś zawile, ale zaraz wszystko się rozjaśni). Druga poprawka to kod:
$('#cloud').css({'top': e.pageY + 5, left: e.pageX + 5});
Metoda 'css({});’ to jak można się domyśleć modyfikator stylu elementu. Dzięki zadeklarowanemu wcześniej obiektowi 'e’ możemy odwołać się teraz do wartości 'pageY’ i 'pageX’, które kolejno oznaczają: odległość od marginesu górnego oraz odległość od marginesu lewego.
Ten fragment odświeżany będzie za każdym razem, kiedy pozycja kursora (na wskazanym elementem) będzie się zmieniać.
W połączeniu z poniższym fragmentem CSS, „chmurka” będzie podążać za kursorem.
<style> #cloud { position: fixed; background: silver; height: 20px; width: 200px; text-align: center; color: white; opacity: 0.9; display: none; }</style>
Najistotniejsze jest aby nadać width (szerokość), height (wysokość), 'position: fixed’ (dzięki czemu „chmurka” będzie mogła mieć odpowiednią odległość od obu marginesów) oraz 'display: none’ (dzięki, któremu na początku strony „chmurka” jest niewidoczna). Reszta elementów to kosmetyka.
Całość prezentuje się tak:
<html> <head> <title>jQuery - chmurki</title> <style> #cloud { position: fixed; background: silver; height: 20px; width: 200px; text-align: center; color: white; opacity: 0.9; display: none; } </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function(){ // obsługa ruchu kursora na obrazku $('img').mousemove(function(e){ var alt = $('img').attr('alt'); $('#cloud').text(alt); $('#cloud').show(); $('#cloud').css({'top': e.pageY + 5, left: e.pageX + 5}); }); // obsługa zjazdu kursorem z obrazku $('img').mouseout(function(){ $('#cloud').hide(); }) // obsługa ruchu kursora na linku $('a').mousemove(function(e){ var title = $('a').attr('title'); $('#cloud').text(title); $('#cloud').show(); $('#cloud').css({'top': e.pageY + 5, left: e.pageX + 5}); }); // obsługa zjazdu kursorem z linku $('a').mouseout(function(){ $('#cloud').hide(); }) }); </script> </head> <body> <div id="cloud"></div> <img src="http://webinside.pl/img/logo.jpg" alt="logo webinside.pl" /> <br /> <a href="http://www.webinside.pl/" title="wortal dla webmasterów">webinside.pl</a> </body></html>
W istocie – więcej jest tutaj pisania niż rozumienia – jeśli na spokojnie przeanalizujesz kod to nie będziesz miał problemów ze zrozumieniem.
Zachęcam do eksperymentowania z jQuery, nie zapominając o wielkim dobrodziejstwie jakim jest dokumentacja – .
