Magazyn T3
newsy, felietony, testy i tutoriale



Internet Maker

15/03/2010

10 świeżych skryptów jQuery

Więcej artykułów autorstwa »
Napisane przez: Marcin Kosedowski
Tagi:
76-10_swiezych_skryptow_jquery.png

jQuery może i jest za ciężkie, ale nie można mu odmówić mu popularności. Przedstawiamy 10 przydatnych skryptów do wykorzystania na stronach.

Jeśli nie stanowi to dużego problemu technicznego, to strony powinny {link_wew 6443}działać poprawnie bez JavaScriptu{/link_wew}. 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/easy-slider-17-numeric-navigation-jquery-slider

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/01/how-to-make-a-smooth-animated-menu-with-jquery/

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.

Coda Popup Bubbles

http://jqueryfordesigners.com/coda-popup-bubbles/

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/Jcrop.html

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.

Coda slider 2.0

http://www.ndoherty.biz/demos/coda-slider/2.0/

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/06/submit-multiple-forms-jquery-ajax.html

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.

Kalendarz jak od Apple

http://www.stefanoverna.com/log/create-astonishing-ical-like-calendars-with-jquery

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-current-field-highlighting-in-forms/

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.

Testowanie formularzy

http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

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!

Dynamiczne tworzenie wykresów

http://www.filamentgroup.com/lab/jquery_visualize_plugin_accessible_charts_graphs_from_tables_html5_canvas/

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.

Może Cię zainteresować:

  1. AJAX Kurs od podstaw – jQuery
  2. Framework jQuery – JavaScript nie boli
  3. jQuery – od czego zacząć


O autorze

Marcin Kosedowski
Freelancer związa­ny z mediami od 2007 roku. Opublikował do tej pory ­ponad 500 artykułów m.in. dla Magazynu T3, Gazety Wyborczej, Onetu czy Nexta. Jako bloger pomaga przy projektowa­niu i wdroże­niach serwisów internetowych. Jest prezesem zarządu Stowarzyszenia FreelanCity.org.




0 komentarzy


Skomentuj pierwszy!


Zostaw odpowiedź

Twój adres nie zostanie opublikowany. Wymagane pola są oznaczone *

*

Możesz używać tych tagów i atrybutów HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">