同位素2链接到另一页面的特定过滤器（如有历史记录）

Question

我正在使用最新的Isotope（v2），似乎Hash History不再适用于V1。

我希望能够从其他页面链接到某个过滤器。例如，我在'about.html'，其中包含指向'support.html #filtertype'的链接。

这是我目前的设置。

HTML：

<ul id="filters" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
    <li><a data-filter="*">All</a></li>
    <li><a data-filter=".chocolate">Chocolate</a></li>
    <li><a data-filter=".sweets">Sweets</a></li>
    <li><a data-filter=".mellows">Mellows</a></li>
</ul>

<ul class="isotope">
    <li class="chocolate">CHOCOLATE</li>
    <li class="sweets">SWEETTS</li>
    <li class="chocolate">CHOCOLATE</li>
    <li class="mellows">MELLOWS</li>        
</ul>

jQuery的：

$(window).load(function(){
        var $container = $('.isotope').isotope({
            itemSelector: '.isotope li',
            layoutMode: 'fitRows'
        });
        $('#filters li').on( 'click','a', function() {
            var filterValue = $( this ).attr('data-filter');
            // use filterFn if matches value
            $('#filters li a').removeClass("selected");
            $(this).addClass("selected");
            $container.isotope({ filter: filterValue });
        });

        $('#filters li').click(function(){
            var filterName = $('#filters li a.selected').text();
            $('.filter-text').text(filterName).append('<span class="caret"></span>');
        });

        // change is-checked class on buttons
        $('#filters').each( function( i, buttonGroup ) {
            var $buttonGroup = $( buttonGroup );
            $buttonGroup.on( 'click', 'a', function() {
              $buttonGroup.parent().find('.active').removeClass('active');
              $( this ).parent().addClass('active');
            });
        });
    });

演示： http://codepen.io/anon/pen/jELYeo

如何制作，以便我可以链接到其他页面的特定过滤器？

Answer 1

糖果将是同一页面中的一种产品，所以令人困惑的是你说的是“来自另一个页面”。实际页面只有1，它是product.html，然后在此页面中您有不同类型的产品。这就是你的html的样子。

然后澄清一下：Hash history from V1，适用于V2。

首先use bootstrap，其次使用同位素v2及其element sizing new feauture。另外you need to use COMBO filters（也可以从V1中获取哈希历史记录），因为您将拥有许多不同的产品类型。 COMBO + History的代码来自v1，但即使你使用V2它仍然有效。记住你需要添加jquery.ba-bbq.min.js，因为V2中没有更多。

菜单（我正在粘贴我使用的菜单，因此您必须根据自己的情况更改它）：

<div class="options clearfix combo-filters">
  <ul class="nav navbar-nav navbar-right">
     <li class="option-combo dropdown  Agency">
       <a class="btn btn-default btn-lg dropdown-toggle needsclick" data-toggle="dropdown" href="#" role="button" id="dropdownMenu1" aria-expanded="true">Agencies <span class="caret"></span>
       </a>
       <ul class="filter option-set dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" data-filter-group="Agency">
         <li><a class="btn btn-default btn-lg" href="#" data-filter-value="">Agencies</a></li>
         <li><a id="filter-tbwa" class="btn btn-default btn-lg" href="#filter-agency-tbwa" data-filter-value=".tbwa">tbwa</a>
         </li>
         <li><a id="filter-ogilvy" class="btn btn-default btn-lg" href="#filter-agency-ogilvy" data-filter-value=".ogilvy">ogilvy</a></li>
      </ul>
    </li>
    <li class="option-combo dropdown  Client">
      <a class="btn btn-default btn-lg dropdown-toggle needsclick" data-toggle="dropdown" href="#" role="button" id="dropdownMenu2" aria-expanded="true">Clients <span class="caret"></span></a>
      <ul class="filter option-set dropdown-menu" role="menu" aria-labelledby="dropdownMenu2" data-filter-group="Client">
        <li><a class="btn btn-default btn-lg" href="#" data-filter-value="">Clients</a></li>
        <li><a id="filter-vodafone" class="btn btn-default btn-lg" href="#filter-client-vodafone" data-filter-value=".vodafone">vodafone</a></li>
        <li><a id="filter-sky" class="btn btn-default btn-lg" href="#filter-client-sky" data-filter-value=".sky">sky</a></li>
      </ul>
    </li>
    <li class="option-combo dropdown  Year">
       <a class="btn btn-default btn-lg dropdown-toggle needsclick" data-toggle="dropdown" href="#" role="button" id="dropdownMenu3" aria-expanded="true">Years <span class="caret"></span>
       </a>
       <ul class="filter option-set dropdown-menu" role="menu" aria-labelledby="dropdownMenu3" data-filter-group="Year">
         <li><a class="btn btn-default btn-lg" href="#" data-filter-value="">Years</a></li>
         <li><a id="filter-y2013" class="btn btn-default btn-lg" href="#filter-year-y2013" data-filter-value=".y2013">y2013</a></li>
         <li><a id="filter-y2014" class="btn btn-default btn-lg" href="#filter-year-y2014" data-filter-value=".y2014">y2014</a></li>
         <li><a id="filter-y2012" class="btn btn-default btn-lg" href="#filter-year-y2012" data-filter-value=".y2012">y2012</a></li>
       </ul>
    </li>
    <li><button class="btn btn-link btn-lg no-bkg" id="open-button">About</button></li>
    <li><button class="search-btn btn btn-link btn-lg no-bkg">search</button></li>
  </ul>
</div>

在jQuery中你运行：

// store filter for each group
  var initialOptions = {
    itemSelector : '.item',
    layoutMode: 'packery',
    packery: {
       columnWidth: '.grid-sizer',
       isFitWidth: true
    }
  };

  // build a hash for all our options
  var options = {
    // special hash for combination filters
    comboFilters: {}
  };

您的产品的html看起来像这样（然后，您将不得不添加您的类和数据属性，这只是基于我的菜单的示例）：

<div class=container">
  <div class="row">
    <div id="container">
      <div class="grid-sizer col-sm-2 col-md-4 col-lg-3"></div>
      <div class="item Agencies clients ogilvy vodafone y2014 Years col-xs-12 col-sm-8 col-md-8 col-lg-6 loadedItem" data-client="vodafone" data-agency="ogilvy" data-year="2014">
      <div class="item Agencies clients tbwa sky y2012 Years col-xs-12 col-sm-8 col-md-8 col-lg-6 loadedItem" data-client="sky" data-agency="tbwa" data-year="2012">
      <div class="item Agencies clients super barilla y2010 Years  col-xs-12 col-sm-8 col-md-8 col-lg-6 loadedItem" data-client="barilla" data-agency="super" data-year="2010">
    </div>
  </div> 
</div>

你要做的哈希历史记录：

    // filter buttons
$('.filter').on( 'click', 'a', function( event ) {

  var $this = $(this);
  if ( $this.hasClass('selected') ) {
    return false;
  }
  var $optionSet = $this.parents('.option-set');
  var group = $optionSet.attr('data-filter-group');
  options.comboFilters[ group ] = $this.attr('data-filter-value');
  $.bbq.pushState( options );
});

function selectLink( $link ) {
  $link.parents('.option-set').find('.selected').removeClass('selected');
  $link.addClass('selected')
}

var location = window.location;
var $comboFilterOptionSets = $('.combo-filters .option-set');


function getComboFilterSelector( comboFilters ) {
  // build filter
  var isoFilters = [];
  var filterValue, $link, $optionSet;
  for ( var prop in comboFilters ) {
    filterValue = comboFilters[ prop ];
    isoFilters.push( filterValue );
    // change selected combo filter link
    $optionSet = $comboFilterOptionSets.filter('[data-filter-group="' + prop + '"]');
    $link = $optionSet.find('a[data-filter-value="' + filterValue + '"]');
    selectLink( $link );
  }
  var selector = isoFilters.join('');
  return selector;
}

$( window ).on( 'hashchange', function() {
  // get options from hash
  if ( location.hash ) {
    $.extend( options, $.deparam.fragment( location.hash, true ) );
  }
  // build options from hash and initial options
  var isoOptions = $.extend( {}, initialOptions, options );

  if ( options.comboFilters ) {
    isoOptions.filter = getComboFilterSelector( options.comboFilters );
  }

  $container.isotope( isoOptions );

})
  // trigger hashchange to capture initial hash options
  .trigger( 'hashchange' );

CSS

#container {
   margin: 0 auto;
}

这不仅会使您的布局居中，而且还会响应。 grid-sizer将是你的columnWidth，它将改变它的宽度based on your bootstrap classes，使整个事物响应你所期望的，除此之外，你将在每一行上看到的元素数量将基于你的引导程序课程设置。最后，组合过滤器不仅可以过滤不同的产品，还可以根据您过滤的所有产品更改哈希历史记录。

我使用packery作为布局模式，因为这是他所做的强制总是填补所有空白。 But he provides this layout mode separately，因此请记住也包含它。

注意：如果您想要不同尺寸，则需要指定一个网格，该网格使用每个框宽度的一半。

我希望有帮助