Przydatne samouczki podpowiedzi i wtyczki jQuery

Etykietka jest typowym elementem graficznego interfejsu użytkownika. Jest używany w połączeniu z kursorem, zwykle wskaźnikiem myszy. Użytkownik najeżdża kursorem na element, nie klikając go, i może pojawić się podpowiedź — małe „pole najechania” z informacją o najechaniu na element.

Skompilowałem kilka samouczków i wtyczek jQuery dla podpowiedzi.

1. TinyTips – lekka wtyczka jQuery do podpowiedzi

TinyTips to bardzo lekka wtyczka jQuery, która daje możliwość dodawania podpowiedzi do praktycznie każdego elementu na stronie. Dokładnie udokumentowane i przyjazne projektantom.

2. Oznaczanie zdjęć w stylu Flickr za pomocą jQuery

jQuery Photo Tagger zawiera około 1000 linii kodu. W związku z tym możesz sprawdzić stronę projektu lub samemu wypróbować wersję demonstracyjną online. Pamiętaj, że musisz przytrzymać klawisz CTRL podczas klikania myszą, aby utworzyć hotspot.

Demo | Ściągnij

3. TipTip Niestandardowa wtyczka jQuery z zerowymi obrazami

TipTip używa atrybutu title, tak jak robi to natywna podpowiedź przeglądarki. Jednak tytuł zostanie skopiowany, a następnie usunięty z elementu podczas korzystania z podpowiedzi, tak aby podpowiedź przeglądarki nie była wyświetlana.
TipTip generuje tylko jeden zestaw elementów wyskakujących, zamiast generowania jednego zestawu elementów wyskakujących dla każdego elementu z zastosowaną do niego poradą TipTip. Pomaga to przyspieszyć i skraca czas przetwarzania. Wygenerowane elementy to wszystkie elementy div i są dołączane na końcu elementu body.

4. Jak tworzyć nowe adnotacje wizualne za pomocą CSS3

ZURB nauczył nas, jak tworzyć nowe adnotacje wizualne. Rozwiązanie nie było zbyt skomplikowane technicznie. W przypadku Notable przyjęli koncepcję wdzięcznej degradacji: wykorzystują nowe techniki CSS, które degradują się do starszych przeglądarek.

Próbny

5. Pokaż swoje linki jako listę rozwijaną za pomocą Pluralink

Pluralink to niesamowita wtyczka javascript do porządkowania wielu linków w tekście.

6. Efekt najechania w skali szarości z CSS i jQuery

Efekt zawisu w skali szarości z CSS i jQuery opiera się na Sprites CSS i kilku linijkach jQuery, ale wymaga trochę przygotowań, zanim będzie można go zaimplementować. Nie jest zalecany w przypadku projektów na dużą skalę i prawdopodobnie najlepiej nadaje się do wyświetlania fragmentów portfolio.

7. Przyjrzyj się bliżej dzięki wtyczce AnythingZoomer jQuery

Masz mały obszar. Najeżdżasz na to myszą. Pojawia się obszar, w którym można przyjrzeć się bliżej. To jest wtyczka jQuery, która to robi. Nie powiem ci, do czego powinieneś go używać, ani nie będę opracowywał scenariuszy przypadków użycia. Twoja własna kreatywność może ci w tym pomóc.

Próbny

8. Utwórz podpowiedź z bogatą treścią za pomocą JSON i jQuery

W tym samouczku zademonstrujemy, jak tworzyć podpowiedzi obsługiwane przez jQuery z informacjami pobranymi z tablicy JSON.

Próbny

9. Zamień domyślną podpowiedź na Pretty (mb) Tooltip

(mb) Tooltip to piękny tooltip dla Twojej strony internetowej w jQuery.

Ściągnij

10. Captify wyświetla ładne podpisy obrazu po najechaniu myszą

Captify to wtyczka do jQuery napisana przez Briana Reavisa do wyświetlania prostych, ładnych podpisów obrazów, które pojawiają się po najechaniu myszą. Został przetestowany na Firefox, Chrome, Safari i paskudnym Internet Explorerze. Captify został zainspirowany ImageCaptions, kolejną wtyczką jQuery do wyświetlania takich napisów.

11. Podgląd obrazów za pomocą wtyczki imgPreview jQuery

Peter Higgins stworzył Dojo Zoomer. Jest podzielony na 3 panele. Po najechaniu kursorem na obraz w lewym panelu, prawy panel dynamicznie wyświetla przyciętą część obrazu, dzięki czemu możesz wyraźnie skupić się na części głównego obrazu, która Cię interesuje.

12. jQuery Javascript Image Magnifier na licencji GPL

JQZoom to lupa obrazu javascript zbudowana na szczycie popularnego frameworka javascript jQuery. jQzoom to świetny i naprawdę łatwy w użyciu skrypt do powiększania tego, co chcesz.

13. Proste, przejrzyste podpowiedzi z jQuery i CSS

Podpowiedzi CSS są bardzo popularne we współczesnym projektowaniu stron internetowych i wbrew powszechnemu przekonaniu ich tworzenie jest naprawdę łatwe, zwłaszcza przy użyciu jednego z tak popularnych frameworków javascript.

Próbny

14. Magic Toolbox – JavaScript i narzędzia Flash Image Zoom

Magic Toolbox stworzył 2 niesamowite narzędzia do powiększania obrazów w javascript (Magic Zoom i Magic Magnify). Magic Zoom to narzędzie powiększania JavaScript. To najlepszy sposób na wyświetlanie obrazów z niewiarygodną szczegółowością.

15. Prototip 2 – Twórz piękne podpowiedzi z łatwością

Prototip umożliwia łatwe tworzenie zarówno prostych, jak i złożonych podpowiedzi przy użyciu frameworka Prototype javascript.

Próbny

16. Najłatwiejszy podpowiedź i podgląd obrazu za pomocą jQuery

Najłatwiejsza podpowiedź i podgląd obrazu to jedno z tych podobnych do podpowiedzi bąbelków, które pojawiają się po najechaniu myszą na łącze lub miniaturę.

Próbny

17. Podpowiedzi w stylu Coda Popup Bubble Tooltip z jQuery

Coda to jedno z nowych narzędzi do tworzenia stron internetowych dla komputerów Mac — popularne wśród projektantów i programistów.

18. Obszar obrazu, który można kliknąć Taggify, wyświetla wyskakującą podpowiedź

Taggify to widget internetowy, który pozwala blogerom i wydawcom ulepszać swoje witryny, dodając podpowiedzi związane z określonymi obrazami.
Próbny

19. Niezauważalne podpowiedzi w dymku z JavaScript i CSS

Bąbelkowe podpowiedzi to łatwy sposób na dodawanie (za pomocą odrobiny CSS i javascript) fantazyjnych podpowiedzi z kształtem balonu do dowolnej strony internetowej.

Próbny

20. Pojawiające się i wygasające podpowiedzi dla prototypów i skryptów

CoolTips to lekka, dyskretna technika zastępowania etykietek narzędzi JavaScript w przeglądarkach internetowych.
CoolTips służy do zastępowania konwencjonalnych etykietek przeglądarek internetowych. Podpowiedzi pobierają zawartość atrybutu title, więc jest to całkowicie dyskretne. CoolTips to klasa OO oparta na frameworkach Prototype JS i script.aculo.us.

21. Słodkie tytuły przezroczyste i wyblakłe podpowiedzi

Sweet Titles Fading Tooptips nie jest podróbką z NICE Titles ani nie jest próbą ulepszenia poprawionej próby Dunstana. I na pewno nie jest zgrany z jednego z tych zainfekowanych skryptów obsługi zdarzeń z Dynamic Drive .

Próbny

22. Prototip Większość funkcji podpowiedzi dla prototypu

Prototip umożliwia łatwe tworzenie zarówno prostych, jak i złożonych podpowiedzi przy użyciu frameworka Prototype javascript. Jeśli użyjesz również Scriptaculous, możesz nawet dodać do nich fajne efekty.

Próbny

23. Lekkie podpowiedzi BoxOver DHTML/Javascript

BoxOver używa javascript / DHTML do wyświetlania podpowiedzi na stronie internetowej. Implementacja podpowiedzi nie wymaga jednak znajomości języka DHTML ani JavaScript. Istnieje wiele poprawek, które można ustawić, aby dostosować go do swoich potrzeb, ustawiając atrybut „tytuł” ​​tagu.