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: