jQuery: creare un portfolio filtrabile

Per creare un portfolio filtrabile con jQuery occorre stabilire una relazione tra i link di navigazione che rappresentano le categorie del portfolio e gli elementi che appartengono a ciascuna categoria. La risposta è negli attributi data di HTML5.

Partiamo dalla seguente marcatura:

<div id="portfolio">
    <div id="portfolio-sort">
        <a href="#" id="all">ALL</a>
        <a href="#" data-cat="a">A</a>
        <a href="#" data-cat="b">B</a>
        <a href="#" data-cat="c">C</a>
    </div>
    <div id="portfolio-content">
        <div class="portfolio-item" data-cat="a">A</div>
        <div class="portfolio-item" data-cat="b">B</div>
        <div class="portfolio-item" data-cat="c">C</div>
        <div class="portfolio-item" data-cat="c">C</div>
        <div class="portfolio-item" data-cat="b">B</div>
        <div class="portfolio-item" data-cat="a">A</div>
        <div class="portfolio-item" data-cat="a">A</div>
        <div class="portfolio-item" data-cat="c">C</div>
        <div class="portfolio-item" data-cat="b">B</div>
    </div>

</div>

Come si può notare, a ciascun attributo data-cat dei link di navigazione corrisponde un certo numero di elementi del portfolio aventi lo stesso attributo con il medesimo valore.

Con jQuery ad ogni clic sui link dobbiamo nascondere gli elementi che non fanno parte della categoria corrente lasciando solo quelli che corrispondono al valore selezionato:

var Portfolio = {
    sort: function(items) {
        items.show();
        $('#portfolio-content').find('div.portfolio-item').not(items).fadeOut(500);
    },
    showAll: function(items) {
        items.fadeIn(500);
    },
    doSort: function() {
        $('a', '#portfolio-sort').on('click', function() {

            var $a = $(this);
            if (!$a.is('#all')) {

                var items = $('div[data-cat=' + $a.data('cat') + ']', '#portfolio-content');

                Portfolio.sort(items);

            } else {

                Portfolio.showAll($('div.portfolio-item', '#portfolio-content'));


            }

        });
    }
};

Portfolio.doSort();​