jQuery Isotope hash-history: предварительно подтвердить хэш-URL - PullRequest
Новая
       1

jQuery Isotope hash-history: предварительно подтвердить хэш-URL

2 голосов
/ 26 сентября 2011

Я использую Изотоп с Хэш-историей.Он прекрасно работает, но я не доволен URL-адресом - я хотел бы упростить и очистить его.

В настоящее время используется: 

var href = $this.attr('href').replace( /^#/, '' );
var option = $.deparam( href, true );`

В этой разметке: 

<li><a href="#filter=.work/">Work</a></li>

Итак, мой вопрос: как я могу заставить его работать со следующей разметкой? 

<li><a href="#/work/">Work</a></li>

Я только с использованием фильтров, все остальные параметры изотопа заблокированывниз, поэтому я надеюсь удалить ссылку на фильтры.

Заранее спасибо!

1 Ответ

0 голосов
/ 01 ноября 2015

Я использую это: 

function getHashFilter() {
  var hash = location.hash;
  // get filter=filterName
  var matches = location.hash.match(/^#?(.*)$/)[1]; // this is to get the name of the class
  var hashFilter = matches;
  return hashFilter;

}

$( function() {
  var $container = $('. isotope');

  // bind filter button click
  var $filters = $('#filters').on( 'click', 'span', function() {
    var filterAttr = $( this ).attr('data-filter');
    // set filter in hash
    location.hash = '/' + filterAttr.substr(1); // adding the slash for the url
  });

  var isIsotopeInit = false;

  function onHashchange() {
    var hashFilter = getHashFilter();
    if ( !hashFilter && isIsotopeInit ) {
      return;
    }
    isIsotopeInit = true;
    // filter isotope
    $container.isotope({
      itemSelector: '.element-item',
      filter: '.' + hashFilter.substr(1) //adding the . so it can match the data-filter
    });
    // set selected class on button
    if ( hashFilter ) {
      $filters.find('.is-checked').removeClass('is-checked');
      $filters.find('[data-filter=".' + hashFilter + '"]').addClass('is-checked');
    }
  }

  $(window).on( 'hashchange', onHashchange );
  // trigger event handler to init Isotope
  onHashchange();
});

Я понял, что * не будет работать после этого. Поэтому вам нужно добавить еще один класс / фильтр данных, чтобы показать все.

...