Filtrado de un grupo de elementos mediante clases CSS-Vanilla-filters

Vista prévia

Descripción

Una biblioteca de JavaScript Vanilla para filtrar un grupo de elementos HTML mediante clases CSS. Usa transiciones CSS3 para el efecto de Shuffle de elementos.

Funcionamiento

Agregue la hoja de estilos Style-philters. CSS y JavaScript Style-philters. js a la Página Web.

<link rel="stylesheet" href="style-philters.css">
<script src="vanilla-filters.js"></script>

Categorice & agrupe sus elementos utilizando las clases CSS de la siguiente manera:

<div id="results">

<div class="result philter-1">


<a href="1.jpg">



<img src="1.jpg" alt="placeholder image" />


</a>

</div>

<div class="result philter-1 philter-4">


<a href="2.jpg">



<img src="2.jpg" alt="placeholder image" />


</a>

</div>

<div class="result philter-2">


<a href="3.jpg">



<img src="3.jpg" alt="placeholder image" />


</a>

</div>

<div class="result philter-3">


<a href="4.jpg">



<img src="4.jpg" alt="placeholder image" />


</a>

</div>

<div class="result philter-1 philter-2">


<a href="5.jpg">



<img src="5.jpg" alt="placeholder image" />


</a>

</div>

...
</div>

Crear botones para filtrar los elementos.

<div id="philters-wrapper">

<ul id="philters">


<li><a href="#philter-1">Filter 1</a></li>


<li><a href="#philter-2">Filter 2</a></li>


<li><a href="#philter-3">Filter 3</a></li>


<li><a href="#philter-4">Filter 4</a></li>


<li><a id="surprise-me" href="#surprise-me">Surprise Me</a></li>


<li><a id="clear-philters" href="#clear-philters">Clear Filters</a></li>

</ul>
</div>

Inicializa los filtros de vainilla con algunas opciones.

philterContent('#philters', '#results', {

viewFilters: 'Open Filters',

hideFilters: 'Close Filters',

clearTarget: '#clear-philters',

surpriseTarget: '#surprise-me'
});

Todas las opciones predeterminadas.

philterContent('#philters', '#results', {


// Customize text for View Filters action

viewFilters: 'View Filters',


 // Customize text for Hide Filters action

hideFilters: 'Hide Filters',


 // Clear Filters element id or class if desired. Leave as empty string to exclude from your filters.

clearTarget: '',


 // Surprise element id or class if desired. Leave as empty string to exclude from your filters.

surpriseTarget: '',


 // Customize warning message

warningMsg: 'Whoops! Looks like your search is too narrow. Try removing a selected filter or clear all filters to try again.'


 });