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
- jQuery Impromptu
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
- Przewijany pokaz pozycji
- 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)
- Sonda w Ajaksie
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:
