Filterizr - простая и эффективная сортировка-фильтрация галереи

Post 1

Всем доброе время суток! Сегодня рассмотрим, как можно расширить функционал галереи, используя расширение для библиотеки Jquery - плагин Filterizr


Ознакомится с самим плагином  и его возможностями можно на официальном сайте разработчика - Filterizr.  

Перед рассмотрением самого плагина, предлогаю ознакомится с некоторыми особенностями:

1. Плагин учитывает адаптивность сайта, то есть легко подстраивается под различные экраны пользователей.

2. Функционал плагина позволяет выстраивать элементы галереи как вертикально, так и горизонтально, что может понравится вашим пользователям.

3.  Во время работы плагина не учитываются внешние отступы (margin) элементов, поэтому отступы делаются только внутренними отступами (padding).

 

Теперь предлагаю приступить к изучению функционала плагина Filterizr. 

Начинается работа всегда с основы - html. Создадим простое меню сортировки и блок сортируемых элементов:

<ul class="sort">
    <li data-filter="all">All</li>
    <li data-filter="1">Категория 1</li>
    <li data-filter="2">Категория 2</li>
    <li data-filter="3">Категория 3</li>
    <li data-filter="4">Категория 4</li>
</ul>

<button class="sizeMinToMax">Size: Min to Max</button>
<button class="sizeMaxToMin">Size: Max to Min</button>

<div id="demo" class="filtrs-demo">
    <div class="filtr-item" data-category="1"  data-sort="348">
        <img width="128" height="128" src="">
        <strong>Категория 1</strong>
        <span>348 KB</span>
    </div>
    <div class="filtr-item" data-category="2"  data-sort="1904">
        <img width="128" height="128" src=""/>
        <strong>Категория 2</strong>
        <span>1904 KB</span>
    </div>
    <div class="filtr-item" data-category="1"  data-sort="1337">
        <img width="128" height="128" src=""/>
        <strong>Категория 1</strong>
        <span>1337 KB</span>
    </div>
    <div class="filtr-item" data-category="3"  data-sort="401">
        <img width="128" height="128" src=""/>
        <strong>Категория 3</strong>
        <span>401 KB</span>
    </div>
    <div class="filtr-item" data-category="3"  data-sort="12875">
        <img width="128" height="128" src=""/>
        <strong>Категория 3</strong>
        <span>12875 KB</span>
    </div>
    <div class="filtr-item" data-category="4"  data-sort="5273">
        <img width="128" height="128" src=""/>
        <strong>Категория 4</strong>
        <span>5273 KB</span>
    </div>
    <div class="filtr-item" data-category="4, 1"  data-sort="5396">
        <img width="128" height="128" src=""/>
        <strong>Категории 1 и 4</strong>
        <span>5396 KB</span>
    </div>
    <div class="filtr-item" data-category="2, 3"  data-sort="5136">
        <img width="128" height="128" src=""/>
        <strong>Категории 2 и 3</strong>
        <span>5136 KB</span>
    </div>
</div>

 Именование атрибутов не будем менять по рекомендации разработчика. 

В маркированном списке ul используем пользовательский атрибут data-filter для фильтрации элементов по категориям. Атрибут data-filter со значением all выводит все элементы в порядке указанном в html.

Кнопки Min to Max и Max to Min - наша сортировка элементов по убыванию и возрастанию соответственно.

 

В атрибуте data-category указываем категорию (категории), к которому (которым) относится элемент.  Если элемент соответсвует нескольким категориям, можно через запятую указывать сколько угодно категорий (важно запомнить, что после запятой ОБЯЗАТЕЛЬНО ставить пробел, иначе плагин работать не будет!). В атрибуте data-sort указыем значение, по которому элемент будет сортироваться.

Переходим к Java-Script:

Подключаем JQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

 Скачиваем с официального сайта разработчика плагин Filterizr (осторожно, скачивание файла) и подключаем к проекту:

<script src="jquery.filterizr.min.js"></script>

 Пишем наш скрипт:

$(function(){

    var filterItem,
        boxFiltr = $('#demo').filterizr({
            delay: 50,
            layout: 'sameSize',
            setupControls: false,
            filterOutCss: {
                opacity: 0,
                transform: 'scale(0)'
            }
        });

    $('.sort').on('click','li',function(){
        filterItem = $(this).data('filter');
        boxFiltr.filterizr('filter', filterItem);
    });

    $('.sizeMinToMax').on('click', function (e) {
        boxFiltr.filterizr('sort','sort','asc');
    });

    $('.sizeMaxToMin').on('click', function (e) {
        boxFiltr.filterizr('sort','sort','desc');
    });

});

 В переменную var filterItem будем записывать значения пользовательского атрибута data-filter тега li, по которому будет произведено событие click. В переменную boxFiltr будем вносить пользовательские настройки плагина (ознакомится с ними можно на сайте разработчика).

Устанавливаем событие click на наше меню, запускаем наши настройки, указываем, чтобы плагин обработал фильтрацию ('filter') и передаем в параметрах переменную filterItem.

 На кнопки сортировки также устанавливаем событие click в параметрах передав сортировку по вазрастанию ("asc"), или по убыванию ("desc").

На этом можно было бы остановиться, но мне хочется показать больше возможностей этого замечательного плагина.

Давайте добавим еще 2 кнопки для вертикальной и горизонтальной смены положения нашей галереи.

<button class="horizontal">horizontal</button>
<button class="vertical">vertical</button>

 Постараемся сделать так, чтобы при смене ориентации положения, плагин запоминал переданные раньше данные. Перепишем немного наш скрипт:

 Для начала напишем несколько пользовательских функций, которые упростят нам работу:

$.fn.filterChangeSort = function (layout,filterNumber, sort, direction) {
    var demo = $(this).filterizr({
        delay: 50,
        layout: layout,
        setupControls: false,
        filterOutCss: {
            opacity: 0,
            transform: 'scale(0)'
        }
    });
    demo.filterizr('filter',filterNumber).filterizr('sort', sort, direction);
};

$.fn.btnClick = function(){
    if ($(this).attr('class') == 'sizeMinToMax'){
        direction = 'desc';
    } else {
        direction = 'asc';
    }
    $('#demo').filterChangeSort(positionBox,filterNumber,'sort',direction);
};

 Объявим переменные, которые будут содержать значения плагина "по умолчанию":

 var filterNumber = 'all',
     positionBox = 'sameSize',
     direction = 'asc';

 Переменная filterNumber отвечает за фильтрацию, positionBox - за ориентацию положения галереи, direction - за тип сортировки. 

$('.sort').on('click','li',function(){
    filterNumber = $(this).data('filter');
    $('.filtrs-demo').filterChangeSort(positionBox,filterNumber,'sort',direction);
});

$('.vertical').on('click',function(e){
    e.preventDefault();
    positionBox = 'vertical';
    $('.filtrs-demo').filterChangeSort(positionBox,filterNumber,'sort',direction);
});

$('.horizontal').on('click',function(e){
    e.preventDefault();
    positionBox = 'sameSize';
    $('.filtrs-demo').filterChangeSort(positionBox,filterNumber,'sort',direction);
});

$('.sizeMinToMax').on('click', function(){
    $(this).btnClick();
});
$('.sizeMaxToMin').on('click', function(){
    $(this).btnClick();
});

 

Все параметры сохраняем в глобальные переменные. Полностью скрипт будет выглядеть так:

$(function(){

    $.fn.filterChangeSort = function (layout,filterNumber, sort, direction) {
        var demo = $(this).filterizr({
            delay: 50,
            layout: layout,
            setupControls: false,
            filterOutCss: {
                opacity: 0,
                transform: 'scale(0)'
            }
        });
        demo.filterizr('filter',filterNumber).filterizr('sort', sort, direction);
    };

    $.fn.btnClick = function(){
        if ($(this).attr('class') == 'sizeMinToMax'){
            direction = 'desc';
        } else {
            direction = 'asc';
        }
        $('#demo').filterChangeSort(positionBox,filterNumber,'sort',direction);
    };

    /*==============================================*/
    var filterNumber = 'all',
        positionBox = 'sameSize',
        direction = 'asc';

    $('.sort').on('click','li',function(){
        filterNumber = $(this).data('filter');
        $('.filtrs-demo').filterChangeSort(positionBox,filterNumber,'sort',direction);
    });

    $('.vertical').on('click',function(e){
        e.preventDefault();
        positionBox = 'vertical';
        $('.filtrs-demo').filterChangeSort(positionBox,filterNumber,'sort',direction);
    });

    $('.horizontal').on('click',function(e){
        e.preventDefault();
        positionBox = 'sameSize';
        $('.filtrs-demo').filterChangeSort(positionBox,filterNumber,'sort',direction);
    });

    $('.sizeMinToMax').on('click', function(){
        $(this).btnClick();
    });

    $('.sizeMaxToMin').on('click', function(){
        $(this).btnClick();
    });

});

 На этом пожалуй все, хороших вам скриптов!!

Вернуться

Категории

+380500000000