jquery wyskakujące okienko. Interaktywna mapa z podpowiedziami

Pomysł wyśledziłem na stronie elektronicznej księgowej Elby. Jest przyjemny i Przyjazny dla użytkownika interfejs i bardzo podobały mi się podpowiedzi, które są obecne w całym tekście.

Chciałem tylko pobrać kod skryptu z kodu źródłowego witryny, która implementuje ten biznes, ale tak się nie stało. Tam mają tak wiele różnych skryptów, zebranych w jedną kupkę (nie wiem, jak to się poprawnie nazywa .) język zawodowy), że trudno było mi stamtąd wydobyć coś konkretnego.

Dlatego wziąłem i napisałem swój scenariusz, który robi to samo. Wiem, że gotowych rozwiązań jest już wiele, ale bardziej interesuje mnie samodzielne napisanie skryptu od podstaw, aby jeszcze raz przećwiczyć jQuery.

Demonstracja

Przykład można zobaczyć zarówno na stronie Share42.com, jak i na , gdzie źródło zawiera tylko to, co jest niezbędne do działania skryptu.

Instalacja

Kod skryptu wygląda tak:

(function($)( $(function() ( $("span.jQtooltip").each(function() ( var el = $(this); var title = el.attr("title"); if (title && tytuł != "") ( el.attr("tytuł", "").append("

Zapisz go w pliku .js, takim jak scripts.js, i dołącz przed tagiem witryny, nie zapominając o jednoczesnym dołączeniu frameworka jQuery, jeśli nie zostało to jeszcze zrobione. Tych. Do kodu html serwisu dodawany jest następujący kod:

JQtooltip ( pozycja: względne; kursor: pomoc; border-bottom: 1px z kropkami; ) .jQtooltip div ( wyświetlacz: brak; pozycja: bezwzględna; dół: -1px; lewy: -1px; z-index: 1000; szerokość: 190px; padding: 8px 12px; text-align: left; font-size: 12px; line-height: 16px; color: #000; box-shadow: 0 1px 3px #C4C4C4; border: 1px solid #DBB779; background: #FFF6BD; obramowanie-promień: 2px; )

Teraz pozostaje umieścić niezbędny tekst w tagu z klasą jQtooltip i atrybutem title, czyli lubię to:

tekst

Jeśli chcesz, aby tekst był kwadratem, jak w , musisz dodać następujące style do pliku CSS:

JQtooltip.mini ( display: inline-block; vertical-align: bottom; font-size: 11px; width: 14px; line-height: 13px; text-align: center; margin-left: 2px; top: -2px; color : #9A4D18; obramowanie: 1px stałe #FAD28F; tło: #FFF6BD; obramowanie-promień: 2px; )

A kod html w tym przypadku będzie wyglądał tak:

!

W zależności od preferencji możesz zmienić kod CSS na dowolny. Oznacza to, że, jak widać, projekt podpowiedzi można wykonać w dowolny sposób, do tego wystarczy zrozumieć CSS.

To w rzeczywistości wszystko.

PS Nie mam wątpliwości, że scenariusz można uczynić bardziej kompetentnym, ale w zasadzie jestem zadowolony z tego, co się wydarzyło.

Szukasz gdzie umieścić swoją stronę na Ukrainie? Wybierz hosting, sprawdzony w czasie - X-HOST. Otrzymasz wysokiej jakości i niezawodny hosting po konkurencyjnych cenach.

Przeglądarki automatycznie generują podpowiedzi, gdy webmasterzy wpisują atrybut tytuł jakiś tekst (zwykle atrybut tytuł zastosowane do tagów I , tj. dla linków i obrazów). Gdy użytkownicy najadą kursorem na tagi, które mają ten atrybut tytuł, a następnie przeglądarka wyświetli podpowiedź. To są wyskakujące podpowiedzi podpowiedź) będziemy edytować.

// Biblioteka standardowa jQuery // W tym pliku przepiszemy skrypty jQuery

4. Aby tooltip działał, wystarczy napisać w scripts.js :

$(dokument).gotowy(funkcja()( $("a").qtip();));

Ta konstrukcja oznacza, że ​​dla wszystkich łączy, które mają atrybut title, zostanie zastosowana metoda qtip().

Ustawianie jQuery qTip

1. Możesz dostosować podpowiedzi na różne sposoby. Najpierw zmieńmy pozycję, z której będą wyświetlane wskazówki.

$("a"). qtip(( position: ( my: "bottom center", // Pozycja kursora w: "top center", // Widok pozycji podpowiedzi: $(window) // Podpowiedź nie będzie zlizywać ekran krawędzi ) ));

2. Po ustawieniu pozycji możesz zrobić schemat kolorów wyświetlanie podpowiedzi. Domyślnie plik jquery.qtip.min.css zawiera następujące style kolorów:

Qtip-domyślny (żółty domyślny styl)

Qtip-bootstrap

Możesz dodać cień do niektórych z tych stylów: qtip-shadow . Ponadto nikt nie zawraca sobie głowy tworzeniem własnego stylu, który dobrze komponuje się z ogólnym, chociaż standardowych jest więcej niż wystarczająco.

$("a").qtip(( pozycja: ( moja: "dolny środek", at: "górny środek", rzutnia: $(okno) ), styl: ( klasy: "qtip-green qtip-shadow" ) ) );

Tworzenie menu nawigacyjnego z podpowiedziami

1. Najpierw utwórzmy szkielet HTML:

• Dom
• O
• kontakt
• Nasza praca

#navigation ( background: rgb(132,136,206); /* Stare przeglądarki */ background: -moz-linear-gradient(top, rgba(132,136,206,1) 0%, rgba(72,79,181,1) 50%, rgba(132,136,206 ,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(132,136,206,1)), color-stop(50 %,rgba(72,79,181,1)), color-stop(100%,rgba(132,136,206,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(132,136,206, 1) 0%,rgba(72,79,181,1) 50%,rgba(132,136,206,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(góra, rgba(132.136,206) /* Opera11.10+ */ background: -ms-linear-gradient(góra, rgba(132,136,206, 1) 0%,rgba(72,79,181,1) 50%,rgba(132,136,206,1) 100%); / * IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#8488ce", endColorstr= "#8488ce",GradientType=0); /* IE6-9 */ background: linear-gradient(top, rgba( 132,136,206,1) 0%,rgba(72,79,181,1) 50%,rgba(132,136,206,1) sto%); /* W3C */ list-style-type: none; margines: 100px 20px 20px 20px; wypełnienie: 0; przelew: ukryty; -webkit-obramowanie-promień: 5px; -moz-border-radius: 5px; promień obramowania: 5px ) #navigation li ( margin: 0; padding: 0; display: block; float: left; border-right: 1px solid #4449a8; ) #navigation a ( color: #fff; border-right: 1px solid #8488ce; display : block; padding: 10px; ) #navigation a:hover ( background: #859900; border-right-color: #a3bb00; )

Wynik powinien być następujący:

3. W pliku scripts.js dodaj:

$("#navigation a").qtip(( pozycja: ( moja: "górny środek", at: "dolny środek", rzutnia: $(okno) ), show: ( efekt: funkcja(przesunięcie) ( $(to ).slideDown(300; ) ), hide: ( efekt: function(offset) ( $(this).slideUp(100; ) ), style: ( class: "qtip-green qtip-shadow", ) )) ;

Teraz, po najechaniu myszą na menu nawigacyjne, wyświetli się podpowiedź (atrybut tytułu).

Wyświetlanie innych treści w podpowiedzi

Oprócz wyświetlania standardowych tagów, w podpowiedzi można wyświetlić inną treść, na przykład pobraną z pliku, z ukrytego kontenera lub bazy danych i bez przeładowywania strony przy użyciu technologii Ajax.

Ten link pobiera zawartość z pliku za pomocą Ajax

Wartość atrybutu href=”tooltip.txt” oznacza, że ​​hiperłącze odnosi się do zwykłego pliku txt.

$(".infobox").each(function()( $(this).qtip(( content: ( text: "Loading...", //Podczas ładowania zawartości, ten wpis ajax będzie wyświetlany: () url: $ (this).attr("href") //Skąd pobrać zawartość z ), title: ( //Dodaje pole tytułu do tekstu podpowiedzi: $(this).attr("title"), przycisk : true //Dodaje przycisk do zamykania tooltip ) ), pozycja: ( my: "top center", at: "bottom center", effect: false, //Usuń wyskakujące okienko efektu: $(window) ), show: ( zdarzenie: "kliknij", // Etykietka wyświetlana po kliknięciu linku, może być zastąpiona przez 'najechanie', następnie etykietka wyświetlana po najechaniu myszą solo: true //Pozwala na wyświetlanie tylko jednej podpowiedzi na ekranie ), hide: "unfocus ", //Podpowiedź zostanie zamknięta po kliknięciu innego elementu strony style : ( klasy: "qtip-green qtip-shadow" ) )); )).bind("kliknij", function(e)(e.preventDefault()) ); //Po kliknięciu linku przeglądarka nie załaduje adresu URL

Ta sztuczka Ajax działa tylko wtedy, gdy serwer jest uruchomiony. Aby zarobił lokalny komputer musisz zainstalować na przykład .

Dopóki nie zapomniałem jakie są plusy i minusy aluminiowych grzejników segmentowych i jakie grzejniki najczęściej wybierają konsumenci.

(pliki do pobrania: 409)

1. Niesamowity pokaz slajdów w jQuery „Elastic Slideshow”

Pokaz slajdów z miniaturami i opisami slajdów. Różne efekty zmieniające obraz. Istnieją dwie opcje: z automatyczną zmianą suwaka i bez.

2. Czysty suwak CSS3

Ładny suwak obrazu z opisem i automatyczną zmianą slajdów. Gdy najedziesz kursorem na obraz, obrót zostanie zatrzymany. Przystankowi towarzyszy efekt CSS3.

3. Wtyczka jQuery "Fotoramka"

Fajny suwak galerii.

4. Efekty typograficzne Efekty tekstowe

Fajne efekty typograficzne z CSS3 i jQuery. 7 różnych fajnych efektów.

5. Wtyczka „Darkbox”

Mała lekka wtyczka do wyświetlania obrazów w bloku wyskakującym.

6. Efekt najechania za pomocą jQuery

Efekt okrągłego najechania.

7. Animowane przyciski jQuery CSS3

Wiele różnych animowanych efektów CSS3 do tworzenia niesamowitych przycisków dla Twojej witryny. Po prostu naprawdę fajne efekty najechania.

8. Zmieniacz obrazu tła jQuery HTML5

Klikanie na miniatury obrazy tła zastąpić się efektem rozmycia. Zmiana rozmiaru okna przeglądarki powoduje zmianę rozmiaru obrazu tła.

8. Interaktywne efekty typograficzne

Ciekawe efekty tekstowe z wykorzystaniem HTML5 i jQuery (4 różne efekty). Najedź kursorem na tekst, aby zobaczyć efekt.

9. Podpisy do obrazów wyskakujących

Wiele różnych animowanych efektów najechania, aby zaimplementować podpisy pod wyskakującymi obrazami.

10. Wtyczka Portamento

Blok pływający z jQuery. Zawsze pozostaje widoczny podczas przewijania strony.

11. Przewijacze treści

Wtyczka jQuery do wyświetlania pasków przewijania w blokach o stałym rozmiarze. Kilka stylów.

12. Wtyczka „Paski przewijania”

Implementacja jQuery z przewijaniem treści w pionie i poziomie w polu o stałym rozmiarze.

13. Wtyczka „Mały pasek przewijania”

Wtyczka jQuery do przewijania treści w pionie i poziomie.

Próbny

Pobierać

14. Wtyczka "jScrollPane"

Przewijanie treści w różnych przeglądarkach w bloku.

15. Pływający blok „Scroll Follow”

Wtyczka do tworzenia bloku, który będzie się przewijał po przewinięciu strony. Możliwe jest naprawienie bloku, klikając link.

16. Wyskakujące „Paski boczne”

Wysuwane panele ze wszystkich stron strony internetowej.

17. Spektakularne rozwiązania do projektowania stron skrótów CSS3

Trzy opcje wdrażania animowanych efektów w celu utworzenia skrótu „Strona w budowie”.

17. Efekt podczas przewijania strony

Niesamowity efekt podczas przewijania strony: elementy wychodzą poza obszar za ekranem lub odwrotnie chowają się za obszarem ekranu. Takie rozwiązanie doskonale nadaje się do zastosowania na stronach portfolio, do efektownej prezentacji zrealizowanych projektów wraz z krótkim opisem.

19. Wtyczka "fancyBox 2"

Nowa, całkowicie przepisana wersja znanej wtyczki fancybox do wyświetlania obrazów i innych treści w oknach modalnych.

20 Minimalna galeria

Funkcjonalna wtyczka z szeroką gamą funkcji: galeria, karuzela, slider, menu, ekspander, animowane przyciski.

21.jQuery Pasek informacyjny

Rotator wiadomości na stronie. Wiadomości następują po sobie i pojawiają się przy użyciu ciekawego efektu maszyny do pisania. Wiadomości można zatrzymać, klikając przycisk „Wstrzymaj”. Strzałki mogą służyć do przechodzenia od jednej wiadomości do drugiej.

22. Obrazy adaptacyjne

Skalowalne obrazy do wyświetlania na urządzenia mobilne. Rozmiary obrazu zależą od rozmiaru okna. Wykorzystane technologie: JavaScript i PHP5.

23.vScroller

Pionowy jQuery, scroller CSS3. Regulowana prędkość przewijania i czas opóźnienia.

24. Wielopoziomowe menu rozwijane "jQSimpleMenu"

Świeża wtyczka jQuery do tworzenia wielopoziomowych poziomych menu rozwijanych na stronie.

25. „jscarousel 2.0”

Wtyczka jQuery do karuzeli pionowych i poziomych.

26. Dynamiczny rotator wiadomości

Wtyczka jQuery Pretty Display najnowsze wiadomości z kanału RSS.

27. Animowane menu

Animowany efekt po najechaniu kursorem na pozycję menu.

28. Animowany efekt tekstowy

Trzy spektakularne przykłady pracy z właściwością CSS "background-clip: text". Efekt CSS3 nie działa w starszych przeglądarkach.

29. Efekt rozmycia CSS3 jQuery

Po najechaniu na blok powiększa się, a pozostałe bloki z tekstem są rozmyte w tle.

30. Podpowiedzi CSS3 jQuery

31. Podpowiedzi jQuery po najechaniu myszą

32. Lekkie menu CSS

33. Notatniki CSS3 i HTML5

Implementacja bloków podobnych do notatek z tekstem.

34. Lightbox

Wyświetlaj treści multimedialne w wyskakujących blokach: obrazy, filmy, Flash.

35. jQuery brzęczyk

Powiększenie obszaru kwadratu.

36. Opisy obrazów CSS3 jQuery

Wtyczka "Based Sliding Door Content Gallery" do implementacji wyskakujących opisów obrazów. Po najechaniu kursorem na którykolwiek z prezentowanych obrazów pojawia się krótki opis z linkiem do całego artykułu. Hover: efekt podniesienia bramy garażowej.

37. Efekt "przed i po" plugin jQuery "uCompare"

Przeciągając zasłonę, możesz porównać dwa nałożone na siebie obrazy. Idealny w tych przypadkach, gdy musisz zaaranżować dwie opcje na coś na stronie: przed i po.

38. Efekt rotacji obrazu

39. Interaktywne mapy świata i Europy oraz USA

40. Pokaz slajdów Slider.js v1.1

Kilka różnych animowanych efektów przejścia slajdów.

1. Wtyczka jQuery „Powiększenie w najechaniu”

Oryginalne rozwiązanie do implementacji opisów obrazków po najechaniu za pomocą efektu Zoom.

2. Wtyczka Captify

3. Opis obrazu jQuery w galerii

Gdy najedziesz kursorem na obraz, pojawi się opis obrazu, a sam obraz zostanie wypełniony przezroczystą warstwą o określonym kolorze.

4. Implementacja jQuery podpisów pod obrazkami

Kilka opcji implementacji podpisów do obrazów, które pojawiają się po najechaniu kursorem myszy na obraz.

5. jQuery efekt drzwi przesuwnych

Gdy najedziesz kursorem na miniaturę, w jej miejscu pojawi się opis.

6. Wtyczka jQuery "Zoominfo"

Gdy najedziesz kursorem na obraz, zmniejszy się on i pojawi się tytuł i opis zdjęcia.

7. Wtyczka jQuery Mosaic

Implementacja wyskakujących opisów obrazów po najechaniu kursorem myszy. Pod warunkiem 8 różnego rodzaju podpisy wyskakujące. Możesz je zobaczyć na stronie demo.

Najechanie kursorem myszy na obraz spowoduje wyświetlenie krótkiego opisu z łączem do szczegółowych informacji.

9. Wtyczka do implementacji podpisów pod obrazkami

Inna opcja implementacji podpisów graficznych po najechaniu myszą. Do wyboru są dwa efekty wyglądu napisów jQuery.

10. Opis obrazków „Okno podglądu”

Wtyczka do podpisywania obrazów. Po najechaniu myszą z animowanym efektem pojawia się opis obrazu. jQuery służy do tworzenia animacji.

Przygotowany z materiałów

Wtyczki jQuery należą do najpopularniejszych niezbędne komponenty podczas budowania strony internetowej, a właściwie dowolnej aplikacji internetowej. Pozwalają na rozszerzenie funkcjonalności. W tym artykule wymieniono najbardziej przydatne wtyczki na rok 2012. Dla łatwiejszego wyszukiwania wszystkie wtyczki są podzielone na następujące kategorie: wtyczki do układu strony internetowej, wtyczki do nawigacji, wtyczki formularzy, wtyczki do tworzenia sliderów, wtyczki do wykresów i wykresów, efekty graficzne i inne. Również wśród tych wtyczek znajdują się wtyczki, które pomogą Ci w tworzeniu aplikacji adaptacyjnych.

Wtyczki do układu strony

equalize.js to wtyczka jQuery, która umożliwia tworzenie blokowej struktury witryny. Pozwala wyrównać wysokość i szerokość dowolnego elementu.

Nowa wtyczka do responsywnych układów Freetile pozwala na tworzenie elementów o dowolnym rozmiarze, eliminując jednocześnie potrzebę tworzenia stałych rozmiarów kolumn siatki.

Wtyczka Gridster.JS jquery do tworzenia siatek typu „przeciągnij i upuść”. Może być również używany do dynamicznego usuwania i dodawania elementów z siatki.

zoomooz.js to łatwa w użyciu wtyczka jQuery do powiększania dowolnego elementu strony internetowej. Możesz łatwo dodać efekt powiększenia, po prostu dodając klasę „zoomTarget” do dowolnego elementu HTML. Powiększenie można zresetować, klikając stronę. Wtyczka została przetestowana w Internet Explorer 9, Safari 3+, Firefox 3.6+, Opera i Chrome.

Wookmark to wtyczka do tworzenia dynamicznego szablonu wielokolumnowego.

jQuery HiddenPosition to wtyczka pozwalająca na dodanie dowolnego elementu, nawet jeśli jest ukryty.

Stellar.js to wtyczka jQuery, która zapewnia efekt paralaksy dla elementów.

Wtyczka jQuery, która dodaje prawdziwy efekt przewracania stron podczas nawigowania między sekcjami. używany przyspieszenie sprzętowe. Działa na tabletach i smartfonach.

Responsywna wtyczka typograficzna. Pozwala na użycie selektora, który generuje idealny rozmiar czcionki.

Pozwala budować animowane ruchy w witrynie, w tym wszystkie możliwe przekształcenia

Wtyczki nawigacyjne

HorizontalNav to wtyczka jQuery, która rozciąga poziome menu, aby dopasować je do pełnej szerokości kontenera. Jeśli kiedykolwiek próbowałeś stworzyć efekt prawidłowego rozciągnięcia menu nawigacyjnego w kontenerze CSS projektu, to na pewno wiesz, jak trudno jest to zrobić dla kompatybilności z różnymi przeglądarkami. Ta wtyczka ułatwia.

stickyMojo to lekka, szybka i elastyczna wtyczka do przyklejonego paska bocznego jQuery. Działa z Firefox, Chrome, Safari i IE8+ (dosyć dobrze obsługuje starsze wersje IE).

ddSlick to wtyczka umożliwiająca tworzenie rozwijanych menu z obrazami i opisami.

Wtyczka do prostej organizacji paneli rozwijanych. Wtyczka obsługuje pracę z plikami cookies do przechowywania stanu paneli. Wśród opcji znajdują się funkcje powrotu umożliwiające dostosowanie procesu otwierania i zamykania sekcji.

Wtyczka do tworzenia zwijanych bloków, które mogą zawierać dowolne dane na ograniczonej przestrzeni.

Kształtowanie wtyczek

Wtyczka umożliwia ustawienie poziomu złożoności hasła.

Wtyczka jQuery do wizualizacji procesu wgrywania plików. Obsługuje przeciągnij i upuść oraz tworzy natychmiastowy podgląd zdjęć.

Wtyczka wykrywająca i sprawdzająca liczby karty kredytowe. Pozwala określić rodzaj karty kredytowej.

Wtyczka do filtrowania danych. Możesz filtrować dane według tagów oraz według wielu tagów i kategorii.

Wtyczka, która weryfikuje dane wejściowe E-mail za poprawność według wcześniej przygotowanej listy (tu możesz uwzględnić najpopularniejsze usługi pocztowe mail.ru, yandrex.ru, gmail itp.).

Wtyczki do tworzenia sliderów i karuzeli

Wtyczka umożliwiająca sterowanie przejściami za pomocą myszy, touchpada i klawiatury. Do przejść, które są ustawione domyślnie, możesz dodać dodatkowe, które również znajdują się w pliku źródłowym.

iosSlider

iosSlider to responsywna wtyczka suwaka w różnych przeglądarkach.

RSlider - pełny ekran adaptacyjny suwak. Oautomatycznie dostosuje się do szerokości ekranu.

Fresco to responsywna wtyczka lightbox. Może być używany do tworzenia oszałamiających nakładek, które działają świetnie na wszystkich rozmiarach ekranu, we wszystkich przeglądarkach i na wszystkich urządzeniach.

BookBlock to wtyczka jQuery, której można używać do tworzenia komponentów przypominających broszurę, które umożliwiają tworzenie nawigacji z przerzucaniem stron. Tutaj możesz użyć dowolnej treści, czy to obrazów, czy tekstu. Wtyczka przekształca strukturę tylko wtedy, gdy jest to konieczne (innymi słowy, tylko wtedy, gdy strona jest przewracana) i używa nakładek i cieni, aby wyglądała realistycznie.

Adapter to lekki suwak treści, który zapewnia programistom prosty interfejs do tworzenia pięknych animacji slajdów 2D lub 3D. Obecnie dostępna jest obsługa właściwości 3D w przeglądarkach Webkit i Firefox. Wszystkie przejścia 2D zostały przetestowane w IE6+ i innych nowoczesnych przeglądarkach.

Ciągła karuzela z kilkoma przydatnymi funkcjami.Jest wysoce konfigurowalny i obsługuje nawet starsze przeglądarki.

Nosorożec- całkiem elastyczny jQuery wtyczka pokazu slajdów. Oferowane są nie tylko różnorodne efekty, ale można również dodawać własne style, efekty i funkcje do suwaka.

Sequence to wtyczka jQuery do przewijania treści w oryginalny sposób i dająca pełną kontrolę. Można używać dowolnego rodzaju treści; będzie się przewijać w nieskończoność. Wykorzystuje znaczniki semantyczne, a także obsługuje szablony adaptacyjne oraz urządzenia oparte na technologii dotykowej.

Glisse.js to prosta, responsywna i wysoce konfigurowalna galeria zdjęć jQuery.

Wtyczki do wykresów i wykresów

Morris.js to lekka biblioteka, która wykorzystuje jQuery i Raphaël, aby ułatwić rysowanie wykresów szeregów czasowych.

jQuery Org Chart to wtyczka umożliwiająca tworzenie struktur drzewiastych z zagnieżdżonymi elementami. Dane są wprowadzane do zagnieżdżonej nieuporządkowanej listy, co sprawia, że ​​wtyczka jest niezwykle łatwa w użyciu.

Wtyczki typograficzne

Bacon.js to wtyczka jQuery, która umożliwia zawijanie tekstu wokół krzywej lub linii Beziera.

Textualizer to wtyczka jQuery do tworzenia pięknych efektów tekstowych. Obsługiwana praca w: Chrome, Safari 4+, Firefox 3.5+, IE 6,7,8,9+, Opera 10.6+, Mobile Safari (iOS 4)

SlabText to bardzo przydatna wtyczka jQuery, która łamie nagłówki linia po linii przed zmianą rozmiaru każdej linii, aby wypełnić dostępną przestrzeń poziomą.

trunk8 to wtyczka do obcinania tekstu jQuery. Pozwala wyciąć duży blok tekst na mniejszej części do wstępnej kontroli.

Wtyczki do tworzenia różnych efektów dla obrazów

To jest wtyczka jQuery, która używa filtrów CSS3 do tworzenia efektu pochylenia.

Wtyczka do implementacji efektu obrazów adaptacyjnych.

Wtyczka jQuery ułatwiająca tworzenie map obrazów. Za pomocą tego narzędzia można podświetlić lub wybrać dowolną mapę obrazu, a także można nią manipulować. różne sposoby. Działa na wszystkich głównych przeglądarkach, w tym Internet Explorer 6, nie używa Flasha i nie wymaga niczego poza jQuery. Niektóre zaawansowane efekty wymagają obsługi HTML5, ale nadal będą działać w starszych przeglądarkach.