Dzisiejszą notką pragnę rozpocząć drugą serię wpisów, które dotyczyć będą użycia znakomitej (nie tylko moim zdaniem) JavaScript’owej biblioteki jQuery. Drogi Czytelniku, nie znajdziesz tutaj podstawowego kursu, z którego nauczysz się jak posługiwać się tą biblioteką. Postaram się jednak w tej serii przedstawić ciekawe rozwiązania i wtyczki (pluginy), które to pomogą Ci w zbudowaniu ciekawego interfejsu, bądź urozmaicą tworzone przez Ciebie serwisy WWW.
Do dzieła. Na początek bardzo ciekawa wtyczką autorstwa Jörna Zaefferer’a o nazwie jQuery.Tooltip.
Pewnie nie raz zastanawiałeś się jak stworzyć podpowiedzi prezentowane w chmurkach, które pojawią się po najechaniu na dany element (obrazek, przycisk) kursorem myszy. Ten bardzo użyteczny efekt można dość szybko i łatwo uzyskać właśnie z użyciem wspomnianej wtyczki.
Potrzebne nam będą:
- biblioteka jQuery – do pobrania ze strony http://jquery.com/
- wtyczka jQuery.Tooltip – do pobrania ze strony autora http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
- odrobina czasu i dobrych chęci
Na początek przyjrzyjmy się jak wygląda standardowe wywołanie funkcji.
W ten sposób określiliśmy aby wszystkie elementy na stronie posiadające klasę help były obsługiwane przez nasz plugin. Tekst, który ma się pojawiać w naszym wyskakującym okienku powinniśmy umieścić w tagu title.
Przyjrzyjmy się teraz jakie opcje oferuje nam jeszcze jQuery.Tooltip
Funkcję .tooltip() możemy wywołać z następującymi parametrami:
- delay – określamy z jakim opóźnieniem ma pojawić się nasz tooltip, czas podajemy w milisekundach, np. 2 sekundy (2000 milisekund);
- track – kiedy ustawimy ten parametr na true, nasz tooltip będzie podążał za kursorem myszy;
- showURL – domyślnym ustawieniem naszego pluginu jest, aby pokazywał zawartość atrybutu src jako fragment zawartości naszego tooltip’a, korzystając z tego parametru możemy wyłączyć tę właściwość
- showBody – ten parametr pozwala nam zdefiniować symbol, który będzie separował nagłówek naszego tooltipa od treści, nagłówek opatrzony jest tagiem <h3>, możemy nałożyć na niego dowolny styl, itp.
- bodyHandler – dzięki tej opcji możemy sami zdefiniować ciało naszego tooltipa
- extraClass – pozwala ustalić dodatkową klasę dla naszego tooltipa, ułatwiając tym samym stylizację naszej chmurki
- top, left – dzięki tym parametrom określimy w jakiej odległości od kursora będzie pojawiał się nasz tooltip
- id – możemy zmienić domyślną wartość atrybutu id tooltipa na dowolny inny
- fixPNG – ostatnia z omawianych opcji, naprawia wyświetlanie półprzezroczystości dla przeglądarek rodziny IE
Prześledźmy wszystko na przykładach, aby wywołać chmurkę najeżdżamy kursorem na znak zapytania:
Wtyczki jQuery.Tooltip możemy użyć praktycznie z każdym elementem html. Osobiście najczęściej stosuję ją do takiego celu jak ten zaprezentowany powyżej, kiedy w atrakcyjny i przystępny sposób chcę zaprezentować odbiorcy jakąś istotną informację.
Poniżej kilka przykładów demonstrujących użycie wtyczki z innymi elementami języka HTML:
I to na tyle tym razem, po więcej przykładów odsyłam na stronę: http://jquery.bassistance.de/tooltip/demo/.
6 komentarzy
a nie wiesz może jak uporać się z problemem brzegu strony ?
Generalnie nie chciał bym, aby w momencie gdy chmurka nie mieści się, zmienia położenie na przeciwne. Jak zrobić żeby tego efektu nie było ?
btw. Ten tutek jest lepszy niż oryginał autora
Moim zdaniem, to że chmurka zmienia orientacje jest opcją jak najbardziej pożądaną. Dlaczego? W sytuacji, w której nie zmieściła by się na ekranie, każda z przeglądarek wyświetli poziomy pasek przewijania. I np. w tak ulubionym przez wszystkich IE6 strona zacznie dziwnie skakać. Nie wygląda to za dobrze.
Zgadza się, w większości przypadków zdaje to egzamin, ale ja sobie ubzdurałem, że wolał bym aby tak się nie działo…
Wystarczyło zmienić w kodzie jedną linijkę, a dokładnie ustawić wartość na -100:
top -= h.offsetHeight – 100 + settings(current).top;
witam, a mam sprawę robię sobie pętle foreach w php i nadaje klasę każdemu z elementów taki aby był tooltip a on wyśiwetla mi tylko dla pierwsze elemntu i dalej juz nie co mam zrobić aby to działało ??
Możesz wkleić ten kod który to generuje? najlepiej przez jakiś serwis typu http://pastebin.com/
Moim zdaniem, to że chmurka zmienia orientacje jest opcją jak najbardziej pożądaną. Dlaczego? W sytuacji, w której nie zmieściła by się na ekranie, każda z przeglądarek wyświetli poziomy pasek przewijania. I np. w tak ulubionym przez wszystkich IE6 strona zacznie dziwnie skakać. Nie wygląda to za dobrze.
Napisz komentarz