jQuery Isotope Filtri combinati mescolato con barbecue Hash Storia - Bisogno d'aiuto a capire come
-
26-10-2019 - |
Domanda
Sto cercando di capire come utilizzare Combinazione con Jquery barbecue Hash Storia .
Quello che voglio fare è avere il filtro utente da Logos, identità o Branding. Se l'utente fa clic Logos, voglio che quindi in grado di sotto filtro da "non-profit, Istruzione, vendita al dettaglio", ecc So combinazione filtra lavoro bene anche senza il codice jQuery barbecue implementato, ma mi piacerebbe fare entrambe le cose.
$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;
});
Soluzione
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
}
});
});
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow