Comment personnaliser multi filtrage avec 'mixitup' plugin?

J'utilise le plugin jQuery MixItUp pour obtenir un filtrage sur une liste du contenu que j'ai.

Le plugin offre une multiFilter hors de la boîte, mais le problème, c'est qu'il a tout montrer, et puis quand vous cliquez sur l'un des filtres, il l'enlève de la liste, alors que je veux qu'il sorte que lorsque vous sélectionnez l'un des filtres, il montre seulement qu'un. Si vous cliquez sur un autre, il montre aussi de contenu pour que. Il y a une démo qui a quelque chose de similaire à ce que je veux, mais c'est plus complexe que ce que j'ai besoin de deux catégories pour les filtres, j'ai juste besoin d'une.

Dans la démo, ils n'utilisent pas le "multiFilter' option. Au lieu de cela, ils semblent définir la chaîne de "filtre", puis cracher qu'en fonction de ce filtre a été cliqué. J'ai essayé de déconstruire ce qu'ils avaient fait et en retravaillant comment je le voulais, mais n'a pas vraiment aller n'importe où.

En gros je suis perdu, donc en espérant que quelqu'un a joué avec ce plugin avant. Je veux juste un coup de pied dans la bonne direction. Dois-je écrire une coutume cliquez sur la fonction et l'oublier à l'aide de la multiFilter, en essayant de mettre la chaîne de filtre, ou peut le défaut multiFilter être personnalisé?

Il y a un violon ici avec le plugin js ajoutée et la valeur par défaut multiFilter fonctionnalité

HTML

<div id="filter">
    <span>Filter</span>
    <ul class="filter-list">
        <li data-filter="all" class="filter active"><a href="#">All</a></li>
        <li data-filter="lemon" class="filter"><a href="#">Lemon</a></li>
        <li data-filter="orange" class="filter"><a href="#">Orange</a></li>
        <li data-filter="apple" class="filter"><a href="#">Apple</a></li>
    </ul>
</div>

<ul id="grid">
    <li class="mix lemon">
        <h3>Lemon</h3>
        <p>Some text here</p>
    </li>
    <li class="mix orange">
        <h3>Orange</h3>
        <p>Some text here</p>
    </li>
    <li class="mix apple">
        <h3>Apple</h3>
        <p>Some text here</p>
    </li>
</ul>

JS

$('#grid').mixitup({
    multiFilter: 'true',
    showOnLoad: 'lemon orange apple'
});
  • Avez-vous résolu le problème? J'ai pris un coup d'oeil à vos violons, mais il semble fonctionner correctement. S'il vous plaît laissez-moi savoir si vous avez besoin de plus d'aide!
  • Merci @patrickkunka. Le filtre fonctionne parfaitement hors de la boîte. J'ai finalement réussi à obtenir ce que je voulais à l'aide de vos Parcs Nationaux de démonstration et de changer le script personnalisé là (j'ai ajouté ma réponse ci-dessous). Plugin vraiment cool. J'ai aussi fait le "tout" active si vous désélectionnez tous les autres filtres - je pense que ce serait un bon ajout à votre Parcs Nationaux de démonstration
InformationsquelleAutor davidpauljunior | 2013-06-06
  1. 4

    J'ai fini par passer par le script à partir de la Les Parcs nationaux de démonstration et le tordre jusqu'à ce que j'ai obtenu ce que je voulais.

    Mon script terminé comme ça, au cas où quelqu'un d'autre veut cela.

    $(function () {
//INSTANTIATE MIXITUP
$('#grid').mixitup({
effects: ['fade', 'blur']
});
//HANDLE MULTI-DIMENSIONAL CHECKBOX FILTERING
var $filters = $('#filters').find('li');
var filterString = 'all';
//Bind checkbox click handlers:
$filters.on('click', function () {
var $t = $(this),
filter = $t.attr('data-filter');
if (filter == 'all') {
//If "all"
if (!$t.hasClass('active')) {
//if unchecked, check "all" and uncheck all other active filters
$t.addClass('active').siblings().removeClass('active');
//Replace entire string with "all"
filterString = 'all';
}
} else {
//Else, uncheck "all"
$t.siblings('[data-filter="all"]').removeClass('active');
//Remove "all" from string
filterString = filterString.replace('all', '');
if (!$t.hasClass('active')) {
//Check checkbox
$t.addClass('active');
//Append filter to string
filterString = filterString == '' ? filter : filterString + ' ' + filter;
} else {
//Uncheck
$t.removeClass('active');
//Remove filter and preceeding space from string with RegEx
var re = new RegExp('(\\s|^)' + filter);
filterString = filterString.replace(re, '');
};
};
//Reset to all if none are active
if ($filters.filter('.active').size() == 0) {
$filters.filter('[data-filter="all"]').addClass('active');
filterString = 'all';
}
$('#grid').mixitup('filter', [filterString])
});
});
    InformationsquelleAutor davidpauljunior
  2. 1

    Avez-vous essayé le réglage de l'option "FilterLogic" pour "et"?

    http://mixitup.io/#FilterLogic

    • Je pense que le 'et' logique de filtre est utilisé pour le contenu de la balise que plusieurs types de choses, et de les filtrer uniquement s'ils correspondent à la fois.
    InformationsquelleAutor kunoo
  3. 0

    Bien, c'est assez simple, disons que votre conteneur a l'id "mix-conteneur" et que vous souhaitez afficher uniquement les 2 éléments "catégorie 1" et "catégorie 2" :

    if($('#mix-container').length != 0){
$('#mix-container').mixItUp(
{
load: {
filter: '.category-1, .category-2'
}
}
);
//To avoid adding ".active" class to your default filters each time you click on a button
var ok=true;
//This function is triggred every time you click on a button (after mixitup loads all the container)
$('#mix-container').on('mixEnd', function(e, state){
if(ok == true){
$("ul.option-set li[data-filter='.category-1']").addClass('active');
$("ul.option-set li[data-filter='.category-2']").addClass('active');
ok = false;
}
});
}
    InformationsquelleAutor Mohamed Salem Lamiri