Как запустить событие по ссылке нажмите для Isotope.js? - PullRequest
Новая
       23

Как запустить событие по ссылке нажмите для Isotope.js?

0 голосов
/ 18 октября 2011

Я пытаюсь добавить функцию к событию click в моем коде. Кстати, для этого нужно использовать Isotope.js, довольно крутой инструмент jQuery.

Таким образом, приведенный ниже код работает следующим образом: Щелчок по ссылке фильтра данных в <ul> запускает изотоп. Это заполняет страницу различными <li>, которые соответствуют параметру фильтра данных. Все хорошо.

Но тогда у меня есть дополнительный код, который изменяет размер одного <li>, поэтому мне нужен изотоп, чтобы запустить следующее при щелчке любого <li> - Изотоп - это инструмент динамического макета страницы, использующий кладку. 

.isotope( 'reLayout', callback )

Сбрасывает свойства макета и размещает каждый элемент элемента. Смотрите - isotope.js relayout

Я думаю, что мне просто нужен еще один кусок кода для скрипта, который запускает функцию ретрансляции при нажатии <li>.

Это то, что у меня есть ... 

<ul><a class="black" href="#" data-filter=".'.$folder.'">'.$folder.'</a> </ul>';

<li><a href="'.$file.'">'.rtrim($name,'.mp3').'</a></li>;

<script>
  $('#filters a').click(function(){
  var selector = $(this).attr('data-filter');
  $('#container').isotope({ filter: selector });
  return false;
});

$('#container').isotope({
  masonry : {
    columnWidth : 1
  }

 }); 
</script>

1 Ответ

3 голосов
/ 18 октября 2011 
      // change size of clicked element
      $container.delegate( '.element', 'click', function(){
        $(this).toggleClass('large');
        $container.isotope('reLayout');
      });

Это код, который страница http://isotope.metafizzy.co/demos/relayout.html использует, когда они делают именно то, что вы пытаетесь сделать.Этот же подход должен работать для вас.

Таким образом, $ container будет вашим $ ("# container"), а .element будет таким же, как элементы в вашем контейнере.Это добавляет или удаляет класс «large», который имеет класс «large» css, что дает этому элементу больший размер.Затем, как вы заметили, изотоп вызывается с "relayout".

...