10 świeżych skryptów jQuery

Jeśli nie stanowi to dużego problemu technicznego, to strony powinny działać poprawnie bez JavaScriptu. Może on być niedostępny na komórkach lub zanim witryna załaduje się do końca.

Jeśli jednak decydujemy się na naszpikowanie strony skryptami, warto wykorzystać gotowe rozwiązania. Przedstawiamy 10 nowych lub przydatnych skryptów i pluginów używających jQuery. Większość z nich oparta jest o semantyczny kod i działa nawet w ekstremalnych sytuacjach.

Easy slider 1.7

http://cssglobe.com/post/5780/...

Mocno konfigurowalny i łatwy w użyciu skrypt służący do płynnego przewijania obrazków znajdujących się na stronie. Gotowy do ściągnięcia skrypt charakteryzuje się ładnym wyglądem domyślnym, ale oczywiście można go dostosować do swoich potrzeb.

Płynnie rozwijane menu

http://buildinternet.com/2009/...

Tutorial pozwalający na stworzenie menu, w którym po najechaniu na element płynnie rozwinie się pole z jego opisem. Zarówno kod oparty na listach jak i jak wygląd są bardzo estetyczne. Sam skrypt mieści się zaledwie w kilku linijkach. Leniwi mogą pobrać gotowy efekt pracy.

Rozwijane menu też może być semantyczne.

Coda Popup Bubbles

http://jqueryfordesigners.com/...

Efektowny skrypt pozwalający na dodanie dymków z opisem elementu. W przykładzie wykorzystano go do pokazania szczegółowych informacji o pobieranym pliku. Dzięki semantycznemu zastosowaniu tabel dane wyświetlają się poprawnie nawet bez arkusza stylów.

Jcrop

http://deepliquid.com/content/...

Zaawansowane narzędzie do przycinania obrazków. Pozwala na dodanie do grafiki miniatury, zachowanie stosunku krawędzi po przycięciu i kila innych funkcji. Na obszar poza przycięciem może zostać nałożony dowolny styl. Po wyłączeniu JavaScriptu widać jedynie początkowy obraz. Wydany na licencji MIT.

Gotowe przycinanie obrazków w JavaScripcie.

Coda slider 2.0

http://www.ndoherty.biz/demos/...

Znany od dwóch lat skrypt coda-slider doczekał się drugiej wersji. Służy do dynamicznej zmiany treści znajdującej się w kontenerze i wykorzystuje charakterystyczny efekt przesunięcia tekstu. Skrypt można zastosować zarówno na stronach prywatnych jak i komercyjnych – został wydany na licencjach MIT i GPL.

Komentarze jak z Facebooka

http://www.9lessons.info/2009/...

Nieco bardziej skomplikowany, bo wymagający współpracy na poziomie PHP – JavasScript, skrypt pozwalający na dynamiczne dodanie pola komentarzy w wielu miejscach na jednej stronie. Dokładnie tak jak na Facebooku.

Stworzenie komentarzy takich jak na Facebooku wymaga trochę pracy.

Kalendarz jak od Apple

http://www.stefanoverna.com/lo...

Kalendarze na stronach zwykle tylko przeszkadzają, ale są miejsca, w których okazują się przydatne (np. w archiwach). Skrypt udający iCal, znany z Mac OS, jest jednym z ładniejszych jakie udało nam się znaleźć, a w dodatku dobrze integruje się z WordPressem.

Podświetlenie aktualnego pola

http://css-tricks.com/improved...

Prosty, ale efektywny skrypt do poprawy wyglądu formularzy. Przy wypełnianiu pola podświetlane jest nie tylko ono, ale również cały wiersz w formularzu. W połączeniu ze sprawdzaniem poprawności formularzy efekt będzie bardzo ciekawy.

Proste efekty są proste do wykonania jeśli korzystamy z jQuery.

Testowanie formularzy

http://www.position-absolute.c...

Skrypt Cedrica Dugasa to prosty sposób na testowanie formularzy. Mimo że podpowiedzi są raczej brzydkie, to sam kod działa bardzo dobrze i pozwala wychwycić wiele błędów zanim użytkownik wyśle formularz do walidacji po stronie serwera.

W ramach zapłaty możemy (ale nie musimy) postawić autorowi piwo. 6 złotych za taki skrypt? Z pewnością warto!

Gotowa walidacja formularzy po stronie klienta.

Dynamiczne tworzenie wykresów

http://www.filamentgroup.com/l...

Plugin do jQuery wykorzystuje HTML5 do dynamicznego generowania wykresów na podstawie danych tabelarycznych. Stworzony wykres możemy edytować. Co ważne, skrypt działa również pod IE6! Do jego obsługi nie jest potrzebny CSS, ale użytkownicy niekorzystający z JavaScriptu nie zobaczą nic.

Dynamiczne wykresy stworzone dzięki jQuery i HTML5.