Скрипт фильтрации jQuery / Скрипты / Сниппеты Bootstrap

Версия: v1.1

Каталог: Сниппеты Bootstrap

Категория: Скрипты

Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Английский

Уникальный ID: 2579

Количество символов:

Посмотрели: 3429 раз

Помощь: установка & настройка

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 4 голосов

Тип лицензии: CC BY 4.0

Авторство: https://goo.gl/muh7zW

Информация: Пользователям

Информация: Правообладателям

Теги: фильтры изображений, Скрипт, Script, Snippet, фильтр, сниппет, Bootstrap

Поделился: BootstrapТема

Добавлено: 2018-01-03 в 16:52

Метка: 1566149648

⇄ ⇅

<h1 class="text-center mb-3 mt-3">Filter Gallery</h1>

<div class="text-center mb-3">
 <button class="btn btn-default" data-filter="all">All Images</button>
 <button class="btn btn-default" data-filter="girls">Images Girls</button>
 <button class="btn btn-default" data-filter="reka">Images Reka</button>
 <button class="btn btn-default" data-filter="code">Script Code</button>
</div><hr />

<div class="mb-3 col filter code">
<pre><code>
$(document).ready(function(){

$("button").click(function(){
 var value = $(this).attr('data-filter');
 
 if(value == "all")
 {
 $('.filter').show('1000');
 }
 else
 {
 $(".filter").not('.'+value).hide('3000');
 $('.filter').filter('.'+value).show('3000');
 
 }
 });
 
 if ($("button").removeClass("active")) {
 $(this).removeClass("active");
}
 $(this).addClass("active");

});
</code></pre>
 </div>

</div>

$("button").click(function(){
 var value = $(this).attr('data-filter');
 
 if(value == "all")
 {
 $('.filter').show('1000');
 }
 else
 {
 $(".filter").not('.'+value).hide('3000');
 $('.filter').filter('.'+value).show('3000');
 
 }
 });
 
 if ($("button").removeClass("active")) {
$(this).removeClass("active");
}
$(this).addClass("active");

});
</script>

BootstrapTema

Скрипт фильтрации jQuery

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0