Isotope plugin jQuery

Isotope to bardzo ciekawy plugin jQuery do tworzenia "magicznych" layoutów. Dzięki niemu można tworzyć inteligentne, dynamiczne układy, które są trudne do osiągnięcia przy użyciu samego css. Przy użyciu selektorów jQuery umożliwia atrakcyjne filtrowanie danych pokazując lub ukrywając odpowiednie elementy DOM. Zapewnia też funkcję sortowania.

Podstawowy przykład

Isotope działa na pojemniku zawierającym podobne elementy podrzędne.

<div id="container">
  <div class="item green"></div>
  <div class="item w2 orange"></div>
  <div class="item green"></div>
  <div class="item yellow"></div>
  <div class="item green"></div>
  <div class="item orange"></div>
  <div class="item green"></div>
  <div class="item red"></div>
  <div class="item w2 green"></div>
  <div class="item yellow"></div>
</div>

Idealnie by isotopowy layout był ładowany po załadowaniu całej treści. Oczywiście należy załączyć bibliotekę jQuery oraz skrypt isotope.

<script src="js/jquery-1.11.2.min.js"></script>v
<script src="js/isotope.pkgd.min.js"></script>

Plugin posiada wszechstronny silnik układów oraz wiele wbudowanych układów. Układ można ustawić i zmienić poprzez opcję layoutMode. Dodajmy teraz trochę css.

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.item { 
  width: 25%;
  /*width:200px;*/
  height: 100px;
  float:left;
  position: relative;
}
.green {
  background: green;
}
.item.w2 { 
  width: 50%; 
  /*width:400px;*/
}
.orange {
  background:orange;
}
.red {
  background:red;
}
.yellow {
  background:yellow;
}

Następnie zainicjalizuj isotope.

$(function(){
  var $container = $('#container');
  // init
  $container.isotope({
    // options
    itemSelector: '.item',
    layoutMode: 'fitRows'
  });
});

Uruchom skrypt i sprawdź jak działa. Następnie odkomentuj odpowiednie linie w pliku css, ustalając w ten sposób stałe szerokości elementów i popatrz jak zmieniło się działanie skryptu.
Poziome układy layoutów (masonryHorizontal, fitColumns, cellsByColumn, straightAcross) wymagają ustalenia wysokości dla naszego kontenera. To ważne aby ustawić wysokość w css.

Filtrowanie

Isotope może pokazywać i ukrywać odpowiednie elementy dzięki opcji filtrowania używając selektorów jQuery. Elementy pasujące do filtra są pokazywane, a niepasujące ukrywane. W celu pokazania wszystkich elementów green należy zastosować filtr.

$(function(){
  var $container = $('#container');
  // init
  $container.isotope({
    // options
    itemSelector: '.item',
    layoutMode: 'fitRows',
    filter: '.green'
  });
});

Rozbudujmy nieco nasz przykład o filtrowanie za pomocą przycisków. Dodajmy w kodzie html sekcję z buttonami. Zauważmy, że każdy przycisk ma odpowiedni parametr data-filter, którego będziemy używać w naszej funkcji filtrującej.

<div id="buttons">
  <button data-filter="*">All</button>
  <button data-filter=".green">green</button>
  <button data-filter=".orange">orange</button>
  <button data-filter=".red">red</button>
  <button data-filter=".yellow">yellow</button>
</div>

Dopiszemy teraz kod jQuery. Działa on w ten sposób, że po kliknięciu na button ma być przefiltrowywana lista elementów zgodnie z atrybutem data-filter.

$('#buttons').on('click', 'button', function() {
  var filterValue = $(this).attr('data-filter');
  $container.isotope({ filter: filterValue });
});

Sortowanie

Kolejną ważną funkcjonalnością isotope jest sortowanie elementów. Domyślne jest sortowanie rosnące. Aby to zmienić należy ustawić atrybut sortAscending na false. Dodajmy teraz do kodu html dodatkowe informacje, na podstawie których będziemy sortować dane.

<div id="container">
  <div class="item green"><span class="name">London</span> <span class="number">18</span></div>
  <div class="item w2 orange"><span class="name">Madrid</span> <span class="number">1</span></div>
  <div class="item green"><span class="name">Warsaw</span> <span class="number">5</span></div>
  <div class="item yellow"><span class="name">Krakow</span> <span class="number">3</span></div>
  <div class="item green"><span class="name">Berlin</span> <span class="number">20</span></div>
  <div class="item orange"><span class="name">Rome</span> <span class="number">30</span></div>
  <div class="item green"><span class="name">Barcelona</span> <span class="number">28</span></div>
  <div class="item red"><span class="name">Milano</span> <span class="number">4</span></div>
  <div class="item w2 green"><span class="name">Paris</span> <span class="number">15</span></div>
  <div class="item yellow"><span class="name">Oslo</span> <span class="number">7</span></div>
</div>

Isotope czyta dane z kodu za pomocą parametru getSortData.Parametr ten akceptuje obiekty. Klucze obiektu są słowami kluczowymi używanymi później w sort by. Wartości dla kluczy mogą być po prostu stringami albo funkcjami pobierającymi dane. Poniżej przykład.

var $container = $('#container').isotope({
  getSortData: {
    name: '.name', // text from querySelector
    category: '[data-category]', // value of attribute
    weight: function( itemElem ) { // function
      var weight = $( itemElem ).find('.weight').text();
      return parseFloat( weight.replace( /[\(\)]/g, '') );
    }
  }
});

W naszym przypadku opcja getSortData wygląda następująco.

$container.isotope({
  // options
  itemSelector: '.item',
  layoutMode: 'fitRows',
  getSortData: {
    name: '.name',
    number: '.number'
  }
});

Dodajmy w html również przyciski do sortowania.

<div id="sort">
  <button data-sort="original-order">Original order</button>
  <button data-sort="name">by Name</button>
  <button data-sort="number">by Number</button>
</div>v

Teraz wystarczy już tylko w javascript zaimplementować sortowanie.

$('#sort').on('click', 'button', function() {
  var sortValue = $(this).attr('data-sort');
  $container.isotope({ sortBy: sortValue });
});

Animacje

Isotope posiada fallback javascriptowych animacji dla starszych przeglądarek. Za pomocą parametru animationEngine ustawiamy jak Isotope ma przechwytywć animacje. Dostępne opcje to:

best-available - jeżeli przeglądarka wspiera CSS Transistions Isotope używa .css(), jeśli nie używa .animate()
css - Isotope używa .css()
jquery - Isotope używa .animate()

Kiedy silnik animacji jest ustawiony na jquery możemy określić opcje animacji za pomocą atrybutu animationOptions, który jest obiektem. Przykład poniżej.

$('#container').isotope({
	animationOptions: {
		duration: 750,
		easing: 'linear',
		queue: false
	}
});

Dodawanie nowych elementów

Isotope dostarcza kilka metod służących do dodawania nowych elementów do drzewa DOM. Pierwszą z nich jest metoda addItems. Dodaje ona nowe elementy do isotopowego pojemnika.

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

Metoda insert wstawi nowe dane do pojemnika, przefiltruje i posortuje na nowo zawartość oraz wywoła metodą reLayout, tak aby wszystkie elementy były prawidłowo ułożone.

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

Kolejna metoda to appended. Wywołuje ona addItems dla nowych elementów i kładzie je na końcu układu.

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

Możesz potrzebować poniższego kodu css, aby animacje na nowo dodanych elementach działały poprawnie.

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

Isotope demo