Jedna z odwiecznych kłótni w internecie – używać jQuery czy nie? Lepszy jest sam, czysty JavaScript czy lepiej wykorzystać jQuery – bibliotekę, która wiele spraw upraszcza, ale też waży kilka kB więcej?

Jestem zdania, że takie kłótnie nie mają zazwyczaj sensu, bo wystarczy wybrać odpowiednie narzędzie do odpowiedniej pracy. Dla klienta i tak ostatecznie liczy się efekt. Szczególnie firma czekająca na swoją stronę wizytówkę z 5 zakładkami raczej nie zwróci uwagi na to, czy wszystko wykorzystałeś jakieś wtyczki, czy może poświęciłeś 3x więcej czasu, by stworzyć całość od podstaw.

Poniższa lista zawiera kilka pluginów jQuery, które kiedyś pomogły mi przy tworzeniu projektów, ale są też inne, które mogą wyręczyć z wielu nudnych czynności.

1. Animsition

Płynna zmiana strony JS

Wtyczka, która umożliwia stworzenie efektu przejścia między dwiema stronami, tak by nie ładowały się one w typowy sposób, ale z animacją. Dotychczas taki efekt można było czasem zauważyć w aplikacjach stworzonych w AngularJS czy innym frameworku.

Dostępnych jest 58 animacji – od prostego zanikania (fade) do obracania (rotate) czy efektu powiększenia (zoom).

2. iCheck

iCheck - zmiana stylów checkboxów

Stworzenie własnych, ostylowanych checkboxów w HTML i CSS nie należy do prostych rzeczy. Często trzeba posługiwać się różnymi trickami, ale z pomocą przychodzi iCheck. Użyłem tego pluginu w kilku projektach i w prosty sposób pozwolił mi stworzyć formularze bardziej przyjazne dla oka.

3. Select2

Inny wygląd pola select w HTML

Poprzednia wtyczka pomogła zmienić wygląd checkboxów, a teraz czas na pole select. Select2 sprawia, że domyślny wygląd pól wyboru zmienia się w bardziej czytelny i przyjazny.

4. pickadate.js

Wtyczka do pobierania daty

Kolejny raz plugin powiązany z polami formularza, ale tym razem pomagający wybrać konkretną datę i godzinę. Całość wyświetla się w dużym okienku modal i jest czytelna nawet na urządzeniach mobilnych.

5. Slick

Wtyczka Slick - slider

Jeden z moich ulubionych sliderów (tak nazywają to klienci), choć tak naprawdę jest to karuzela. Bardzo uniwersalna wtyczka, którą często wykorzystuję, by zaprogramować slider na stronie.

Nie ma tutaj bardzo skomplikowanych efektów przejścia i wielu bajerów, które są w typowych sliderach. Dla mnie jest to duża zaleta, bo sam plugin jest prosty w obsłudze i responsywny, więc można go szybko dostosować do wyglądu strony.

 

 

6. Dragula

jQuery wtyczka drag and drop - Dragula

Plugin, który mocno upraszcza tworzenie interfejsu typu drag and drop. Jakiś czas temu zrobiłem puzzle w czystym JavaScript i powiem tylko jedno – na chwilę obecną już nigdy nie spróbuję tworzyć przeciągalnych elementów w HTML5 i JavaScript od podstaw.

Instrukcje i tutoriale mało pomagają, jest sporo zdarzeń, które nie działają intuicyjnie itd. To jest dosłownie masakra.

Gdy teraz patrzę na to, jak działa Dragula (i inne wtyczki tego typu), podejrzewam, że cały projekt zrobiłbym w 3 razy krótszym czasie i bez nerwów.

7. Magnific popup

jQuery efekt lightbox - galeria zdjęć

Responsywne okienko lightbox, które wyświetla elementy w minimalistycznym stylu. Może to być zarówno pojedynczy obrazek, jak i pełna galeria (pojawiają się strzałki po bokach).

Dostępne są też proste okienka z treścią HTML czy tryb High-DPI dla ekranów Retina. Wtyczka jest szybka i podstawowa paczka waży tylko 3 kB.

8. AnimatedModal.js

Animowane okienko popup (modal)

Plugin, który umożliwia stworzenie pełnoekranowego okienka modal z animacją w CSS3. Można wykorzystać bibliotekę Animate.css lub stworzyć własne przejścia.

9. Scrollify

Płynne przechodzenie między stronami w jQuery

Wtyczka z ciekawym efektem, pomagającym w przechodzeniu do kolejnych części strony. Strona jest automatycznie przewijana w miarę jak ruszasz kursorem. Często na stronie z takim efektem można też zobaczyć boczne menu, które ułatwia poruszanie się po witrynie takiego typu.

10. Masonry

Masonry - dynamiczne układanie treści

Ciekawy dodatek, który automatycznie układa wybrane elementy tak, by zajmowały odpowiednio dużo miejsca, bez przerw między nimi.

Efekt, który można uzyskać dzięki tej wtyczce, jest często widoczny na stronach dla fotografów. Jedno zdjęcie jest większe, drugie mniejsze i szersze, a jednak zajmują tyle miejsca na stronie, ile potrzebują – bez niepotrzebnych przerw.

11. Progression.js

Pasek postępu w JavaScript

Plugin, który może poprawić User Experience na stronie (wrażenia użytkownika). W momencie gdy wypełniasz jakieś pole formularza, obok pojawia się dymek z podpowiedzą oraz paskiem postępu (np. jedno pole to 20% całości). Ciekawe narzędzie, które z pewnością pomoże w wypełnianiu bardziej skomplikowanych formularzy.

12. Morris.js

Morris.js - wykresy w JavaScript

Dodatek odpowiedzialny za rysowanie przeróżnych wykresów. Wystarczy, że wprowadzisz odpowiedni zbiór danych, a morris.js zajmie się resztą i wyświetli to w czytelny, miły dla oka sposób.

13. Typeahead

Typeahead od Twittera - przewidywanie wpisanego tekstu

Narzędzie od Twittera, które wprowadza podpowiadanie treści wypełnianego pola (autocomplete). Dzięki temu można szybciej wpisać interesujący nas tekst i wybrać gotową podpowiedź.

14. Lazy Load

Lazy Load - ładuj zdjęcia gdy są widoczne

Ciekawe narzędzie, które może znacząco zmniejszyć zużycie transferu na serwerze i przyspieszyć stronę.

Lazy Load sprawia, że zdjęcia będą ładowane dopiero wtedy, gdy będą miały pojawić się na ekranie. Ta wtyczka będzie szczególnie przydatna na długich stronach www i skorzysta na tym zarówno autor, jak i odwiedzający.

 

W komentarzu możesz podzielić się innymi wtyczkami JavaScript/jQuery, które pomogły Ci w nietypowych zadaniach. 

Przeczytaj też...

14 wtyczek JavaScript i jQuery, które uproszczą Ci życie
Ocena: 4.6 - 8 głosów

Jakub Jurkian

Od ponad 11 lat jestem programistą-pasjonatem, a strony (i wszystko co z nimi związane) tworzę od 6 lat. Jestem też autorem kursów wideo - od 2013 roku prowadzę kanał na YouTube i tego bloga. Zaczynałem od pisania artykułów dla jednego z czołowych polskich portali IT - benchmark.pl. Prywatnie od 10 lat jestem związany z kulturą hip-hop (głównie taniec breakdance).

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

*