jQuery plugins - Isotope
okt 31

Isotope

Szűrés, rendezés meg ilyesmik

Verzió: 1.5.20
Kiadás dátuma: 2012
Fejlesztő: David DeSandro
Liszensz: nincs adat

Bevezető

A plugin sajnos csak részben ingyenes, mivel kereskedelmi használata liszensz díjhoz kötött, minden egyéb esetben viszont szabadon felhasználható. Ettől függetlenül úgy gondolom a plugin megér egy misét.

Az Isotope nem egy új találmány, elég régi darab már, azonban sikere nem hogy töretlen, de talán jelenleg éli igazán fénykorát. Segítségével egy modern és divatos felületté szervezhetjük a sok, eltérő méretű elemből álló oldalunkat, valamint ezeket az elemeket tetszőleges szempontok alapján akár szűrhetjük, sorba is rendezhetjük (mindezt természetesen animáltan, ami igen látványossá, dinamikussá varázsolja weblapunkat).

Implementálás

CSS

            <link rel="stylesheet" type="text/css" href="css/style.css" />
          

JavaScript

            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/jquery.isotope.min.js"></script>
          

Deklaráció

            $(document).ready(function(){
              $('#pelda').isotope({
                itemSelector: '.item',
                layoutMode: 'fitRows'
              });
            });
          

Használat

Hozzunk létre egy konténer elemet, helyezzük el benne a rendezendő elemeket, majd adjunk nekik azonos CSS osztálynevet. Ezt az osztályt fogjuk használni a plugin-hoz, azonban további osztályneveket is fűzhetünk hozzá, amelyekkel később szűrhetjük, illetve sorba rendezhetjük őket:

            <div id="pelda">
              <div class="item szempont1">...</div>
              <div class="item szempont2">...</div>
              <div class="item szempont3">...</div>
              ...
            </div>
          

Teljes paraméterlista

  • animationEngine: az animációknál használt megoldás. Az animáció végbemehet a jQuery által biztosított .animate() utasítással, illetve CSS transzformációk segítségével egyaránt.
    ('best-available' | 'css' | 'jquery') (alapértelmezett: 'best-available')
  • animationOptions: ha az animációkhoz a jQuery által biztosított .animate() utasítást használjuk, akkor annak tulajdonságai a paraméter segítségével állíthatók be (a jQuery API-ban is használt animáció beállításokkal) (alapértelmezett: { queue: false, duration: 800 })
  • containerClass: a konténer elem CSS szelektora (alapértelmezett: 'isotope')
  • containerStyle: a konténer elem CSS tulajdonságainak beállítása
    (alapértelmezett: { position: 'relative', overflow: 'hidden' })
  • filter: az elemek szűrése CSS szelektor segítségével
  • getSortData: jQuery objektum, mely segítségével az elemekből tetszőleges paramétereket tudunk kiolvasni egy későbbi sorba rendezéshez. Az így kiolvasott paraméterekre rendezéskor (lásd: sortBy paraméter) tudunk hivatkozni.
    Példa:
                    $('#pelda').isotope({
                      getSortData : {
                        symbol: function($elem){
                          return $elem.attr('data-symbol')
                          },
                        number: function($elem){
                          return parseInt($elem.find('.number').text(),10)
                          },
                        name:
                          function ($elem){
                            return $elem.find('.name').text()
                          }
                      }
                    });
                  
  • hiddenClass: szűrés esetén elrejtésre kerülő elemek CSS osztálya
    (alapértelmezett: 'isotope-hidden')
  • hiddenStyle: szűrés esetén elrejtésre kerülő elemek stílus definíciója
    (alapértelmezett: { opacity : 0, scale : 0.001 })
  • itemClass: az elemek CSS szelektora (alapértelmezett: 'isotope-item')
  • itemPositionDataEnabled: a paraméter engedélyezésével az egyes elemek pozíciója adatként is megjelenik, amelyet a jQuery .data() metódusa révén az 'isotop-item-position' névtér alól ki lehet nyerni. Visszatérési értékként egy objektumot kapunk az X és Y koordinátákkal. (true | false) (alapértelmezett: false)
  • itemSelector: az aktív elemek CSS szelektora
  • layoutMode: a layout-szervezési/rendezési szempont beállítása
    ('cellsByColumn' | 'cellsByRow' | 'fitColumns' | 'fitRows' | 'masonry' | 'masonryHorizontal' | 'straightAcross' | 'straightDown')
    (alapértelmezett: 'masonry')
  • onLayout: függvény meghívása minden egyes layout-átrendezéskor
  • resizable: trigger engedélyezése az ablak átméretezésekor (true | false) (alapértelmezett: true)
  • resizesContainer: a paraméter engedélyezésével a plugin minden layout váltáskor beállítja a konténer elem magasságát, illetve szélességét (true | false) (alapértelmezett: true)
  • sortAscending: sorba rendezés esetén az elemek növekvő rendezésésének engedélyezése
    (false érték esetén csökkenő sorrendbe rendeződnek) (true | false) (alapértelmezett: true)
  • sortBy: az a (getSortData paraméter segítségével kiolvasott) tulajdonság, amely szerint sorba kívánjuk rendezni az elemeket (alapértelmezett: 'original-order')
  • transformsEnabled: CSS3 transzformációk engedélyezése/tiltása (true | false)
    (alapértelmezett: true)
  • visibleStyle: szűrés esetén megjelenítésre kerülő elemek stílus definíciója
    (alapértelmezett: { opacity : 1, scale : 1 })

Metódusok

  • addItems: elemek hozzáadása a konténer elemhez azok újrarendezése/szűrése nélkül
                    $('#pelda').isotope( 'addItems', $items, callback);
                  
  • appended: elemek hozzáadása a konténer elemhez az új elemek rendezésével/szűrésével
                    $('#pelda').isotope('appended', $items, callback);
                  
  • destroy: a plugin megszüntetése
                    $('#pelda').isotope('destroy');
                  
  • insert: elemek hozzáadása a konténer elemhez, majd a relayout metódus segítségével az elemek újrarendezése/szűrése
                    $('#pelda').isotope('insert', $items, callback);
                  
  • layout: az elemek elrendezése
                    $('#pelda').isotope('layout', $items, callback);
                  
  • option: a plugin tulajdonságainak beállítása
                    $('#pelda').isotope('option', options);
                  
  • reLayout: visszaállítja az elrendezés tulajdonságait
                    $('#pelda').isotope('reLayout', callback);
                  
  • reloadItems: az összes elem újra szervezése
                    $('#pelda').isotope('reloadItems');
                  
  • remove: megadott elem/elemek eltávolítása (a DOM-ból is!)
                    $('#pelda').isotope('remove', $items, callback)
                  
  • shuffle: elemek véletlenszerű sorba rendezése (ehhez a sortBy opciót 'random' értékre kell állítani)
                    $('#pelda').isotope('shuffle', callback)
                  
  • updateSortData: meghatározott elemek sorrendjének frissítése
                    $('#pelda').isotope('updateSortData', $items)