{"id":3444,"date":"2013-05-24T08:55:00","date_gmt":"2013-05-24T06:55:00","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=3444"},"modified":"2015-03-22T02:16:49","modified_gmt":"2015-03-22T01:16:49","slug":"mixitup-plugin-jquery-filtrer-ordonner-contenu","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/mixitup-plugin-jquery-filtrer-ordonner-contenu","title":{"rendered":"MixItUp &#8211; Plugin jQuery pour filtrer et ordonner du contenu dynamiquement"},"content":{"rendered":"<p>MixItUp est un plugin jQuery dans la lign\u00e9e de <a href=\"http:\/\/masonry.desandro.com\/\">Masonry<\/a> ou <a href=\"http:\/\/isotope.metafizzy.co\/\">Isotope<\/a> (Isotope qui utilise d&rsquo;ailleurs Masonry) qui permettent d&rsquo;ordonner et filtrer une partie de votre contenu selon des crit\u00e8res enti\u00e8rement personnalisables. Cr\u00e9ez des filtres personnalis\u00e9s facilement selon le besoin de votre projet.<!--more--><\/p>\n<h2>Ses plus<\/h2>\n<p>Pour ne pas avoir tellement explor\u00e9 ses grandes soeurs, je vais avoir du mal \u00e0 bien comparer les extensions, alors je vais surtout vous pr\u00e9senter ce qui m&rsquo;a plu sur ce plugin jQuery.<\/p>\n<ul>\n<li>La facilit\u00e9 de mise en place<\/li>\n<li>L&rsquo;API qui permet d&rsquo;acc\u00e9der \u00e0 pas mal de choses<\/li>\n<li>Les animations et effet mettant \u00e0 profit CSS3<\/li>\n<li>Le poids du plugin (14ko non gzipp\u00e9)<\/li>\n<li>Possibilit\u00e9 de faire varier la mise en page (plus d&rsquo;info sur <a href=\"http:\/\/mixitup.io\/\">la d\u00e9mo en anglais<\/a>)<\/li>\n<li>Les filtres personnalisables<\/li>\n<\/ul>\n<h2>Ses moins<\/h2>\n<p>Il y en a toujours, voici ceux que j&rsquo;ai not\u00e9 :<\/p>\n<ul>\n<li>Il ne propose pas de mise en page \u00ab\u00a0serr\u00e9e\u00a0\u00bb comme le propose Masonry<\/li>\n<li>Le tutoriel de base en anglais invite \u00e0 faire des choses pas top c\u00f4t\u00e9 accessibilit\u00e9\/bonnes pratiques<\/li>\n<li>Il y a quelques bugs visuels variables en fonction du navigateur (vraiment tr\u00e8s l\u00e9gers)<\/li>\n<li>Les animations ne fonctionnent pas sur IE &lt; 9\u2026 :p<\/li>\n<\/ul>\n<p>Voyons comment le mettre en place simplement.<\/p>\n<h2>Mise en place de MixItUp<\/h2>\n<p>Il ne faut pas oublier que JavaScript doit \u00eatre une sur-couche \u00e0 un contenu existant sur votre site web. Si vous partez de cette r\u00e9flexion, alors vous n&rsquo;aurez jamais de probl\u00e8me si votre visiteur navigue sans JavaScript (volontairement ou non).<\/p>\n<p class=\"center\"><a class=\"demonstration\" href=\"\/blog\/doc\/mixitup\/\">Voir la d\u00e9monstration<\/a><\/p>\n<p>Partons donc du principe que vous avez une belle galerie dont le HTML a cette forme :<\/p>\n<pre class=\"code\"><code class=\"language-markup\">&lt;ul id=\"grid\"&gt;\r\n\t&lt;li class=\"mix trees\" data-alphabetic=\"Arbres\" data-numeric=\"6\"&gt;\r\n\t\t&lt;img src=\"img\/trees.jpg\" width=\"240\" height=\"160\" alt=\"\"&gt;\r\n\t&lt;\/li&gt;\r\n\t&lt;li class=\"mix eyes human\" data-alphabetic=\"Yeux d'humain\" data-numeric=\"5\"&gt;\r\n\t\t&lt;img src=\"img\/human-eye2.jpg\" width=\"240\" height=\"160\" alt=\"\"&gt;\r\n\t&lt;\/li&gt;\r\n\t&lt;li class=\"mix animals eyes\" data-alphabetic=\"Yeux d'animaux\" data-numeric=\"4\"&gt;\r\n\t\t&lt;img src=\"img\/tiger-eye.jpg\" width=\"240\" height=\"160\" alt=\"\"&gt;\r\n\t&lt;\/li&gt;\r\n\t&lt;li class=\"mix trees\" data-alphabetic=\"Arbres\" data-numeric=\"1\"&gt;\r\n\t\t&lt;img src=\"img\/trees2.jpg\" width=\"240\" height=\"160\" alt=\"\"&gt;\r\n\t&lt;\/li&gt;\r\n\t&lt;li class=\"mix animals trees\" data-alphabetic=\"Panda Roux\" data-numeric=\"2\"&gt;\r\n\t\t&lt;img src=\"img\/panda-roux.jpg\" width=\"240\" height=\"160\" alt=\"\"&gt;\r\n\t&lt;\/li&gt;\r\n\t&lt;li class=\"mix humans tree\" data-alphabetic=\"Silhouette\" data-numeric=\"3\"&gt;\r\n\t\t&lt;img src=\"img\/silhouette.jpg\" width=\"240\" height=\"160\" alt=\"\"&gt;\r\n\t&lt;\/li&gt;\r\n\t&lt;li class=\"mix animals\" data-alphabetic=\"Renard\" data-numeric=\"8\"&gt;\r\n\t\t&lt;img src=\"img\/fox.jpg\" width=\"240\" height=\"160\" alt=\"\"&gt;\r\n\t&lt;\/li&gt;\r\n\t&lt;li class=\"mix humans eye\" data-alphabetic=\"Humain\" data-numeric=\"7\"&gt;\r\n\t\t&lt;img src=\"img\/human-eye.jpg\" width=\"240\" height=\"160\" alt=\"\"&gt;\r\n\t&lt;\/li&gt;\r\n&lt;\/ul&gt;<\/code><\/pre>\n<p>Notez bien que la classe \u00ab\u00a0.mix\u00a0\u00bb est associ\u00e9e \u00e0 tous les items de liste, ensuite chaque item poss\u00e8de des classes compl\u00e9mentaires permettant de regrouper les contenus. (trees, animals, humans, etc.)<br \/>\nLes attributs HTML5 <code>data-alphabetic<\/code> et <code>data-numeric<\/code> sont des attributs personnalis\u00e9s que je donne en guise d&rsquo;exemple et qui permettront d&rsquo;ordonner les items suivants des filtres pr\u00e9cis.<\/p>\n<p>Nous ajoutons donc l&rsquo;appel \u00e0 la biblioth\u00e8que jQuery, puis <a href=\"http:\/\/mixitup.io\/\">au plugin<\/a>.<\/p>\n<pre class=\"code\"><code class=\"language-markup\">&lt;script type=\"text\/javascript\" src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/2.0.0\/jquery.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\" src=\"js\/jquery.mixitup.min.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n<p>J&rsquo;ai b\u00eatement test\u00e9 avec la version 2.0 de jQuery, mais ce script est probablement compatible avec d&rsquo;autres versions.<br \/>\nCes deux scripts sont \u00e0 placer au plus proche de la balise de cloture <code>&lt;\/body&gt;<\/code><\/p>\n<p>Ensuite nous allons mettre un peu de JS pour afficher des filtres et quelques commandes pour trier notre galerie. Ajoutez ce code apr\u00e8s les deux appels JS pr\u00e9c\u00e9dents :<\/p>\n<pre class=\"code\"><code class=\"language-markup\">&lt;script type=\"text\/javascript\"&gt;\r\n\u00a0\r\n$(function(){\r\n\t\/\/ on ajoute une classe \"js\" sur body\r\n\t$('body').addClass('js');\r\n\u00a0\r\n\t\/* \r\n\t\tIci nous placerons les portions\r\n\t\tde code JS qui vont suivre.\r\n\t*\/\r\n\u00a0\r\n});\r\n&lt;\/script&gt;<\/code><\/pre>\n<p>Entrez ce code JS (\u00e0 l&#8217;emplacement du commentaire pr\u00e9c\u00e9dent) afin d&rsquo;ins\u00e9rer les filtres de notre galerie\u00a0:<\/p>\n<pre class=\"code\"><code class=\"language-javascript\">$('h2:first').before('&lt;div class=\"filters\"&gt;'+\r\n\t'&lt;div class=\"col\"&gt;'+\r\n\t\t'&lt;h2&gt;Filtres&lt;\/h2&gt;'\r\n\t\t+\r\n\t\t'&lt;ul&gt;'+\r\n\t\t\t'&lt;li&gt;&lt;button type=\"button\" class=\"filter\" data-filter=\"trees\"&gt;Arbres&lt;\/button&gt;&lt;\/li&gt;'+\r\n\t\t\t'&lt;li&gt;&lt;button type=\"button\" class=\"filter\" data-filter=\"eyes\"&gt;Yeux&lt;\/button&gt;&lt;\/li&gt;'+\r\n\t\t\t'&lt;li&gt;&lt;button type=\"button\" class=\"filter\" data-filter=\"animals\"&gt;Animaux&lt;\/button&gt;&lt;\/li&gt;'+\r\n\t\t\t'&lt;li&gt;&lt;button type=\"button\" class=\"filter\" data-filter=\"humans\"&gt;Humain&lt;\/button&gt;&lt;\/li&gt;'+\r\n\t\t\t'&lt;li&gt;&lt;button type=\"button\" class=\"filter all\"  data-filter=\"mix\"&gt;Toutes&lt;\/button&gt;&lt;\/li&gt;'+\r\n\t\t'&lt;\/ul&gt;'+\r\n\t'&lt;\/div&gt;'\r\n\t+\r\n\t'&lt;div class=\"col\"&gt;'+\r\n\t\t'&lt;h2&gt;Ordonner par&lt;\/h2&gt;'+\r\n\t\t'&lt;ul&gt;'+\r\n\t\t\t'&lt;li&gt;&lt;button type=\"button\" class=\"sort\" data-sort=\"data-alphabetic\" data-order=\"desc\"&gt;Lettre Desc.&lt;\/button&gt;&lt;\/li&gt;'+\r\n\t\t\t'&lt;li&gt;&lt;button type=\"button\" class=\"sort\" data-sort=\"data-alphabetic\" data-order=\"asc\"&gt;Lettre Asc.&lt;\/button&gt;&lt;\/li&gt;'+\r\n\t\t\t'&lt;li&gt;&lt;button type=\"button\" class=\"sort line\" data-sort=\"data-numeric\" data-order=\"desc\"&gt;Num\u00e9rique Desc.&lt;\/button&gt;&lt;\/li&gt;'+\r\n\t\t\t'&lt;li&gt;&lt;button type=\"button\" class=\"sort\" data-sort=\"data-numeric\" data-order=\"asc\"&gt;Num\u00e9rique Asc.&lt;\/button&gt;&lt;\/li&gt;'+\r\n\t\t\t'&lt;li&gt;&lt;button type=\"button\" class=\"sort line active\" data-sort=\"default\" data-order=\"asc\"&gt;Normal&lt;\/button&gt;&lt;\/li&gt;'+\r\n\t\t\t\/\/ apparition dans le DOM, desc = inverse du DOM \r\n\t\t\t'&lt;li&gt;&lt;button type=\"button\" class=\"sort\" data-sort=\"random\"&gt;Al\u00e9atoire&lt;\/button&gt;&lt;\/li&gt;'+\r\n\t\t'&lt;\/ul&gt;'+\r\n\t'&lt;\/div&gt;'+\r\n'&lt;\/div&gt;');<\/code><\/pre>\n<p>Nous utilisons la concat\u00e9nation (symbole \u00ab\u00a0+\u00a0\u00bb) dans le code JS pour conserver une certaine indentation qui permet de faciliter la lecture du code.<\/p>\n<p>Notez sur le premier gros bloc, que ces filtres sont associ\u00e9s aux classes de nos items de galerie. L&rsquo;attribut personnalis\u00e9 <code>data-filter<\/code> prend comme information l&rsquo;un des groupes mentionn\u00e9 pr\u00e9c\u00e9demment comme une classe d&rsquo;items de galerie (trees, animals, etc.)<br \/>\nLe deuxi\u00e8me gros bloc regroupe les filtres alphab\u00e9tiques et num\u00e9riques, et prennent comme valeur le nom de l&rsquo;attribut personnalis\u00e9 des items de galerie. (un peu complexe comme cheminement, je vous l&rsquo;accorde).<\/p>\n<p>Enfin, pour initialiser le plugin, il faut ajouter \u00e0 la suite de notre JS, ce petit bout de code\u00a0:<\/p>\n<pre class=\"code\"><code class=\"language-javascript\">$('#grid').mixitup({\r\n\teffects: ['fade','scale','rotateZ'],\r\n});<\/code><\/pre>\n<p>Ici avec les options utilis\u00e9es sur <a title=\"Voir la d\u00e9mo de l'article\" href=\"\/blog\/doc\/mixitup\/\">la d\u00e9mo de l&rsquo;article<\/a>.<\/p>\n<p>Il nous faut ins\u00e9rer un peu de CSS pour que les animations fonctionnent bien, CSS que nous n&rsquo;appliquerons que si JS est activ\u00e9.<br \/>\nCela tombe bien puisque nous ajoutons une classe \u00ab\u00a0js\u00a0\u00bb lorsque notre code JS pr\u00e9c\u00e9dent est fonctionnel.<\/p>\n<pre class=\"code\"><code class=\"language-css\">.js #grid li {\r\n\tdisplay: none;\r\n\topacity: 0;\r\n}<\/code><\/pre>\n<p>Placez ce code dans votre feuille de styles principale si vous le souhaitez \ud83d\ude42<\/p>\n<p>Pour ceux qui le souhaitent, voici quelques styles pour les boutons de filtre, mais \u00e0 vous d&rsquo;adapter bien entendu.<\/p>\n<pre class=\"code\"><code class=\"language-css\">.filters li {\r\n\tdisplay: inline;\r\n}\r\n.filters button {\r\n\tdisplay: inline-block;\r\n\tmargin: 3px 3px 0 0;\r\n\tpadding: 3px 10px;\r\n\tborder: 1px solid #ddd;\r\n\tbackground: #eee;\r\n\tcursor: pointer;\r\n}\r\n.filters button:focus {\r\n\tborder: 1px dashed #1591E0;\r\n\toutline: 0 none;\r\n}\r\n.filters button.all {\r\n\tbackground: #ddd;\r\n}\r\n.filters button.active {\r\n\tcolor: #f2f2f2;\r\n\tborder-color: #1591e0;\r\n\tbackground: #1591e0;\r\n}<\/code><\/pre>\n<h2>Qu&rsquo;avons nous produit\u00a0?<\/h2>\n<p>Avec ce proc\u00e9d\u00e9 nous avons am\u00e9lior\u00e9 l&rsquo;exp\u00e9rience utilisateur pour une partie des utilisateurs que l&rsquo;on a tendance \u00e0 facilement oublier, soit parce qu&rsquo;on n&rsquo;en a pas conscience, soit parce qu&rsquo;on est d\u00e9veloppeur fain\u00e9ant \ud83d\ude09 :<\/p>\n<ul>\n<li>les personnes qui naviguent sans JS n&rsquo;ont pas d&rsquo;\u00e9l\u00e9ments perturbants (liste de filtres inactifs), ils b\u00e9n\u00e9ficient juste d&rsquo;une simple galerie<\/li>\n<li>les personnes qui naviguent au clavier ont le b\u00e9n\u00e9fice du focus sur les boutons d&rsquo;action<\/li>\n<li>le focus est styl\u00e9 de mani\u00e8re \u00e0 savoir o\u00f9 nous nous trouvons \u00e0 la navigation clavier<\/li>\n<li>l&rsquo;\u00e9l\u00e9ment <code class=\"element\">button<\/code> peut porter l&rsquo;attribut <code>title<\/code> qui pourra offrir une information plus importante sur l&rsquo;\u00e9v\u00e8nement d\u00e9clench\u00e9 par le bouton<\/li>\n<\/ul>\n<p>Bref, votre code est plus accessible et plus coh\u00e9rent.<br \/>\nC&rsquo;est cet aspect des choses que le tutoriel officiel du plugin oublie compl\u00e8tement.<\/p>\n<p>Et voil\u00e0 !<br \/>\nSi vous avez des questions, \u00e7a se passe plus bas \ud83d\ude09<\/p>\n<p class=\"center\"><a class=\"demonstration\" href=\"\/blog\/doc\/mixitup\/\">Voir la d\u00e9monstration<\/a><\/p>\n<div class=\"sources\">\n<h2>Sources et liens utiles<\/h2>\n<ul>\n<li><a href=\"http:\/\/mixitup.io\/\" hreflang=\"en\">MixItUp plugin<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/barrel\/mixitup\" hreflang=\"en\">MixItUp sur Github (en)<\/a><\/li>\n<li><a href=\"http:\/\/www.megaptery.com\/2013\/05\/mixitup-filtrez-triez-donnees-dynamiquement-jquery.html\">MixItUp pr\u00e9sent\u00e9 par Megaptery<\/a><\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>MixItUp est un plugin jQuery dans la lign\u00e9e de Masonry ou Isotope (Isotope qui utilise d&rsquo;ailleurs Masonry) qui permettent d&rsquo;ordonner et filtrer une partie de votre contenu selon des crit\u00e8res enti\u00e8rement personnalisables. Cr\u00e9ez des filtres personnalis\u00e9s facilement selon le besoin de votre projet.<\/p>\n","protected":false},"author":4,"featured_media":3470,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[610,50,9],"tags":[120,52,547,51],"coauthors":[597],"class_list":["post-3444","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-ressources-telechargements","category-tutoriels","tag-animation","tag-jquery","tag-masonry","tag-plugin"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/3444","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/comments?post=3444"}],"version-history":[{"count":0,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/3444\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/3470"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=3444"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=3444"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=3444"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=3444"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}