Miesięcznik informatyków i menedżerów IT sektora publicznego

Paweł Ziółkowski

Biblioteka jQuery i dodatki

Wykresy, tabele, edytory tekstu – to tylko niektóre przykłady zastosowania jQuery na naszej stronie. W artykule przyjrzymy się dodatkowym i bardziej zaawansowanym możliwościom biblioteki oraz niektórym jej wtyczkom.

itwa.pl/extra
itwa.pl/extra

Przedstawiliśmy już, w jaki sposób działa biblioteka oraz jak należy używać jej podstawowych funkcji (więcej na ten temat w artykule „Podstawy pracy z jQuery”, „IT w Administracji” 2018, nr 2). To jednak tylko skrawek możliwości tego narzędzia. Pierwszym, bardziej zaawansowanym mechanizmem, któremu się przyjrzymy, będą animacje.

Ruchome obrazki

Ruch elementów strony możemy uzyskać za pomocą stylów. Zdefiniowanie odpowiednich właściwości CSS oraz klas elementu HTML da nam efekt animacji. Realizacja takiego zadania wymaga zdefiniowania właściwości @keyframes, przypisania go do odpowiedniego elementu na stronie oraz skonfigurowania animacji:

// plik css
@keyframes powiekszCzcionke {
to {font-size: '20px';}
}
div:hover {
animation-name: powiekszCzcionke;
animation-duration: 1s;
}

Kod ten spowoduje zwiększanie się czcionki w elemencie div wtedy, gdy będzie się nad nim znajdował kursor (pseudoklasa hover). Właściwość @keyframes powiekszCzcionke to zbiór właściwości określających, jak ma wyglądać dany element po wykonaniu animacji (obiekt to). Niestety, nie wszystkie przeglądarki obsługują tak samo polecenia CSS, więc należałoby jeszcze dodać atrybuty dla wszystkich potencjalnych przeglądarek (prefiksy web­kit, moz). W wypadku animacji jQuery udostępnia metodę animate, do której trzeba przesłać obiekt opisujący wygląd elementu po zakończeniu animacji (podobnie jak w pliku css):

$('div').hover(function() {
$(this).animate({
'font-size': '20px'
}, 1000);
})

Drugim argumentem funkcji jest czas (w milisekundach), który określa, jak szybko dana animacja powinna się skończyć. Zmienna $(this) jest obiektem biblioteki reprezentującym element HTML zwrócony przez funkcję $ – div. jQuery ułatwia pracę z animacjami również przez dbanie o poprawny kod dla wszystkich przeglądarek (silników). Nie jest od nas wymagane używanie prefiksów właściwości CSS, więc mamy do napisania mniej kodu.

API funkcji animate (api.jquery.com/animate) jest bardzo elastyczne. Możemy ją wywołać na kilka sposobów, w zależności od przekazanych argumentów. Poza wywołaniem funkcji z obiektem docelowym CSS możemy przekazać czas trwania (domyślny wynosi 400 ms), funkcję, która zostanie wywołana po zakończeniu animacji, lub funkcję, która będzie wywoływana w kolejnych jej krokach. Należy dodatkowo zwrócić uwagę, że mamy dwie formy funkcji animate: uproszczoną oraz złożoną, gdzie drugim parametrem jest obiekt z opcjami. Ciekawym parametrem jest również easing przekazywany jako łańcuch, który określa tempo animacji – swing (domyślny) lub linear. Wizualne porównanie tych funkcji znajdziemy na stronie jqueryui.com/easing, klikając w daną opcję. Poza funkcją animate, do której musimy przekazywać opis właściwości CSS elementu, możemy posłużyć się gotowymi funkcjami jQuery, które wprawią w ruch naszą stronę.

Wbudowane animacje

Jedną z najczęściej używanych funkcji animacji jest funkcja hide, która ustawi właściwość display na hide wybranego elementu. Dodajmy do naszej strony przycisk, który będzie ukrywał formularz z danymi ucznia, przez wywołanie funkcji hideForm:

// plik addStudent.js
ctrl.hideForm = () => {
$('form').hide();
}

Podobnie jak w wypadku innych funkcji animacji jQuery, możemy przekazać więcej argumentów do funkcji hide i wzbogacić jej działanie, np. przez easing. Przeciwieństwem funkcji hide jest funkcja show, która zmieni wartość display na pierwotną (przypisaną do elementu podczas wczytania strony). Dodatkowo do wspomnianego kodu hide można dopisać drugi przycisk, który pokazywałby formularz. Innym i łatwiejszym rozwiązaniem jest jednak funkcja toggle, która będzie odwracała wartość display z aktualnej na przeciwną (np. block na hide) – element będzie pokazywany, jeżeli jest ukryty, i ukrywany, jeżeli jest widoczny.

Funkcja fadeOut sprawi, że wskazany element zacznie znikać ze strony (właściwość opacity zostaje ustawiona na 0), a potem zostanie usunięty z układu (podobnie jak w funkcji hide, właściwość display zostanie ustawiona na hide). Odwrócenie działania fadeOut zapewni nam funkcja fadeIn, a ich połączenie to fadeToggle. Jeżeli z kolei chcielibyśmy wyświetlić coś na stronie w formie schodzącej kurtyny, możemy użyć funkcji slideDown, która przesunie wszystkie elementy w dół, żeby zrobić miejsce na element, który chcemy wyświetlić. Funkcja slideUp ukryje w ten sam sposób element, a slideToggle raz go ukryje, a raz pokaże. Wykaz pozostałych funkcji znajduje się na stronie z efektami jQuery api.jquery.com/category/effects. Znajdują się tam również przykłady ich użycia w kodzie oraz osiągany za ich pomocą efekt wizualny.

Jak wspomnieliśmy wcześniej, większość tych funkcji przyjmuje parametr easing (tempo animacji). W podstawowej bibliotece jQuery mamy dostępne dwie funkcje easingu. Jeżeli chcemy mieć ich więcej, należy skorzystać z rozszerzenia o nazwie jQuery UI.

jQuery UI

To rozszerzenie jest w zasadzie zbiorem funkcji znanych z jQuery wzbogaconym o efekt animacji, dodatkowe efekty wizualne oraz widżety (m.in. kalendarz, okno dialogowe, menu). jQuery UI jest rozwinięciem standardowej biblioteki jQuery i aby poprawnie działał, należy dodać do strony zarówno biblioteki jQ i jQ UI, jak i pliki stylów CSS tego dodatku. Przy pobieraniu wtyczki nie musimy ściągać całej biblioteki. Konfigurację pakietu znajdziemy na stronie jqueryui.com/download.

[...]

Autor jest absolwentem Uniwersytetu Ekonomicznego we Wrocławiu, pracuje jako informatyk w Urzędzie Gminy w Miękini.

Materiały dodatkowe (245 KB)

Pełna treść artykułu jest dostępna w papierowym wydaniu pisma. Zapraszamy do składania zamówień na prenumeratę i numery archiwalne.
 
 

Polecamy

Biblioteka Informacja Publiczna

Specjalistyczne publikacje książkowe dla pracowników administracji publicznej

więcej