Фильтр сплит-списка jquery - PullRequest
Новая
       17

Фильтр сплит-списка jquery

0 голосов
/ 11 мая 2010

см .: http://jasondaydesign.com/index2.html

Я использую easylistsplitter.js для размещения элементов портфолио. К сожалению, мой фильтр не работает на всех элементах. Фильтрует только первый столбец.

Мысли?

Спасибо!

1 Ответ

1 голос
/ 11 мая 2010

Я не совсем понимаю, как вы пытаетесь использовать listplitter вместе с плагином кладки ...

Плагин masonry устанавливает макет и разбивает макет на любое количество столбцов. Если вы посмотрите на страницу макета, кладка разбила макет на 4 столбца: #primary.listCol1, .listCol2, .listCol3 и .listCol4.last. Поэтому применение списочного разделителя впоследствии не работает, поскольку список уже разделен.

Если вы пытаетесь отсортировать список, вы можете проверить плагин tinysort или, если вам нужен хороший короткий скрипт, то из этого ответа потребуется небольшой модификация.

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

$(document).ready(function() {
  $('ul#portfolio-filter a').click(function() {
    $(this).css('outline','none');
    $('ul#portfolio-filter .current').removeClass('current');
    $(this).parent().addClass('current');

    var filterVal = $(this).text().toLowerCase().replace(' ','-');

    if(filterVal == 'all') {
      $('.portfolio li.hidden').animate({ width: 'show', opacity: 'show' }, 1000 ).removeClass('hidden');
    } else {
      $('.portfolio li').each(function() {
        if(!$(this).hasClass(filterVal)) {
          $(this).animate({ width: 'hide', opacity: 'hide' }, 1000 ).addClass('hidden');
        } else {
          $(this).animate({ width: 'show', opacity: 'show' }, 1000 ).removeClass('hidden');
        }
      });
    }
    return false;
  });
});

Вам не нужно ничего менять, кроме как заменить содержимое "jquery.filterablepack.js" на приведенный выше код.

...