Étiquette : HTML5

[jQuery][Bootstrap 3][Collapse][enquire.js] En vue Mobile, dans un menu, désactiver la redirection vers la page cible au clic sur un lien de premier niveau avec les data-attributes et jQuery.

Attention : dans le code donné en exemple, vous trouverez dans certains cas des mentions à des variables de type ${repeat/entry/index}. Ce type de variables est utilisé dans le CMS RBS Change (versions 3.x). A moins que vous ne souhaitiez mettre à profit ce code au sein d’un menu Change, il ne faudra pas tenir compte de ces variables et, le cas échéant, les supprimer ou les remplacer par des variables qui fonctionnent dans le CMS que vous utilisez.

Problème : une navigation en vue Desktop, même sous forme de menu déroulant ou géant, laisse parfois la possibilité d’accéder à des pages en cliquant sur les entrées de premier niveau. Typiquement, lorsque cette même navigation est affichée en vue Mobile, l’activation de ces mêmes entrées de premier niveau doit ouvrir un second niveau et pas rediriger vers des pages (sinon la navigation Mobile ne permettra jamais d’atteindre les sous-niveaux).

Solution (avec le composant Collapse de Bootstrap 3 et enquire.js) :

Nous allons tout d’abord nous assurer que les différents classes, IDs et data-attributs nécessaires au fonctionnement du composant Collapse sont en place sur les éléments impliqués.

Sur le lien qui active la partie masquée à afficher :

  • class= »link collapsed »
  • role= »button »
  • data-toggle= »collapse »
  • href= »${descendantUrl} »
  • aria-expanded= »false »
  • aria-controls= »collapseShelfSubMenuLevel2${repeat/entry/index} »

Attention : en plus des attributs requis nativement par le composant Collapse, nous allons rajouter deux attributs data-mobile-target et data-desktop-target dont les valeurs correspondent respectivement à l’ID de l’élément masqué à activer et à l’URL de la page sur laquelle l’utilisateur sera redirigé à l’activation du lien.

  • data-mobile-target= »collapseShelfSubMenuLevel2${repeat/entry/index} »
  • data-desktop-target= »${descendantUrl} »

Exemple finalisé :

Sur l’élément à afficher/masquer :

  • class= »level${parent/getChildrenLevel} collapse »
  • id= »collapseShelfSubMenuLevel2${repeat/entry/index} »

Exemple finalisé :

La partie jQuery (en utilisant enquire.js pour simuler des media-queries en JS – très pratique) :

La méthode enquire.register définit que le code qui se trouvera dans match sera exécuté dans le cadre du breakpoint énoncé. Hors breakpoint, c’est le code qui se trouve dans unmatch qui est exécuté.

Les deux attributs data-mobile-target et data-desktop-target ajoutés plus haut dans notre template vont nous servir à switcher les valeurs des attributs href des liens des entrées de premier niveau.

Lorsque le viewport utilisé est dans le scope des 767px minimum (vue Mobile), au clic sur une entrée de premier niveau la redirection vers la page ne s’effectue pas. On affiche les entrées de second niveau à la place.

Lorsque le viewport utilisé est hors scope (768px ou plus, vue Desktop), au clic sur une entrée de premier niveau la redirection vers la page s’effectue. Les entrées de second niveau (sous-menu déroulant ou géant) doivent s’afficher au survol (à vous de gérer ça).

Exemple finalisé de notre code jQuery :

Pour finir – Markup purement HTML (rendu dans le navigateur) :

Vue Mobile, second niveau fermé :

Vue Desktop, second niveau fermé :

On note l’action de notre petit script jQuery par la différence de la valeur affichée par l’attribut href de notre élément <a class="link collapsed"></a>. En vue Mobile, c’est la valeur du data-attribut data-mobile-target="collapseShelfSubMenuLevel20" qui est active. En vue Desktop, celle de data-desktop-target="http://mon-site.fr/fr/bijoux/par-famille".

[RBS Change] Ajouter un nouveau doctype au projet

1. dans modules/theme/setup, créer un nouveau fichier html5.xml sur la base de init.xml

2. contenu du fichier (pour l’ajout d’un doctype HTML5) :

3. ajouter ceci dans modules/theme/persistentdocument/pagetemplate.class.php :

4. puis sous Putty :

[CSS] Des tableaux responsives en full CSS

Ressources en ligne :

Deux exemples maison pour un tableau comparatif :

Tableau comparatif dont les éléments à comparer deviennent horizontalement scrollables en vue mobile

Simulation JSfiddle.net (avec code source propre), demo.

table-comparison-one_desktop-mobile

Tableau comparatif dont les éléments à comparer se désolidarisent pour s’empiler en vue mobile

Nouveau: une version plus flexible basée sur Flexbox (sources core). https://jsfiddle.net/frontenddeveloper/ay5v30p5/

…et la gueule de cette version Flexbox sous IE11:


Simulation JSfiddle.net (avec code source propre). Attention : la partie commentée du code CSS ne semble pas adaptée à notre exemple.

table2_desktop-mobile

En utilisant display: inline-block; sur les rangées et white-space: nowrap; sur le corps du tableau :

Source et simulation (Flip Scroll) : http://elvery.net/demo/responsive-tables/#flip-scroll.

Récupérer les hauteurs (en px) de chaque cellule d’en-tête, les stocker dans un tableau et les réattribuer aux cellules correspondantes dans le corps du tableau.

Version SASS de flip-scroll

Version SASS de No More Tables

Source : http://elvery.net/demo/responsive-tables/#no-more-tables.

Attention : ajouter un !important à td { padding-left: 50%; } si vous utilisez Twitter Bootstrap pour styler vos tableaux.

Ajout d’une classe .ignore à placer sur les <td /> qui ne doivent pas faire l’objet d’une transformation. La rangée du tableau transformé n’aura alors pas de libellé (en-tête).

En utilisant display: block; et les data attributes HTML5 :

Source : http://codepen.io/geoffyuen/pen/FCBEg.

Simulation : http://jsfiddle.net/frontenddeveloper/gf7R3/.

Mixin SASS