Filtrare e ordinare elementi in jQuery con Filterizr

Mattepuffo's logo
Filtrare e ordinare elementi in jQuery con Filterizr

Filtrare e ordinare elementi in jQuery con Filterizr

Programmazione, Javascript - AJAX

Oggi vediamo uno dei vari plugin jQuery per filtrare e ordinare elementi in una pagina web.

L'effetto è molto piacevole, e non impatta sulle prestazioni, in quanto non ci sono query su db e refresh dei dati.

Si occuperà il plugin di fare tutto a spostare i blocchi, ecc...impostando l'HTML in maniera corretta.

Il plugin di cui parliamo oggi si chiama Filterizr!

Questa una pagina con esempio basico, ma con le varie funzioni impostate:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Filterizr test</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
        <script src="jquery.filterizr.min.js"></script>
    </head>
    <body>
        <ul>
            <li data-filter="all"> All items </li>
            <li data-filter="1">Category 1</li>
            <li data-filter="2">Category 2</li>
            <li data-filter="3">Category 3</li>
            <li data-shuffle>Shuffle items</li>
            <li data-sortAsc>Ascending</li>
            <li data-sortDesc>Descending</li>
        </ul>
        <input type="text" name="search" placeholder="Search..." data-search>
        <hr>
        <div class="filtr-container">
            <div class="filtr-item" data-category="1" data-sort="value">CAT 1</div>
            <div class="filtr-item" data-category="2" data-sort="value">CAT 2</div>
            <div class="filtr-item" data-category="3" data-sort="value">CAT 3</div>
        </div>
        <script>
            var filterizd = $('.filtr-container').filterizr({
                //options object
            });
        </script>
    </body>
</html>

Ovviamente ci sono tantissime opzioni da impostare.

Il tutorial dice che queste sono quelle di default:

var options = {
   animationDuration: 0.5, //in seconds
   filter: 'all', //Initial filter
   callbacks: {  
      onFilteringStart: function() { },
      onFilteringEnd: function() { },
      onShufflingStart: function() { },
      onShufflingEnd: function() { },
      onSortingStart: function() { },
      onSortingEnd: function() { }
   },
   delay: 0, //Transition delay in ms
   delayMode: 'progressive', //'progressive' or 'alternate'
   easing: 'ease-out',
   filterOutCss: { //Filtering out animation
      opacity: 0,
      transform: 'scale(0.5)'
   },
   filterInCss: { //Filtering in animation
      opacity: 0,
      transform: 'scale(1)'
   },
   layout: 'sameSize', //See layouts
   selector: '.filtr-container',
   setupControls: true  
}

Partite da queste!

Inoltre io non ho impostato nessuna regola CSS, quindi la pagina risulterà scarna.

Ma comunque funziona tutto.

Infine, non funziona con la versione 3 di jQuery.

Enjoy!

Condividi

Commentami!