Isotope небольшое изменение функции
Добрый день.
Использую для фильтрации плагин isotope. Но в одном из вариантов мне не нужно что бы он скрывал отфильтрованные элементы. Нужно что бы всего лишь на отфильтрованные классы добавлялся активный класс. Пытаюсь на примере автора сделать этот вариант, http://jsfiddle.net/pAfwv/86/ Подскажите пожалуйста, как можно реализовать такое? Может у кого есть примеры? |
Цитата:
|
emptyindorill,
что-то вроде этого? Там чуть доделать нужно, чтоб чекбоксы заработали. Но можно и так мышью нажимать на элементы - главное идея)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="filters">
<input type="checkbox" name="red" value=".red" id="red"><label for="red">red</label>
<input type="checkbox" name="blue" value=".blue" id="blue"><label for="blue">blue</label>
<input type="checkbox" name="green" value=".green" id="green"><label for="green">green</label>
<input type="checkbox" name="yellow" value=".yellow" id="yellow"><label for="yellow">yellow</label>
</div>
<div id="container">
<div class="item red"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item yellow"></div>
<div class="item red"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item yellow"></div>
<div class="item red"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item yellow"></div>
<div class="item red"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item yellow"></div>
<div class="item red"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item yellow"></div>
</div>
<script>
var arr = document.querySelectorAll('.item');
window.onload = function(){
for(var i = 0; i < arr.length; i++){
arr[i].onclick = filtr;
}
}
function filtr(){
var x = this.classList[1];
var temp = [];
for(var i = 0; i < arr.length; i++){
if(arr[i].classList.contains(x)){
temp[temp.length] = arr[i];
}
}
/*console.log(temp);*/
/*тут можно добавить выбранным элементам свой класс или сделать с ними что-то другое*/
for(var k = 0; k < temp.length; k++){
temp[k].classList.toggle('myClass');
}
}
</script>
<style>
.myClass{
border-radius:50%;
}
body {
font-family: 'Helvetica Neue', Arial, sans-serif;
}
#container {
border: 1px solid;
padding: 3px;
}
.item {
width: 70px;
height: 70px;
margin: 3px;
float: left;
}
.item.large {
width: 146px;
height: 146px;
}
.red { background: red; }
.blue { background: blue; }
.green { background: green; }
.yellow { background: yellow; }
/* Start: Recommended Isotope styles */
/**** Isotope Filtering ****/
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
transition-duration: 0s;
}
/* End: Recommended Isotope styles */
.item.is-filtered {
border: 3px solid #000;
}
</style>
</body>
</html>
|
Цитата:
Но они схожи с оригинальным функционалом. Зачем изобретать велосипед, когда можно этот же изменить немного под себя. Только вот не получается :-? |
emptyindorill,
не могли бы вы пояснить, что даёт плагин если нужна только смена классов? не понимаю, что вы хотите сделать. |
Цитата:
Не могу сейчас сообразить быстро как подпилить для себя, решил таким способом. Спасибо. |
isotope сортировка по классу
emptyindorill,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body {
font-family: 'Helvetica Neue', Arial, sans-serif;
}
#container {
border: 1px solid;
padding: 3px;
}
.item {
width: 70px;
height: 70px;
margin: 3px;
float: left;
box-sizing: border-box;
}
.item.large {
width: 146px;
height: 146px;
}
.red { background: red; }
.blue { background: blue; }
.green { background: green; }
.yellow { background: yellow; }
/* Start: Recommended Isotope styles */
/**** Isotope Filtering ****/
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
transition-duration: 0s;
}
/* End: Recommended Isotope styles */
.item.is-filtered {
border: 3px solid #000;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://isotope.metafizzy.co/beta/isotope.pkgd.js"></script>
<script>
$(function() {
var $container = $("#container"),
$checkboxes = $("#filters input");
$container.isotope({
itemSelector: ".item",
getSortData: {
cls: function(itemElem) {
var chec = $checkboxes.filter(":checked").get();
for (var i = 0; i < chec.length; i++) {
var cls = chec[i].value.slice(1);
if (itemElem.classList.contains(cls)) {
itemElem.classList.add("is-filtered");
return i
}
}
itemElem.classList.remove("is-filtered");
return i
}
},
sortBy: "cls"
});
$checkboxes.change(function() {
$container.isotope("updateSortData").isotope()
})
});
</script>
</head>
<body>
<div id="filters">
<input type="checkbox" name="red" value=".red" id="red"><label for="red">red</label>
<input type="checkbox" name="blue" value=".blue" id="blue"><label for="blue">blue</label>
<input type="checkbox" name="green" value=".green" id="green"><label for="green">green</label>
<input type="checkbox" name="yellow" value=".yellow" id="yellow"><label for="yellow">yellow</label>
</div>
<div id="container">
<div class="item red"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item yellow"></div>
<div class="item red"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item yellow"></div>
<div class="item red"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item yellow"></div>
<div class="item red"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item yellow"></div>
<div class="item red"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item yellow"></div>
</div>
</body>
</html>
|
checkbox фильтрация блоков
emptyindorill,
вариант без плагина isotope
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body {
font-family: 'Helvetica Neue', Arial, sans-serif;
}
#container {
border: 1px solid;
padding: 3px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.item {
width: 70px;
height: 70px;
margin: 3px;
box-sizing: border-box;
}
.item.large {
width: 146px;
height: 146px;
}
.red { background: red; }
.blue { background: blue; }
.green { background: green; }
.yellow { background: yellow; }
.item.is-filtered {
border: 3px solid #000;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var chec = $("#filters input"),
item = $("#container .item");
chec.on("change", function() {
item.removeClass("is-filtered").css({
"order": chec.length
});
$.each(chec.filter(":checked"), function(i, el) {
item.filter(el.value).css({
"order": i
}).addClass("is-filtered")
})
})
});
</script>
</head>
<body>
<div id="filters">
<input type="checkbox" name="red" value=".red" id="red"><label for="red">red</label>
<input type="checkbox" name="blue" value=".blue" id="blue"><label for="blue">blue</label>
<input type="checkbox" name="green" value=".green" id="green"><label for="green">green</label>
<input type="checkbox" name="yellow" value=".yellow" id="yellow"><label for="yellow">yellow</label>
</div>
<div id="container">
<div class="item red"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item yellow"></div>
<div class="item red"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item yellow"></div>
<div class="item red"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item yellow"></div>
<div class="item red"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item yellow"></div>
<div class="item red"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item yellow"></div>
</div>
</body>
</html>
|
Цитата:
У меня уже эта тема развилась до определенных настроек. И возникла проблема в переключении активного checkbox'са Вот тут я реализовал свой какокод) Суть какая - по чекбоксам фильтруются блоки. Причем фильтруется так что если блок с родителем последнего, четвертого уровня - нужно отобразить иерархию вплоть до первого родителя. И тут столкнулся с проблемами двумя - не могу придумать как правильно настроить так что бы отображался только выбранный блок и его родители + сделать так что бы при клик на другой чекбокс функция возвращалась в исходное и начинала заново. (+ у меня там аккордеон без поочередности, но его я указывать не стал, так что пусть вот это
$(".obertka" + "." + $(this).val()).parents(':hidden').slideDown('slow');
в коде не смущает)Подскажите пожалуйста, или приведите примеры, где и как такое сделано. Заранее, большое спасибо. |
Насколько возможно будет такую функцию:
$('.full_cart').each(function() {
$('.mails').parent().find('ul li').on('click', function() {
change_active($(this));
return false;
});
function change_active(current) {
$('.full_cart .mails li').removeClass("active");
current.addClass("active");
}
});
Подвязать к моему коду? Будет ли вариант с change_active адекватно интерпретироваться? |
| Часовой пояс GMT +3, время: 17:19. |