Create WWW

Kolejna dawka praktycznych przykładów pokazujących możliwości jQuery. Przeszukując sieć w poszukiwaniu potrzebnych nam w danym momencie nam informacji, nie raz trafiamy na bardzo ciekawe artykuły, prezentujące nam w różny sposób możliwości wyświetlania galerii, zdjęć lub także prezentację zawartości strony. Poniżej zbiór kolejnych kilku ciekawych zastosowań jQuery, tym razem w większości poświęcony wyświetlaniu galerii oraz prezentacji treści.

Podpowiedzi i podgląd obrazków – 3 przykłady wykorzystania

Podpowiedzi – kilka przykładów w jaki sposób je wykorzystać. Np na mapach…

Kilka sposobów wyświetlenia galerii na stronie (lightboxy itp.)

- Spacegallery

- prettyPhoto – klon lightboxa

- prettyGallery – kolejny sposób wyświetlania galerii

- NyroModal

- Pirobox jQuery Lightbox – przykłady

- Galleriffic – szybkie generowanie galerii

- jQuery Gallery Plugin

- jQuery Lightbox Plugin (balupton edition) – przykłady

I na koniec jeszcze prosty pokaz slajdów…

Warto także przeczytać poprzedni wpis także poświęcony możliwościom jQuery. Już niebawem kilka kolejnych zastosowań w postaci przykładów.

CSS, CreateWWW, Fragmenty kodu, jQuery Ajax, CSS, HTML, JavaScript, jQuery, Lightbox, Tworzenie www

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:

• Wprowadzenie do jQuery
• jQuery – to łatwe!
• jQuery – od czego zacząć?

Ajax, CSS, Fragmenty kodu, HTML, JavaScript, PHP, jQuery Ajax, CSS, HTML, jQuery, PHP

Muzyka na stronie – temat dość kontrowersyjny. Jako, że sam nie polecam stosowania jakiegokolwiek zagnieżdżania muzyki na stronie www, to czasem nie da rady obejść wymagań klienta i pomimo własnych uprzedzeń trzeba tą muzykę na stronę wstawić.
Jeśli już wstawiamy muzykę na stronę, to jedna bardzo ważna zasada – nie katujmy użytkownika danej strony tym, że w momencie gdy przechodzi on na jedna z podstron serwisu musi on słuchać zagnieżdżonego fragmentu muzyki po raz kolejny od początku!

W sieci można znaleźć kilka sposobów (ja znalazłem 3 możliwości) na osiągnięcie płynnego odtwarzania muzyki, pozwalającego na jednoczesne przeglądanie zawartości serwisu. Oto one:
- Zastosowanie ramek -> samo wykorzystanie ramek w tym momencie eliminuje jego wykorzystanie,
- Zrobienie całej strony we Flashu – co mi się kojarzy równie podobnie jak wspomniane ramki,
- Zastosowanie wyskakującego okienka – co jest także złe, ale z trojga złego jeszcze do zaakceptowania, oczywiście licząc się z irytacją użytkownika, który zapewne uwielbia jak mu z boku wyskakują niekontrolowane, niepożądane okna oraz należy się liczyć z tym, że większość użytkowników ma włączoną blokadę wyskakujących niespodzianek.

Przeglądając kilka tygodni temu artykuły w serwisie Nettuts, jeden przykuł moja uwagę. Może nie tyle on co powstały w jego wyniku przykład wykorzystania jQuery do animowanego wczytywania zawartości podstron w jakimś tam serwisie.

Działa on w bardzo prosty sposób. Wchodząc na stronę, wczytana zostaje jej zawartość, w momencie gdy chcemy przejść na podstronę, doczytywana jest tylko treść z określonego diva, czyli wszystko nad znacznikiem div nie jest ponownie wczytywane podczas odświeżenia strony.

Pojawia się więc możliwość umieszczenia np. odtwarzacza z nieszczęsną muzyką powyżej zawartości, która doczytuje podstrony wykorzystując jQuery.

Przykład: http://medeco.p9.pl/ex/muzyka/

Pomimo znalezienia owego sposobu na wyżej opisany problem (bo opisany przeze mnie sposób w 95% przypadków może z powodzeniem zastąpić wspomniane powyżej) oraz pomimo tego, że nie trzeba stosować prehistorycznego kodu lub robienia całej strony we Flashu, to nie udało mi się wykorzystać go do celu w jakim go wymyśliłem :/.
Powodem było/jest to, że strona jaką ostatnio robiłem i, na której musiałem zastosować muzykę, posiada na każdej podstronie inne tło definiowane w body (czyli w części gdzie nie dochodzi do doczytania podstrony), co nie pozwala na wykorzystanie rozwiązania.
Może ktoś ma jakiś pomysł jak zmienić dodatkowo tło podstrony bez przeładowania? Chyba, że znacie jeszcze inne sposoby na ww. problem?

W każdym bądź razie może komuś się przyda powyższy pomysł na użycie muzyki na stronie .

Oryginalny wpis był przeze mnie umieszczony na prywatnym blogu, gdzie także zapraszam.

Flash, Fragmenty kodu, Tworzenie stron WWW, jQuery Flash