Комбинированные фильтры изотопов jQuery, смешанные с хэш-историей барбекю - нужна помощь в понимании того, как - PullRequest
Новая
       19

Комбинированные фильтры изотопов jQuery, смешанные с хэш-историей барбекю - нужна помощь в понимании того, как

0 голосов
/ 11 января 2012

Я пытаюсь понять, как использовать Комбинированные фильтры с Jquery BBQ Hash History .

Что я хочу сделать, так это настроить пользовательский фильтр по логотипам, идентичности или брендингуЕсли пользователь нажимает на «Логотипы», я хочу, чтобы после этого он мог выполнять подфильтр с помощью «Некоммерческой, образовательной, розничной торговли» и т. Д. Я знаю, что комбинированные фильтры работают хорошо без реализованного кода BBQ jquery, но я хотел бы сделать оба.* 

    $optionSets.find('.filter-main a').click(function(){
    var $this = $(this);
    // don't proceed if already selected
    if ( $this.hasClass('selected') ) {
      return;
    }
    changeSelectedLink( $this );
        // 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 );
    // apply new option to previous
    $.extend( isotopeOptions, option );
    // set hash, triggers hashchange on window
    $.bbq.pushState( isotopeOptions );
    isOptionLinkClicked = true;
    return false;
  });

1 Ответ

4 голосов
/ 11 января 2012

См. http://support.metafizzy.co/2011/isotope-combo-filters-hash-links.html

$(function(){
  var $container = $('#container'),
      filters = {},
      // get filter from hash, remove leading '#'
      filterSelector = window.location.hash.slice(1);

  $('#filters a').click(function(){
    // store filter value in object
    // i.e. filters.color = 'red'
    var $this = $(this),
        name = $this.attr('data-filter-name'),
        value = $this.attr('data-filter-value'),
        isoFilters = [],
        filterName, prop;

    filters[ name ] = value;

    for ( prop in filters ) {
      isoFilters.push( filters[ prop ] );
    }

    var filterSelector = isoFilters.join('');

    // trigger isotope if its ready
    if ( $container.data('isotope') ) {
      $container.isotope({ filter: filterSelector });
    }

    window.location.hash = filterSelector;

    // toggle highlight
    $this.parents('ul').find('.selected').removeClass('selected');
    $this.parent().addClass('selected');

    return false;

  });


  // if there was a filter, trigger a click on the 
  // corresponding option
  if ( filterSelector ) {
    var selectorClasses = filterSelector.split('.').slice(1);
    $.each( selectorClasses, function( i, selectorClass ) {
      $('#filters a[data-filter-value=".' + selectorClass + '"]').click();
    });
  }

  $('#container').isotope({
    itemSelector: '.item',
    filter: filterSelector,
    masonry: {
      columnWidth: 80
    }
  });

});
...