{"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":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.9 - aioseo.com -->\n\t<meta name=\"description\" content=\"MixItUp est un plugin jQuery dans la lign\u00e9e de Masonry ou Isotope (Isotope qui utilise d&#039;ailleurs Masonry) qui permettent d&#039;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. Ses plus Pour ne pas avoir tellement explor\u00e9 ses grandes soeurs, je\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Geoffrey Crofte\"\/>\n\t<meta name=\"keywords\" content=\"animation,jquery,masonry,plugin,javascript \/ jquery,ressources &amp; outils,tutoriels\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/mixitup-plugin-jquery-filtrer-ordonner-contenu\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.9\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/tutoriels\\\/mixitup-plugin-jquery-filtrer-ordonner-contenu#article\",\"name\":\"MixItUp \\u2013 Plugin jQuery pour filtrer et ordonner du contenu dynamiquement\",\"headline\":\"MixItUp &#8211; Plugin jQuery pour filtrer et ordonner du contenu dynamiquement\",\"author\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/auteur\\\/geoffrey#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/#person\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/wp-content\\\/uploads\\\/2013\\\/05\\\/mix-it-up-jquery-plugin.png\",\"width\":100,\"height\":100},\"datePublished\":\"2013-05-24T08:55:00+02:00\",\"dateModified\":\"2015-03-22T02:16:49+01:00\",\"inLanguage\":\"fr-FR\",\"commentCount\":24,\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/tutoriels\\\/mixitup-plugin-jquery-filtrer-ordonner-contenu#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/tutoriels\\\/mixitup-plugin-jquery-filtrer-ordonner-contenu#webpage\"},\"articleSection\":\"JavaScript \\\/ jQuery, Ressources &amp; Outils, Tutoriels, animation, jQuery, Masonry, plugin, CreativeJuiz\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/tutoriels\\\/mixitup-plugin-jquery-filtrer-ordonner-contenu#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog#listItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/theme\\\/tutoriels#listItem\",\"name\":\"Tutoriels\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/theme\\\/tutoriels#listItem\",\"position\":2,\"name\":\"Tutoriels\",\"item\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/theme\\\/tutoriels\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/tutoriels\\\/mixitup-plugin-jquery-filtrer-ordonner-contenu#listItem\",\"name\":\"MixItUp &#8211; Plugin jQuery pour filtrer et ordonner du contenu dynamiquement\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog#listItem\",\"name\":\"Accueil\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/tutoriels\\\/mixitup-plugin-jquery-filtrer-ordonner-contenu#listItem\",\"position\":3,\"name\":\"MixItUp &#8211; Plugin jQuery pour filtrer et ordonner du contenu dynamiquement\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/theme\\\/tutoriels#listItem\",\"name\":\"Tutoriels\"}}]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/#person\",\"name\":\"Geoffrey Crofte\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/tutoriels\\\/mixitup-plugin-jquery-filtrer-ordonner-contenu#personImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c9e2509009badcdf656faf5019ef0f567c4dd4e6e49beca151c21d23995db473?s=96&d=monsterid&r=g\",\"width\":96,\"height\":96,\"caption\":\"Geoffrey Crofte\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/auteur\\\/geoffrey#author\",\"url\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/auteur\\\/geoffrey\",\"name\":\"Geoffrey Crofte\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/tutoriels\\\/mixitup-plugin-jquery-filtrer-ordonner-contenu#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c9e2509009badcdf656faf5019ef0f567c4dd4e6e49beca151c21d23995db473?s=96&d=monsterid&r=g\",\"width\":96,\"height\":96,\"caption\":\"Geoffrey Crofte\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/tutoriels\\\/mixitup-plugin-jquery-filtrer-ordonner-contenu#webpage\",\"url\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/tutoriels\\\/mixitup-plugin-jquery-filtrer-ordonner-contenu\",\"name\":\"MixItUp \\u2013 Plugin jQuery pour filtrer et ordonner du contenu dynamiquement\",\"description\":\"MixItUp est un plugin jQuery dans la lign\\u00e9e de Masonry ou Isotope (Isotope qui utilise d'ailleurs Masonry) qui permettent d'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. Ses plus Pour ne pas avoir tellement explor\\u00e9 ses grandes soeurs, je\",\"inLanguage\":\"fr-FR\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/tutoriels\\\/mixitup-plugin-jquery-filtrer-ordonner-contenu#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/auteur\\\/geoffrey#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/auteur\\\/geoffrey#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/wp-content\\\/uploads\\\/2013\\\/05\\\/mix-it-up-jquery-plugin.png\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/tutoriels\\\/mixitup-plugin-jquery-filtrer-ordonner-contenu\\\/#mainImage\",\"width\":100,\"height\":100},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/tutoriels\\\/mixitup-plugin-jquery-filtrer-ordonner-contenu#mainImage\"},\"datePublished\":\"2013-05-24T08:55:00+02:00\",\"dateModified\":\"2015-03-22T02:16:49+01:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/\",\"name\":\"Creative Juiz\",\"description\":\"HTML5, CSS3, JavaScript, WordPress Tutorials\",\"inLanguage\":\"fr-FR\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/#person\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"MixItUp \u2013 Plugin jQuery pour filtrer et ordonner du contenu dynamiquement","description":"MixItUp est un plugin jQuery dans la lign\u00e9e de Masonry ou Isotope (Isotope qui utilise d'ailleurs Masonry) qui permettent d'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. Ses plus Pour ne pas avoir tellement explor\u00e9 ses grandes soeurs, je","canonical_url":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/mixitup-plugin-jquery-filtrer-ordonner-contenu","robots":"max-image-preview:large","keywords":"animation,jquery,masonry,plugin,javascript \/ jquery,ressources &amp; outils,tutoriels","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/mixitup-plugin-jquery-filtrer-ordonner-contenu#article","name":"MixItUp \u2013 Plugin jQuery pour filtrer et ordonner du contenu dynamiquement","headline":"MixItUp &#8211; Plugin jQuery pour filtrer et ordonner du contenu dynamiquement","author":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/auteur\/geoffrey#author"},"publisher":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/#person"},"image":{"@type":"ImageObject","url":"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2013\/05\/mix-it-up-jquery-plugin.png","width":100,"height":100},"datePublished":"2013-05-24T08:55:00+02:00","dateModified":"2015-03-22T02:16:49+01:00","inLanguage":"fr-FR","commentCount":24,"mainEntityOfPage":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/mixitup-plugin-jquery-filtrer-ordonner-contenu#webpage"},"isPartOf":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/mixitup-plugin-jquery-filtrer-ordonner-contenu#webpage"},"articleSection":"JavaScript \/ jQuery, Ressources &amp; Outils, Tutoriels, animation, jQuery, Masonry, plugin, CreativeJuiz"},{"@type":"BreadcrumbList","@id":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/mixitup-plugin-jquery-filtrer-ordonner-contenu#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.creativejuiz.fr\/blog#listItem","position":1,"name":"Accueil","item":"https:\/\/www.creativejuiz.fr\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/www.creativejuiz.fr\/blog\/theme\/tutoriels#listItem","name":"Tutoriels"}},{"@type":"ListItem","@id":"https:\/\/www.creativejuiz.fr\/blog\/theme\/tutoriels#listItem","position":2,"name":"Tutoriels","item":"https:\/\/www.creativejuiz.fr\/blog\/theme\/tutoriels","nextItem":{"@type":"ListItem","@id":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/mixitup-plugin-jquery-filtrer-ordonner-contenu#listItem","name":"MixItUp &#8211; Plugin jQuery pour filtrer et ordonner du contenu dynamiquement"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.creativejuiz.fr\/blog#listItem","name":"Accueil"}},{"@type":"ListItem","@id":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/mixitup-plugin-jquery-filtrer-ordonner-contenu#listItem","position":3,"name":"MixItUp &#8211; Plugin jQuery pour filtrer et ordonner du contenu dynamiquement","previousItem":{"@type":"ListItem","@id":"https:\/\/www.creativejuiz.fr\/blog\/theme\/tutoriels#listItem","name":"Tutoriels"}}]},{"@type":"Person","@id":"https:\/\/www.creativejuiz.fr\/blog\/#person","name":"Geoffrey Crofte","image":{"@type":"ImageObject","@id":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/mixitup-plugin-jquery-filtrer-ordonner-contenu#personImage","url":"https:\/\/secure.gravatar.com\/avatar\/c9e2509009badcdf656faf5019ef0f567c4dd4e6e49beca151c21d23995db473?s=96&d=monsterid&r=g","width":96,"height":96,"caption":"Geoffrey Crofte"}},{"@type":"Person","@id":"https:\/\/www.creativejuiz.fr\/blog\/auteur\/geoffrey#author","url":"https:\/\/www.creativejuiz.fr\/blog\/auteur\/geoffrey","name":"Geoffrey Crofte","image":{"@type":"ImageObject","@id":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/mixitup-plugin-jquery-filtrer-ordonner-contenu#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/c9e2509009badcdf656faf5019ef0f567c4dd4e6e49beca151c21d23995db473?s=96&d=monsterid&r=g","width":96,"height":96,"caption":"Geoffrey Crofte"}},{"@type":"WebPage","@id":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/mixitup-plugin-jquery-filtrer-ordonner-contenu#webpage","url":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/mixitup-plugin-jquery-filtrer-ordonner-contenu","name":"MixItUp \u2013 Plugin jQuery pour filtrer et ordonner du contenu dynamiquement","description":"MixItUp est un plugin jQuery dans la lign\u00e9e de Masonry ou Isotope (Isotope qui utilise d'ailleurs Masonry) qui permettent d'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. Ses plus Pour ne pas avoir tellement explor\u00e9 ses grandes soeurs, je","inLanguage":"fr-FR","isPartOf":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/mixitup-plugin-jquery-filtrer-ordonner-contenu#breadcrumblist"},"author":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/auteur\/geoffrey#author"},"creator":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/auteur\/geoffrey#author"},"image":{"@type":"ImageObject","url":"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2013\/05\/mix-it-up-jquery-plugin.png","@id":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/mixitup-plugin-jquery-filtrer-ordonner-contenu\/#mainImage","width":100,"height":100},"primaryImageOfPage":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/mixitup-plugin-jquery-filtrer-ordonner-contenu#mainImage"},"datePublished":"2013-05-24T08:55:00+02:00","dateModified":"2015-03-22T02:16:49+01:00"},{"@type":"WebSite","@id":"https:\/\/www.creativejuiz.fr\/blog\/#website","url":"https:\/\/www.creativejuiz.fr\/blog\/","name":"Creative Juiz","description":"HTML5, CSS3, JavaScript, WordPress Tutorials","inLanguage":"fr-FR","publisher":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/#person"}}]}},"aioseo_meta_data":{"post_id":"3444","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[],"defaultGraph":"","defaultPostTypeGraph":""},"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"location":null,"local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":null,"created":"2020-12-21 17:18:12","updated":"2025-07-09 23:30:16","seo_analyzer_scan_date":null},"_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}]}}