Dans l’exemple ci-dessous, nous avons une liste d’éléments soumise à des critères de tri (Nom, Pertinence, Nouveauté…) par ordre ascendant et descendant. La barre de tri est présente deux fois dans la page, en haut et en bas de la liste d’éléments.
J’ai logiquement souhaité qu’au clic sur un pictogramme ‘ascendant’/’descendant’ se trouvant dans l’une des deux barres de tri, le switch de puce soit automatiquement répercuté dans l’autre barre de tri.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<div class="sort-criterias"> <script type="text/javascript"> (function( $ ){ $(function(){ // switching between desc and asc sort order $('.sort-order').each(function(){ $('a.sort-desc').hide(); }); $('.sort-order a').on('click', function(){ var sortDirection = $(this).attr('data-sort'); $('a[data-sort='+ sortDirection +']').hide().siblings().show(); }); }); })(jQuery); </script> <span class="criteria"> <a class="criteria-label" href="#">Name</a> <span class="sort-order"><a class="sort-desc" data-sort="desc-1" href="#">▾</a><a class="sort-asc" data-sort="asc-1" href="#">▴</a></span> </span> <span class="criteria"> <a class="criteria-label" href="#">Relevance</a> <span class="sort-order"><a class="sort-desc" data-sort="desc-2" href="#">▾</a><a class="sort-asc" data-sort="asc-2" href="#">▴</a></span> </span> <span class="criteria"> <a class="criteria-label" href="#">New</a> <span class="sort-order"><a class="sort-desc" data-sort="desc-3" href="#">▾</a><a class="sort-asc" data-sort="asc-3" href="#">▴</a></span> </span> </div> |