同位素2链接到另一页上的特定过滤器(如具有历史记录) [英] Isotope 2 link to specific filter from another page (like has history)

问题描述

我正在使用最新的同位素(v2)，看来哈希历史不再适用于V1.

I'm using the latest Isotope (v2) and it seems the Hash History no longer works from V1.

我希望能够链接到另一页上的某个过滤器.例如，我在"about.html"上，其中包含"support.html#filtertype"的链接.

I would like to be able to link to a certain filter from another page. For example I'm on 'about.html' which contains a link to '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

我如何做到这一点，以便可以从另一个页面链接到特定的过滤器?

How would I make it so I can link to a specific filter from another page?

推荐答案

甜食将是同一页面中的一种产品，因此令人困惑的是您在说来自另一页面".实际页面只有1，它是product.html，那么在此页面中，您有不同类型的产品.这就是您的html样子.

Sweets will be a type of products in the same page, so what is confusing is that you are saying "from another page". The actual page is only 1 and it is product.html, then in this page you have different types of products. That's what you html looks like.

然后澄清一下:来自V1的哈希历史记录 ，可在V2中使用.

Then to clarify a bit: Hash history from V1, works with V2.

首先使用引导程序，其次使用同位素v2及其您还需要使用COMBO过滤器(根据需要从V1开始使用)哈希历史记录)，因为您将拥有许多不同的产品类型. COMBO + History的代码来自v1，但即使使用V2，它仍然可以正常工作.请记住，您需要添加 jquery.ba-bbq.min.js ，因为V2中已经没有了.

First use bootstrap, secondly use isotope v2 and its element sizing new feauture. Also you need to use COMBO filters (from V1 as you want the hash history too) as you will have many different products types. The codes for COMBO+History is from v1 but it stills works even if you use V2. remember you need to add jquery.ba-bbq.min.js as there is no more in V2.

菜单(我要粘贴我曾经使用过的菜单，因此您必须根据自己的喜好更改菜单):

Menu ( I am pasting a menu I used so you will have to change it accordinngly to yours):

<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中，您将运行:

In jQuery you'd run:

// 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看起来像这样(然后，您将不得不添加您的类和数据属性，这只是基于我的菜单的一个示例):

Your html for your products would look like this (then again, you will have to add your classes and your data attributes, this is just an example based on my menu):

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

针对您要做的哈希历史记录:

Fot the hash histroy you'd do:

    // 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，它会根据您的引导程序类更改其宽度 正如您所期望的那样，整个事物都具有响应能力，此外，您将在每行中看到的元素数量取决于您的引导程序类设置.最后，组合过滤器不仅使您可以过滤不同的产品，而且还可以根据您过滤的所有产品来更改哈希历史记录.

Not just this would center your layout but it will also be responsive. grid-sizer will be your columnWidth and it would change its width based on your bootstrap classes making the whole thing responsive as you'd expect, on top of this the number of elements that you will see on each row will be based on your bootstrap class settings. Finally the combo filters will make it possible not just to filter different products but also to change the hash history based on all products you have filtered.

我将packery用作布局模式，因为这是他为了始终填补所有空白而进行的操作. 但是他单独提供了这种布局模式，因此请记住包括它也是.

I am using packery as a layout mode as this is what he did to force to always fill all the gaps. But he provides this layout mode separately, therefore remember to include it too.

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

Note: You need to specify a grid which uses half the width of each boxes if you want different sizes.

我希望对您有帮助

这篇关于同位素2链接到另一页上的特定过滤器(如具有历史记录)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！