jquery - 同位素过滤器烧烤哈希

Question

拼命尝试用 BBQ Hash 设置同位素但失败了。已经花时间进行演示：http: //isotope.metafizzy.co/tests/combo-sort-history.html仍然没有得到它。

我下面的代码目前正在过滤我的项目......只是无法获得哈希设置。我需要这个，所以我可以直接链接到我的过滤器链接之一。任何帮助都会很棒。无法将其集成到我已经拥有的东西中，所以请记住这一点......

<script>
    var $container = $('.container');
    $(window).load(function() {
         $('.container').isotope({
            itemSelector : '.item',
            isFitWidth: true,
            // sortBy : 'random',
        });

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


    });

      $(window).load()
  </script>

score 0 · Accepted Answer

我显然不允许链接到 Isotope BBQ 站点，但如果您访问 Isotopes 站点并选择 Hash History with Jquery BBQ，您可以在下面看到我发布的内容。

几天前我尝试安装它时，我能够很快地让它工作。当然，第一步是包含 BBQ Hash jquery。

我更改了 URL 以更好地表示 HASH 请求。而不是使用：

<a href="#" data-filter=".television">

我用了：

<a href="#filter=.television">

如需帮助确定 fitler 类型，您可以使用 print 或 log$.param({ filter: ':not(.transition)' })告诉您它应该是什么样子。

然后我将它包含在 jQuery 中。这部分将替换代码中的 click 函数。

$('.filter a').click(function(){
  // get href attr, remove leading #
  var href = $(this).attr('href').replace( /^#/, '' ),
  // convert href into object
  // i.e. 'filter=.inner-transition' -> { filter: '.inner-transition' }
  option = $.deparam( href, true );
  // set hash, triggers hashchange on window
  $.bbq.pushState( option );
  return false;
});

最后，这段代码是新的过滤器。我会将它放在 window.load 函数中，低于该函数内的所有内容。首先，您要设置选项。

$(window).bind( 'hashchange', function( event ){
     // get options object from hash
 var hashOptions = $.deparam.fragment();
     // apply options from hash
 $container.isotope( hashOptions );
 })
    // trigger hashchange to capture any hash data on init
.trigger('hashchange');

通过将上面的代码替换为我在此处列出的代码并更改您的<a>过滤器列表，您应该可以让它正常工作。但是，我刚刚列出了同位素中包含的内容，因为它对我有用！如果你有麻烦，请告诉我。

jquery - 同位素过滤器烧烤哈希

1 回答 1

Related

Reference