Dynamiczne UI oraz efekty z użyciem jQuery Isotope plugin

isotope

Poziom średnio-zaawansowany

Jakiś czas temu otrzymałem do wdrożenia w projekycie gotowy layout w HTML5. Ideą projektu było wyświetlanie albumów i zdjęć użytkowników. Mnie zaciekawił użyty tam plugin jQuery Isotope, dzięki któremu uzyskano bardzo efektowny i dynamiczny layout, realizujący także Responsive Web design (RWD).

jQuery Isotope plugin

Stroną domową projektu jest:

http://isotope.metafizzy.co/index.html

Plugin jest dostępny zarówno na licencji open-source jak i komercyjnej. Z tego co widać, powstaje nawet odświeżona wersja 2. pluginu.

jQuery Isotope plugin to nie tylko efekty takie jak układ okresowy pierwiastków, który jak widzimy w demo, działa i wygląda naprawdę dobrze. Można go zastosować także jako bazę layout’u naszej strony / aplikacji WWW. Plugin świetnie komponuje się z rozwiązaniami RWD, zatem działa dobrze na wielu różnych urządzeniach.

Rozwiązanie będzie idealnie, jeśli zawartość naszej strony powinna być rozmieszczona w postaci bloczków, i to nie zależnie od ich rozmiarów. Puste luki mogą zostać wyeliminowane w inteligentny sposób.

jQuery Isotope plugin - UI demo

jQuery Isotope plugin – UI demo

Możliwości jest o wiele więcej, m.in. wyświetlanie / ukrywanie elementów z filtrowaniem, sortowanie według różnych parametrów, a wszystko z efektownymi animacjami.

Przykład – dynamiczne dodanie elementów:


var buff = '*tutaj jest bufor na kod html nowych elementów*';

var $newItems = $(buff);
// $('#our-container').isotope({ masonry: { columnWidth : 200 } });
$('#our-container').isotope('insert', $newItems);

Składnia potrzebna do obsługi jest naprawdę prosta.

Przykłady użycia jQuery Isotope plugin

Rozwiązanie jest dość dobrze dopracowane i działa w wielu przeglądarkach. Niemniej to programista musi zadbać o dobry efekt końcowy.

Przykładem komplikacji, z którymi się spotkałem, były na przykład błędne wyliczenia wysokości elementu HTML kontenera, w którym znajdowały się dynamicznie dodawane elementy.

Działo się tak dlatego, że elementy zwierały obrazki o stałej szerokości, jednak o bardzo różnych wysokościach, a ich wczytanie trwało chwilę czasu. Zatem wysokość kontenera była obliczona „za wcześnie”.

Sam jQuery Isotope plugin zawiera pomocne rozwiązania, na przykład można było posłużyć się małym rozszerzeniem obserwującym fakt załadowania obrazków. Ponadto można użyć np. metody .css() z jQuery, aby ustawić wysokość (height) elementu kontenera.

Do tego warto dodać niezastąpioną metodę reLayout pluginu Isotope, którą można wywołać programowo w celu zresetowania i przeładowania układu:

$(window).load(function() {
  $('#container').isotope('reLayout');
});

http://isotope.metafizzy.co/docs/methods.html#relayout

Dodawanie elementów

Jest to właściwie podstawa. Dodanie elementów może być wykonane za pomocą różnych sposobów:

insert:

var $newItems = $('<div class="item" /><div class="item" />');
$('#container').isotope('insert', $newItems);

append:

var $newItems = $('<div class="item" /><div class="item" />');
$('#container').append($newItems).isotope('addItems', $newItems);

prepend (plus przeładowanie i określenie sortowania):

var $newItems = $('<div class="item" /><div class="item" />');
$('#container').prepend($newItems)
  .isotope('reloadItems').isotope({ sortBy: 'original-order' });

Wpływa to na zachowanie naszego UI. Animacjami zajmuje się same Isotope plugin, ale i tym aspektem również możemy sterować, tworząc własne, bardziej wyrafinowane efekty wizualne.

Sortowanie zaawansowane

Rozbudowane możliwości sortowania również pozwalają tworzyć interesujące efekty.

Proste parametry sortowania to standard, np.:

$('#container').isotope({ sortBy : 'name' });

O wiele ciekawsze może być sortowanie po naszych własnych, zdefiniowanych parametrach, które możemy tu podstawić.

Wróćmy do naszego małego case study aplikacji z albumami i zdjęciami użytkowników, np. pobranych z Facebook’a. Pobieramy tam także daty dodania tych zdjęć. I w tym momencie pojawia się wymóg, aby zapewnić sortowanie od najnowszych do najstarszych zdjęć.

Nawet jeżeli pobrany zbiór danych będzie już posortowany w odpowiedniej kolejności i przetworzymy go, Isotope plugin może posortować go zupełnie inaczej niż byśmy chcieli.

Rozwiązaniem jest dodanie do elementów własnych atrybutów, co w HTML5 nie jest żadnym problemem.

<div class="photo isotope-item" data-timestamp="123456789"> 
... 
</div>

Następnie definiujemy sortowanie po według naszego nowego atrybutu reprezentującego znacznik czasu:

$('#container').isotope({

  getSortData: {
    // ...
    timestamp: function ($elem) {
      return $elem.attr('data-timestamp');
      // tudzież np.: 
      // return parseInt($elem.data('data-timestamp'));
    }
  }

  // ...
});

Podstawiamy nasz parametr do sortowania:

$('#container').isotope(... { sortBy : 'timestamp' } ... );

i to właściwie wszystko.

Zasoby

Tradycyjnie garść zasobów na zakończenie:

– szybki tutorial wdrożenia jQuery Isotope plugin

http://www.9bitstudios.com/2013/04/jquery-isotope-tutorial/

– osoby szukające z jakiegoś powodu alternatyw omawianego dziś pluginu może zainteresować

http://www.wookmark.com/

– tutaj natomiast zbiór przeróżnych rozwiązań, pozwalających tworzyć dynamiczne layouty / UI

http://jquery-plugins.net/tag/dynamic-layout

Podsumowanie

Nie sposób opisać w jednym artykule wszystkich możliwości pluginu jQuery isotope. Wiem jednak że próby i zabawy z takimi rozwiązaniami potrafią być wciągające. Z drugiej strony mając tak wzbogacony arsenał, możemy też pozytywnie zaskoczyć naszego klienta.

Życzę owocnych eksperymentów.

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem, początkujący bloger. Pasjonat programowania, nowych technologii, e-commerce, a także sportu i motoryzacji.

Twitter LinkedIn Google+ Skype Xing 

Podaj dalej: Share on Facebook1Tweet about this on TwitterShare on Google+2Share on LinkedIn1Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
Możesz skomentować leave a response, lub podać trackback z własnej strony.