jQuery – 35+ praktycznych przykÅ‚adów!
W skrócie czym jest jQuery?
jQuery to lekka Biblioteka programistyczna dla języka JavaScript, ułatwiająca współdziałanie JavaScript oraz HTML. (Wikipedia)
jQuery możemy wykorzystać w celu uczynienia naszej strony bardziej interaktywnÄ…, co nada jej bardziej interesujÄ…cy wyglÄ…d dla użytkownika. Wpis ten jest zbiorem 35+ praktycznych przykÅ‚adów wykorzystania tej jQuery na wÅ‚asnej stronie. Warto mieć pod rÄ™kÄ… spisane wartoÅ›ciowe przykÅ‚ady, które pokazujÄ… jak wykorzystać i do czego je zastosować. W pokazanych poniżej przykÅ‚adach wiÄ™kszość zwiÄ…zana z zastosowaniem do obsÅ‚ugi formularza, w miarÄ™ upÅ‚ywu czasu uzupeÅ‚nione zostanÄ… pozostaÅ‚e kategorie…
Wgrywanie plików…
- Multiple File Upload Plugin (jQuery.MultiFile) – pozwala na na wczytanie kilku plików na serwer, bez koniecznoÅ›ci zatwierdzania formularza 
- AjaxFileUpload – prosty przykÅ‚ad wgrywania plików na serwer
- Menedżer plików/obrazów – demo
- Menedżer plików/obrazów (wtyczka do edytora FCKeditor) – demo
- Menedżer plików/obrazów (wtyczka do edytora Tinymce) – demo
- http://www.pixeline.be/experiments/jqUploader/test.php Wgrywanie plików za pomocą jq 
- Zastosowanie wgrywania plików lub obrazków wewnÄ…trz formularza z wiÄ™kszÄ… iloÅ›ciÄ… pól – demo
Wtyczki pozwalające na zmianę wyglądu pól formularzy!
- jQuery Calculation Plug-in (v0.2) – proste w użyciu funkcje jQuery zastosowane do zwykÅ‚ych funkcji matematycznych.
- jQuery Field Plug-in (v0.9.1) – wtyczka znacznie rozszerzajÄ…ca możliwoÅ›ci elementów formularza.
- Inne spojrzenie na elementy formularza – przykÅ‚ad
- jQuery UI: zmiana wyglÄ…du pola opcji i pola wyboru
- Selectbox – pozwala na zamianÄ™ zwykÅ‚ego elementu selectbox na Å‚adniejszy wyglÄ…dem – demo
- Filtrowanie wprowadzanej zawartości w pola formularza
- Pole wyboru jako obrazek – przykÅ‚ad pokazuje jak zrobić alternatywne i o wiele Å‚adniejsze pola wyboru, niż te jakie nam oferuje standardowo jÄ™zyk HTML.
- Automatycznie powiÄ™kszajÄ…ce/zmniejszajÄ…ce siÄ™ pole tekstowe – dziaÅ‚ajÄ…cy przykÅ‚ad.
- AutouzupeÅ‚nianie pól tekstowych w formularzu – opis przykÅ‚adu
- FCBKcomplete – auto uzupeÅ‚nianie podobne do tego zamieszczonego na Facebooku demo
- Kolejne pola wyboru – pozwalajÄ…ce użyć arkusza CSS oraz etykiety do nadania stylu dla pola wyboru.
- Wtyczka – pozwalajÄ…ca na nadanie stylu dla przycisku opcji dodawanego za pomocÄ… elementu input.
Okienka dialogowe
Wtyczki do obsługi obrazków!
- imgAreaSelect – jest wtyczkÄ… pozwalajÄ…ca zaznaczać prostokÄ…tne obszary na obrazku
- Automatyczne skalowanie rozmiaru obrazka 
Różne zastosowania…
- Chmura tagów – zredukowano ilość tagów poprzez wyÅ›wietlenie szczegółów tagu jako efekt hover
- jQuery.Preload – demo 
- Wtyczka pomagajÄ…ca na podziaÅ‚ stron – przykÅ‚ad
- liScroll – wtyczka jQuery przetwarzajÄ…ca listÄ™ zdefiniowanÄ… za pomocÄ… elementów li na przewijany pasek najnowszych np. wpisów
- Zwija / rozwija dodatkowy tekst oraz dodaje odnoÅ›nik ‘czytaj wiÄ™cej’
GÅ‚osujemy… 
- Skrypt paska gÅ‚osowania – oparty na PHP oraz MySQL-u, dziaÅ‚a jak każdy tego typu web 2.0-owy skrypt (gÅ‚osowania odbywa siÄ™ bez przeÅ‚adowania siÄ™ strony)
Edytory, pozwalajÄ…ce na pracÄ™ w bardzo szybki i wydajny sposób…
- Edytor pól tekstowych w Ajaksie
- przykÅ‚ad – edytor stosujÄ…cy Ajax, umożliwiajÄ…cy zmiany na stronie bez używania do tego przycisku potwierdzajÄ…cego zmiany
Podpowiedzi…
- Skrypt podpowiedzi w JavaScripcie
- Autolink, mailto, highlight – kilka fragmentów kodu do automatycznego generowania w tekÅ›cie odnoÅ›ników typu (http/https/ftp), oraz do tworzenia odnoÅ›ników adresów e-mail i pozwalajÄ…cy na ich podÅ›wietlanie.
- Podgląd wyglądu strony w linku za pomocą wyświetlonej miniatury generowanej przy zastosowaniu strony http://www.websitethumbnails.net. Tworzy miniaturę strony do jakiej odnosi się link, podgląd stworzony zostaje po najechaniu na odnośnik kursorem myszki.
Elementy interfejsu: drzewa, menu, okienka dialogowe…
- Wtyczka jQuery Accordion pozwala tworzyć menu rozwijane / zwijane działające w sposób przypominający akordeon.
–
- Menu, okienka dialogowe, Drzewa, Siatki w Ajaksie
To oczywiście nie koniec listy, z czasem uzbiera się nowa lista wtyczek wartych polecenia, to zaktualizuje ten wpis, dlatego polecam śledzić bloga. Na koniec polecam 3 poniższe artykuły wprowadzające do jQuery.
Zobacz także:
Ciekawe , warte zastosowania…
Bardzo przydatne. Dziękuję bardzo za przykłady. Ahoj
Wow, rewelka. Zastosowałem kilka przykładów w swojej prezentacji na seminarium. Świetnie opisane. Dzięki
cool
A ja sie nie zgodze…
wykorzystam niektóre rzeczy w projekcie z informatyki
wielkie dzięki, że istnieje takie kompendium
Mam pytanie odnośnie swojej www. Wrzuciłem na swoją stronę lightboxa video i na serwer film, który ma być odtwarzany i nie działa. Ale jeśli wstawiłem link do filmu z youtube.pl to film jest odtwarzany czyli wszystko poprawnie zrobiłem. Co takiego ma youtube że filmy z ich strony są odtwarzane a z mojej nie? Dodam że próbowałem konwertować na różne formaty .swf i .flv i nic to nie dało. Jeśli ktoś wie o co chodzi, lub gdzie wgrać film (głównie chodzi mi o prywatność, nie chcę aby cały świat go oglądał) aby wyświetlać go na swojej www. Nie mam profesjonalnej domeny ani pojemnego konta. Stronę umieściłem na serwerze interia.pl. Proszę o pomoc.
Pozdrawiam
Musisz wykorzystać jakiÅ› odtwarzacz plików flv, ja np. korzystam z http://flv-player.net/players/normal/ – tu możesz Å‚atwo skonfigurować odtwarzacz i wstawić gotowy kod na stronÄ™,
pozdrawiam