Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Isotope небольшое изменение функции (https://javascript.ru/forum/jquery/71691-isotope-nebolshoe-izmenenie-funkcii.html)

emptyindorill 05.12.2017 19:23

Isotope небольшое изменение функции
 
Добрый день.

Использую для фильтрации плагин isotope.

Но в одном из вариантов мне не нужно что бы он скрывал отфильтрованные элементы.

Нужно что бы всего лишь на отфильтрованные классы добавлялся активный класс.

Пытаюсь на примере автора сделать этот вариант, http://jsfiddle.net/pAfwv/86/

Подскажите пожалуйста, как можно реализовать такое?

Может у кого есть примеры?

рони 05.12.2017 19:49

Цитата:

Сообщение от emptyindorill
Нужно что бы всего лишь на отфильтрованные классы добавлялся активный класс.

зачем тогда плагин?

void() 05.12.2017 21:26

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 06.12.2017 07:32

Цитата:

Сообщение от рони (Сообщение 472150)
зачем тогда плагин?

Он у меня в двух местах используется, с разными настройками.

Но они схожи с оригинальным функционалом.

Зачем изобретать велосипед, когда можно этот же изменить немного под себя.

Только вот не получается :-?

рони 06.12.2017 09:34

emptyindorill,
не могли бы вы пояснить, что даёт плагин если нужна только смена классов? не понимаю, что вы хотите сделать.

emptyindorill 06.12.2017 09:53

Цитата:

Сообщение от void() (Сообщение 472159)
emptyindorill,
что-то вроде этого?[/html]

Спасибо за подсказку.

Не могу сейчас сообразить быстро как подпилить для себя, решил таким способом.

Спасибо.

рони 06.12.2017 11:48

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>

рони 06.12.2017 11:50

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>

emptyindorill 14.12.2017 11:00

Цитата:

Сообщение от рони (Сообщение 472213)
emptyindorill,
вариант без плагина isotope

Спасибо большое!
У меня уже эта тема развилась до определенных настроек.

И возникла проблема в переключении активного checkbox'са

Вот тут я реализовал свой какокод)

Суть какая - по чекбоксам фильтруются блоки.
Причем фильтруется так что если блок с родителем последнего, четвертого уровня - нужно отобразить иерархию вплоть до первого родителя.

И тут столкнулся с проблемами двумя - не могу придумать как правильно настроить так что бы отображался только выбранный блок и его родители + сделать так что бы при клик на другой чекбокс функция возвращалась в исходное и начинала заново.

(+ у меня там аккордеон без поочередности, но его я указывать не стал, так что пусть вот это
$(".obertka" + "." + $(this).val()).parents(':hidden').slideDown('slow');
в коде не смущает)

Подскажите пожалуйста, или приведите примеры, где и как такое сделано.

Заранее, большое спасибо.

emptyindorill 14.12.2017 11:02

Насколько возможно будет такую функцию:

$('.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.