Blog

jQuery UI – Efekty

jQuery UI Logo

jQuery UI, to biblioteka, a właściwie zbiór wtyczek do jQuery, które poszerzają jego funkcjonalność i ułatwiają tworzenie elementów dynamicznych takich jak suwaki, elementy dające się „przenieść” (drag&drop), menu rozwijane i sporo więcej. Niestety jest tego tak dużo (a w dodatku niektóre funkcje łączą się ze sobą), że nie zmieszczę tego w jednym artykule, ale podzielę to na kilka mniejszych. W tym opowiem ogólnie o całej paczce.

jQuery UI zapewnia abstrakcje na niskim poziomie interakcji i animacji, zaawansowane efekty i wysokie, wzory stosowania motywów, zbudowany na szczycie JavaScript jQuery

jQuery UI to zestaw interakcji interfejsu użytkownika, efektów, widgetów i motywów zbudowanych na podstawie biblioteki jQuery JavaScript. Niezależnie od tego czy programujesz wysoce interaktywne aplikacje lub po prostu potrzebujesz dodać wybór daty do formantu formularza, jQuery UI jest idealnym wyborem.
jQuery UI znacznie ułatwia wprowadzanie efektów i ciekawych animacji na witrynie, uatrakcyjniając wygląd i funkcjonalność naszego serwisu.

Opis wszystkich części biblioteki zajął by kilkadziesiąt stron dlatego będę starał się umieszcać jak najmnjesze party aby dobrze wytłumaczyć niektóre rzeczy.

Efekty
Tym co z pewnością najłatwiej opisać są efekty, czyli motywy dla zmian widoczności, których jest dosyć dużo, a ich nazwy mogą nie być dla wszystkich oczywiste.

Blind – zwijanie lub rozwijanie elementu polegające zmniejszaniu, lub zwiększaniu wysokości elementu.
Blind →

Bounce – efektowne podstakiwanie elementu.
Bounce →

Clip – zwijanie lub rozwijanie elementu z obu stron do środka i od środka na zwenątrz.
Clip →

Drop – wysuwanie elementu z lewej strony w połaczeniu z przeźroczystością, ukrywanie odbywa się w prawą stronę.
Drop →

Explode – animacja dzieląca element na 9 kawałków i oddalająca je o środka ekranu w połaczeniu ze zwiększaniem przeźroczystości.
Explode →

Fade – stopniowe zwiekszanie lub zmniejszanie przeźroczystości elementu w zakresie 0% – 100%.
Fade →

Fold – efekt polegający na rozwinięciu animacji Blind: element zwija się w pionie, a następnie w poziomie.
Fold →

Highlight – element błyska na żółto zanim zniknie/pojawi się.
Highlight →

Puff – efekt nadmuchiwania, element stopniowo powiększa się i znika.
Puff →

Pulsate – element pojawia się i znika kilkukrotnie.
Pulsate →

Scale – rozwinięcie efektu Clip, element zwija się do środka zarówno w poziomie, jak i w pionie.
Scale →

Shake – element przesuwa się na lewo i prawo, trzęsie się w poziomie.
Shake →

Size – zmiana szerokości i wysokości obiektu na zadaną wartość, co ciekawe twórcy twierdzą, że spokojnie można tego używać do całkowitej zmiany widoczności.
Size →

Slide – efekt na tej samej zasadzie co Drop ale bez zmiany w widoczności (póki akcja nie zostanie zakończona).
Slide →

Transfer – transfer kontur elementu do innego elementu. Bardzo przydatne podczas próby wizualizacji interakcji między dwoma elementami.
Transfer →

Skrypty PHP IPS