Archiwum

Archiwum dla ‘HTML’ Kategoria

Fundecor.pl – kraina naklejek

Czerwiec 27th, 2010

Strona internetowa Fundecor.pl to mini sklepik internetowy służący do zakupu naklejek drukowanych do wystroju pokoi dziecięcych.

www.fundecor.pl

www.fundecor.pl

www.fundecor.pl

www.fundecor.pl

więcej: http://fundecor.pl

CreateWWW, HTML, Portfolio, Strony internetowe, Tworzenie stron WWW, jQuery, strona www , , , , ,

Golden Beauty Uniques

Sierpień 5th, 2009

Golden Beauty Uniques – makijaż permanentny, makijaż długotrwały, stylizacja paznokci, semi-permanentne przedłużanie rzęs… w wielkim skrócie tym zajmuje się firma, dla której Create WWW wykonało stronę internetową.

Makijaż permanentny - Brzeg

Makijaż permanentny - Brzeg

Więcej:

CreateWWW, HTML, Portfolio, Tworzenie stron WWW , , , ,

jQuery – 35+ praktycznych przykładów!

Styczeń 24th, 2009

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
jq-wgrywanie-plikow

- AjaxFileUpload – prosty przykład wgrywania plików na serwer
jq-wgrywanie-plikow3

- Menedżer plików/obrazówdemo

- Menedżer plików/obrazów (wtyczka do edytora FCKeditor)demo
jq-wgrywanie-plikow2

- 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 jq-20.gif

- Zastosowanie wgrywania plików lub obrazków wewnątrz formularza z większą ilością pól – demo
jq-wgrywanie-plikow5

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.
jq-12.gif

- jQuery Field Plug-in (v0.9.1) – wtyczka znacznie rozszerzająca możliwości elementów formularza.

- Inne spojrzenie na elementy formularzaprzykład
jq-9.gif

- jQuery UI: zmiana wyglądu pola opcji i pola wyboru
jq-formularz-styl1

- Selectbox – pozwala na zamianę zwykłego elementu selectbox na ładniejszy wyglądem – demo
jq-select1

- Filtrowanie wprowadzanej zawartości w pola formularza
form2

- 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.
checkbox-jquery.jpg

- Automatycznie powiększające/zmniejszające się pole tekstowe – działający przykład.

- Autouzupełnianie pól tekstowych w formularzuopis przykładu
autocomplite-jq.gif

- FCBKcomplete – auto uzupełnianie podobne do tego zamieszczonego na Facebooku demo
facebook

- 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
okno

Wtyczki do obsługi obrazków!

- imgAreaSelect – jest wtyczką pozwalająca zaznaczać prostokątne obszary na obrazku
jq-11.gif

- Automatyczne skalowanie rozmiaru obrazka
jq-3.gif

Różne zastosowania…

- Chmura tagów – zredukowano ilość tagów poprzez wyświetlenie szczegółów tagu jako efekt hover
jq-8.gif

- jQuery.Preloaddemo
jq-6.gif

- Wtyczka pomagająca na podział stronprzykład
jq-5.gif

- liScroll – wtyczka jQuery przetwarzająca listę zdefiniowaną za pomocą elementów li na przewijany pasek najnowszych np. wpisów
jq-4.gif

- Przewijany pokaz pozycji
jq-1.gif

- Zwija / rozwija dodatkowy tekst oraz dodaje odnośnik ‘czytaj więcej’
jq-2.gif

Głosujemy… :P

- 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)
rating-star.png

- Sonda w Ajaksie
js-3.gif

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
ja-2.gif

Podpowiedzi…

- Skrypt podpowiedzi w JavaScripcie
302.gif

- 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.
hightlight.jpg

- 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.
jq-13.gif

- Menu, okienka dialogowe, Drzewa, Siatki w Ajaksie
js-1.gif

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 , , , ,