如何在 Isotope.js 的链接点击上触发事件？

发布于 2024-12-10 23:44:08 字数 1099 浏览 0 评论 0原文

我正在尝试将单击事件的函数添加到我的代码中。顺便说一句，这是使用 Isotope.js，一个非常酷的 jQuery 工具。

因此，下面的代码的工作原理如下：单击

填充页面。一切都好。

但随后我有额外的代码可以修改一个

的大小，因此我需要同位素在单击任何

时触发以下操作 - 同位素是使用砌体的动态页面布局工具。

.isotope( 'reLayout', callback )

它重置布局属性并布局每个项目元素。请参阅 - isotope.js relayout

我想我只需要另一段代码单击

时触发重新布局功能的脚本。

这就是我所拥有的...

<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>

原文

I'm trying to add an function to an a click event to my code. This is to use Isotope.js, a pretty cool jQuery tool, by the way.

So the code below works as follows: Clicking on the data-filter link in the <ul> fires isotope. That populates the page with the various <li> that match the data-filter parameter. All good.

But then I have additional code that modifies the size of one <li> so I need isotope to fire the following on the click of any <li> - Isotope is a dynamic page layout tool that uses masonry.

.isotope( 'reLayout', callback )

Which resets layout properties and lays-out every item element.
See - isotope.js relayout

I think I just need another piece of code for the script that triggers the relayout function when an <li> is clicked.

This is what I have...

<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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

悲欢浪云 2024-12-17 23:44:08

      // 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，该 css 赋予该元素更大的尺寸。然后，正如您所指出的，同位素被称为“重新布局”。

      // change size of clicked element
      $container.delegate( '.element', 'click', function(){
        $(this).toggleClass('large');
        $container.isotope('reLayout');
      });

This is the code http://isotope.metafizzy.co/demos/relayout.html page uses when they do exactly what you are trying to do. This same approach should work for you to.

So $container would be your $("#container") and .element would be the same as the elements in your container. This adds or removes a class "large" which the class "large" has css which gives that element a larger size. Then as you noted the isotope gets called with "relayout".

回复收藏 0 原文

~没有更多了~