phbroc Philippe Brouard HTML5 Canvas.

Html5 : des boutons bien justifiés

vendredi 14 octobre 2011 

Voici un premier tutoriel html5, enfin presque. C’est plutôt un exercice de développement sur le principe html + css + javascript, qui est à la base de l’approche html5.

Récemment je me suis demandé comment faire pour afficher une suite de boutons (html <button> tag) dans un conteneur, tout en garantissant une mise en page de type paragraphe justifié. Exemple de code html de départ :


Si on utilise uniquement une propriété CSS text-align : justify, on peut facilement avoir ce rendu graphique :

Si on souhaite avoir un rendu un peu plus harmonieux et évolué, il faut ajouter du code javascript. Je veux obtenir moins de trous entre les boutons et que la dernière ligne soit justifiée également. Dans cet exemple je me sers de jQuery.

Le code source javascript que je propose ci-dessous s’exécute au chargement complet de la page, évènement onload sur <body>.

  1. function myOnLoad()
  2. {
  3.         // pour récupérer la largeur de div en valeur numérique (de pixels)
  4.         var divButtonsWidth = parseInt($("#buttons").css("width"), 10);
  5.         // pour récupérer la valeur numérique des marges appliquées aux boutons
  6.         var buttonPadding = parseInt($("#buttons button:eq(0)").css("padding-left"), 10);
  7.         var buttonMargin = parseInt($("#buttons button:eq(0)").css("margin-left"), 10);
  8.        
  9.         var currentWidth = 0;
  10.         var prevWidth = 0;
  11.         var currentOffsetTop = $("#buttons button:eq(0)").offset().top;
  12.         var buttonWidth = 0;
  13.         var firstIndexLine = 0;
  14.        
  15.         var widthGrow = 0;
  16.         var nbButtons = 0;
  17.        
  18.         // itération sur tous les boutons de la div
  19.         $("#buttons button").each(function (i)
  20.         {
  21.                 // on récupère la largeur du bouton = largeur du texte du bouton uniquement
  22.                 buttonWidth = $(this).width();
  23.                 // on cumule les valeurs de position + de largeur + de marges pour avoir la largeur totale de la ligne.
  24.                 currentWidth = $(this).offset().left + buttonWidth + (buttonPadding + buttonMargin);
  25.                 // ce test permet de savoir si on a changé de ligne, si oui il faut justifier les boutons de la ligne précédente
  26.                 // c'est la ligne avant le bouton actuel.
  27.                 if ($(this).offset().top > currentOffsetTop)
  28.                 {
  29.                         // on calcule le nombre de boutons par ligne (car on a mémorisé l'index du premier bouton de la ligne).
  30.                         nbButtons = i - firstIndexLine;
  31.                         // astuce : prevWidth c'est la largeur cumulée juste avant le bouton actuel, c'est donc la largeur de la ligne à justifier
  32.                         // Il faut augmenter la taille de tous les boutons d'une valeur égale à la largeur qui reste pour compléter la ligne, divisée par le nombre de boutons.
  33.                         widthGrow = Math.floor((divButtonsWidth - prevWidth) / nbButtons);
  34.                         // itération sur tous les boutons de la ligne à justifier
  35.                         for (j=firstIndexLine; j<i;j++)
  36.                         {
  37.                                 // cacul de la largeur du bouton = largeur du texte + largeur de la marge entourant le texte.
  38.                                 buttonWidth = $("button:eq(" + j +")").width() + 2 * (buttonPadding);
  39.                                 // application de la nouvelle largeur en ajoutant widthGrow
  40.                                 $("button:eq(" + j +")").width(buttonWidth + widthGrow);
  41.                         }
  42.                         // réinitialisation des valeurs pour servir à la ligne suivante
  43.                         firstIndexLine = i;
  44.                         currentWidth = $(this).width();
  45.                         currentOffsetTop = $(this).offset().top;
  46.                 }
  47.                 prevWidth = currentWidth;
  48.         });
  49.         // cas de la dernière ligne, on refait le traitement
  50.         var indexFin = $("#buttons button").length - 1;
  51.         nbButtons = indexFin + 1 - firstIndexLine;
  52.         widthGrow = Math.floor((divButtonsWidth - prevWidth) / nbButtons);
  53.         for (j=firstIndexLine; j<=indexFin;j++)
  54.         {              
  55.                 buttonWidth = $("button:eq(" + j +")").width() + 2 * (buttonPadding);
  56.                 $("button:eq(" + j +")").width(buttonWidth + widthGrow);
  57.         }
  58.        
  59. }
Télécharger


Cet exemple qui aborde finalement quelques fondamentaux de jQuery est un point de départ possible pour se plonger dans html5. J’espère qu’il pourra vous être utile. Vous pouvez voir ce code en action dans la page de démo.

Merci à web designer wall pour le code source CSS3 des boutons.

haut de page