Разметка вместо сокрытия предметов с помощью изотопа

Question

Разметка вместо сокрытия предметов с помощью изотопа

0

Можно ли как-то избежать скрытия элементов при фильтрации содержимого с помощью (jQuery) Isotope?

Решение, которое мне нужно, состоит в том, чтобы сохранить все элементы в своих позициях в контейнере Isotope, а затем несколько раз щелкнуть по кнопке - важно показать все элементы в контейнере все время.

Я знаю, что Isotope предлагает сортировку, но я не уверен, что это возможно при сортировке.

http://isotope.metafizzy.co/sorting.html

sepokroce 27 апр. 2014, в 13:05

Источник

Теги:

javascript

jquery

filtering

jquery-isotope

1 ответ

Ещё вопросы

stoolio · Accepted Answer · 2014-04-30T17-28-00.000Z

Я бы просто использовал простой старый javascript/jQuery для выбора и добавления класса или изменения необходимых элементов.

Итак, ответ: вам не нужно использовать Isotope для этого. Изотоп может сделать удивительный макет, и вы можете его сохранить, но вы можете просто увеличить его с помощью какого-то простого javascript/jQuery.

Изотопная фильтрация на самом деле не волшебство. Хотя вы можете предоставить селектор:

$container.isotope({ filter: '.show-these' });

Вы можете легко использовать любой вид javascript/jQuery-Fu для создания собственной коллекции:

$items = $('.show-these');
$container.isotope({ filter: $items });

Это хороший трюк, если вы хотите в будущем продвинуться в продвинутой фильтрации.

Чтобы отметить некоторые элементы, вы можете просто забыть часть фильтрации изотопов и делать все, что захотите, с любым из элементов. Для маркировки добавление класса, вероятно, отличная идея (предполагая, что вы используете jQuery):

// HTML
<div class="buttons">
  <a href='#' data-highlight=".popular">Most Popular</a>
...

// Isotopoe Items
<ul>
  <li class="popular">Item #1</li>
...

// JS
$('.buttons').on('click', 'a', function () {
  var $this = $(this),
    category = $this.data('highlight');

  $(category).addClass('highlighted');
});

Все, что вам нужно сделать, это добавить некоторый css для любого класса, который вы хотите добавить (highligh в коде выше).

Кроме того, приведенный выше код является только одним способом, вам, вероятно, понадобится какая-то логика для выбора и отмены выбора, или вы можете захотеть, чтобы они действовали как переключатели.

Это должно указывать вам в правильном направлении, сообщите мне, если вам нужна дополнительная помощь.