Archiwum

Posty oznaczone ‘HTML’

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 – kolejna dawka dobrych przykładów (galerie oraz podpowiedzi)

Marzec 4th, 2009

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

podglad-obrazkow0

podglad-obrazkow

podglad-obrazkow2

Podpowiedzikilka przykładów w jaki sposób je wykorzystać. Np na mapach…
podpowiedz

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

- Spacegallery
galeria1

- prettyPhoto – klon lightboxa
prettyphoto

- prettyGallery – kolejny sposób wyświetlania galerii
prettyphoto2

- NyroModal
nayro

- Pirobox jQuery Lightboxprzykłady
dpirobox

- Galleriffic – szybkie generowanie galerii
dgalleriffic

- jQuery Gallery Plugin
jqgalleryplugin

- jQuery Lightbox Plugin (balupton edition)przykłady
lightbox-bal

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

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