Artykuł

mar 09 2011
0

15 praktycznych i użytecznych wtyczek jQuery

Internet wciąż się zmienia. Pojawiają się nowe technologie, języki programowania, czy też lepszy sprzęt, na którym to wszystko działa. Jednym z efektów tego ciągłego rozwoju, jest niezwykle populary framework JavaScriptowy, czyli jQuery, który już nie raz gościł na tym blogu. Wcześniej pisałem m.in wprowadzenie do podstaw jQuery, czy też wykorzystanie zaawansowanych selektorów. Dziś chciałbym zrobić coś innego, a mianowicie zaprezentować 15 interesujących wtyczek, które z powodzeniem możecie wykorzystać we własnych projektach.

Ajax Autocomplete for jQuery

Opis: Korzystaliście już z wyszukiwarki na altcontroldelete.pl? Jeśli nie, to może warto, ponieważ zobaczycie w akcji jak działa wtyczka, autouzupełniania:) Ajax Autocomplete for jQuery, pozwala na tworzenie efektownych systemów wyszukiwania, w czasie rzeczywistym, ponieważ dane pobierane są na bieżąco za pomocą Ajaxa, bez przeładowania strony. Wtyczka posiada szereg opcji konfiguracyjnych i jak dla mnie wystarczających do większości zadań, które przed tą wtyczką stawiam.

Strona projektu: Ajax Autocomplete for jQuery

Demo: j/w

jQuery BlockUI Plugin

Opis: Często, spoglądając choćby na wszelakie wtyczki dla galerii (takie też znajdą się poniżej) spotykamy się z rozwiązaniem, że ekran blokowany jest przez specjalna wartstwę nakładaną za pomocą JavaScript, która znajduję się tak jakby nad standardową stroną. Taką funkcjonalność posiadają również np. dialogi zawarte w jQuery UI. Co jednak zrobić w przypadku, kiedy będziemy potrzebować takiej funkcjonalności na własne potrzeby? Z pomocą może nam przyjść właśnie wtyczka jQuery BlockUI Plugin, która za pomocą szeregu przydatnych opcji konfiguracyjnych, robi dokładnie wszystko to co wyżej napisałem:)

Strona projektu: jQuery BlockUI Plugin

Demo: Klik

jQuery Captify

Opis: jQuery Captify to pierwsza z wtyczek w dzisiejszym wpisie, która z powodzeniem może zostać wykorzystana przy tworzeniu galerii. Wtyczka ta, umożliwia dodawanie efektownych podpisów dla naszych obrazków, które mogą być np. przezroczyste i pojawia się przy najechaniu kursorem na obrazek. Sam efekt, prezentuje się bardzo ładnie, co widać choćby na screenie poniżej:).

Strona projektu: jQuery Captify

Demo: j/w

jQuery ColorPicker plugin

Opis: W tym przypadku, to już właściwie sama nazwa wtyczki mówi o niej wszystko. Color picker, w oparciu o standardową paletę barw, pozwala na ustalenie hash codu dowolnego koloru. Możemy również wprowadzić kod koloru, a wtyczka automatycznie pokaże jaki to kolor. Osobiście muszę przyznać, że sama wtyczka zrobiła na mnie naprawdę pozytywne wrażenie i przydaje się w codziennej pracy.

Strona projektu: jQuery ColorPicker plugin

Demo: j/w

DataTables

Opis: DataTables, pozwala na budowanie zaawansowanych, wielofunkcyjnych tabel, w których dane można sortować, stronicować, wyszukiwać i do tego prezentować w bardzo przystępnej wizualnej formie. Wtyczka posiada ogromne możliwości konfiguracji, integruje się z wieloma różnymi technologami i posiada również możliwość rozszerzenia funkcjonalności w oparciu o dodatkowe wtyczki.

Strona projektu: DataTables

Demo: Klik

Easy Slider

Opis: Efekt działania tej wtyczki, możecie obejrzeć w sidebarze altcontroldelete.pl. W tym przypadku, wtyczka została zaangażowana do prezentacji najpopularniejszych na stronie wpisów. Nie oznacza to jednak, że to co tutaj widzicie to wszystkie jej możliwości. Rozszerzenie bezproblemowo radzi sobie również z przewijaniem obrazków i ma szereg opcji konfiguracyjnych, w których każdy z powodzeniem znajdzie coś dla siebie.

Strona projektu: Easy Slider

Demo: Klik

FancyBox

Opis: FancyBox jest kolejną wtyczką, której efekty możecie podziwiać na tej stronie. Wtyczka odpowiedzialna jest za wyświetlanie obrazów na warstwie (na ten sam styl jak popularny LightBox) i posiada przy tym ogromny zestaw dodatkowych funkcji, rozszerzeń oraz opcji konfiguracyjnych. Np. FancyBox umożliwia przeglądanie kolejnych obrazków przy użyciu scrolla myszki. Również do samego wyglądu wtyczki nie można się w żadnym stopniu przyczepić.

Strona projektu: FancyBox

Demo: j/w

Flot

Opis: Flot jest specyficzną wtyczką, której raczej nikt nie wykorzystuje na codzień, ale do specjalnych zastosowań nada się znakomicie. Flot pozwala na generowanie wykresów w oparciu o zadane przez użytkownika dane. Całość prezentuje się naprawdę efektownie co można zobaczyć na screenie oraz w odnośniku do dema.

Strona projektu: Flot

Demo: Klik

Pines Notify jQuery Plugin

Opis: Pines Notify, jest ciekawym rozszerzeniem, które umożliwa wyświetlanie na naszej strony ciekawych notyfikatorów zbudowanych na wartstwach. Może być to ciekawy sposób, by przekazać jakąś szczególnie wążną wiadomość użytkownikom naszej witryny, np. by sprawdzili nasz nowy wpis itp. Efekt działania wtyczki, nie powinien również zostać zablokowany przez wszelkie aplikacje blokujące, co zwiększa jego efektywność i zasięg. Wtyczka posiada sporo opcji konfiguracyjnych, które dotyczą zarówno sfery wizualnej jak i funkcjonalnej.

Strona projektu: Pines Notify jQuery Plugin

Demo: j/w

Tablesorter

Opis: Tablesorter jest bardzo przyjemną wtyczką, która pozwala nadać naszym tabelkom, nieco dynamiki. Rozszerzenie to, umożliwia sortowanie naszej tabelki według dowolnej z kolumn. Wtyczka nie posiada jakiś zaawansowanych opcji konfiguracyjnych, ale powinna wystarczyć do podstawowych zadań.

Strona projektu: Tablesorter

Demo: Klik

TipTip

Opis: TipTip jest wtyczką, która pozwala na tworzenie efektownych tooltipów, które z powodzeniem moga zastąpić standardowe wykorzystanie atrybutu title na stronie. Jak na potencjalnie prostą funkcjonalność, wtyczka posiada całkiem spore opcji konfiguracji.

Strona projektu: TipTip

Demo: j/w

Uploadify

Opis: Uploadify jest wtyczką, która przy wykorzystaniu jQuery oraz Flasha pozwala na wysyłanie plików na serwer dynamicznie, bez przeładowania strony i co ważne, można to robić masowo - znika standardowe ograniczenie do jednego pliku. Wtyczka na pewno znajdzie szerokie zastosowanie, wszędzie tam, gdzie ważne jest przesyłanie plików realizowane dynamicznie (bez przeładowania strony).

Strona projektu: Uploadify

Demo: Klik

Validation

Opis: Zasadniczo już sama nazwa, mówi wiele o tej wtyczce, a właściwie wszystko, ale wypadało by coś napisać więcej. Tak więc, wtyczka Validation jest dziełem znanego w świecie jQuery webdevelopera Jörna Zaefferera, który oprócz tego rozszerzenia, stworzył kilka innych interesujących projektów (szczegóły na stronie). Validation, pozwala na stosowanie na naszej stronie szeroko pojętej walidacji. Wtyczka posiada naprawdę ogromne możliwości konfiguracji i jej funkcjonalność ograniczona jest tylko właściwie jej użytkowaniem.

Strona projektu: Validation

Demo: Klik

YoxView

Opis: YoxView jest kolejną obok FancyBoxa wtyczką wzrowaną na LightBoxa i posiada zasadniczo podobne funkcje, tak więc jeśli będziesz decydować o wyborze galerii, warto wziąźć pod uwagę obie te wtyczki.

Strona projektu: YoxView

Demo: j/w

Zoomy

Opis: Zoomy, ostatnia wtyczka w dzisiejszym zestawieniu, pozwala najzwyczajniej w świecie zoomować czyli powiększać obrazki. Jest to swego rodzaju rodzaj lupy, ponieważ powiększany jest aktualnie najechany przez myszkę obszar. Trzeba przyznać, że sam efekt jest całkiem ciekawy i może być ciekawą alternatywą dla tradycyjnych galerii, których miliony w Internecie.

Strona projektu: Zoomy

Demo: j/w

Data ostatniej modyfikacji: 21.02.2013, 15:39.

Podoba Ci się ten wpis? Powiedz o tym innym!

Send to Kindle

Komentarze

blog comments powered by Disqus