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:
Ajax, CSS, Fragmenty kodu, HTML, JavaScript, PHP, jQuery
Ajax, CSS, HTML, jQuery, PHP
