Créer un tableau de bord interactif en jQuery

Cet article est la traduction la plus fidèle possible de l'article original de Paul Underwood, Create An Interactive Metro Style Grid Dashboard.

Depuis que Windows 8 a publié les premières images de sa nouvelle interface, beaucoup de gens sont devenus fous autour du style Metro.

En 2013 la tendance va faire que vous allez voir de plus en plus de sites Web utiliser le style Metro pour leur design. Mais est-ce vraiment une bonne idée de design pour des sites ?

C'est ce que nous allons voir dans ce tutoriel en utilisant un plugin jQuery très utile : Gridster.

Gridster vous permet de créer des grilles multicolonnes dans lesquelles vous pouvez utiliser le drag and drop. Le layout de la grille ainsi créée est entièrement géré par le plugin, tout ce que vous avez à faire c'est définir le nombre de lignes et de colonnes de chaque boite.

La meilleure fonctionnalité de ce plugin est la possibilité d'utiliser le drag and drop sur les boites, ce qui permet à vos visiteurs une personnalisation totale de l'apparence de la grille. Si en plus vous utilisez les cookies JavaScript vous pouvez sauvegarder l'apparence sur l'ordinateur de votre visiteur et ainsi afficher la même grille pour sa prochaine connexion.

La première chose à faire pour créer une interface ressemblant à Metro est donc de télécharger ce plugin.

Télécharger Gridster.

Pour utiliser Gridster il vous suffit, comme pour n'importe quel autre plugin jQuery, de l'inclure dans vos pages Web.

Vous avez alors accès à l'objet gridster. C'est dans cet objet que nous allons définir nos options pour notre grille, c'est là que nous pourrons personnaliser le widget avec les marges, la largeur et la hauteur, etc.

La façon la plus simple d'utiliser cet objet est de définir uniquement les marges du widget et sa taille. Le plugin utilisera alors ces valeurs pour redimensionner la grille afin de s'assurer qu'elle s'affiche entièrement à l'écran.

Utilisez le code suivant pour définir une grille dont les widgets feront 150 x 150 pixels avec une marge de 10 pixels.

<script src="src/jquery.gridster.js"></script>
<script type="text/javascript">
   jQuery(function(){
      jQuery(".gridster ul").gridster({
          widget_margins: [10, 10],
          widget_base_dimensions: [150, 150]
      });
  });
</script>

Avec notre objet gridster lié à notre liste nous pouvons maintenant créer le code HTML nécessaire pour utiliser ce script JavaScript.

Ce qui est important lorsque l'on utilise Gridster, c'est de définir quatre attributs qui vont permettre de placer les widgets et de les dimensionner :

• data-row : définit la ligne de départ du widget ;
• data-col : définit la colonne de départ du widget ;
• data-sizex : définit le nombre de colonnes sur lesquelles le widget va s'étendre ;
• data-sizey :définit le nombre de lignes sur lesquelles le widget va s'étendre.

<div class="wrapper gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="2" data-sizey="2"></li>
<li data-row="1" data-col="3" data-sizex="2" data-sizey="3"></li>
<li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li>
<li data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li>
<li data-row="1" data-col="7" data-sizex="1" data-sizey="1"></li>
<li data-row="1" data-col="8" data-sizex="1" data-sizey="2"></li>
<li data-row="2" data-col="5" data-sizex="1" data-sizey="1"></li>
<li data-row="2" data-col="6" data-sizex="2" data-sizey="1"></li>
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li>
<li data-row="3" data-col="2" data-sizex="1" data-sizey="1"></li>
<li data-row="3" data-col="5" data-sizex="1" data-sizey="1"></li>
<li data-row="3" data-col="6" data-sizex="3" data-sizey="1"></li>
</ul>
</div>

Ce code HTML va créer une grille contenant douze boites ayant des positions et des tailles différentes. Cette grille est le départ de notre grille avec le style Metro, maintenant il nous suffit d'appliquer les couleurs de Metro à nos boites ainsi que d'ajouter les différents boutons.

Il y a plusieurs couleurs qui sont systématiquement utilisées dans Metro, utilisez le code CSS suivant pour définir les couleurs de police et d'arrière-plan.

.font-blue,       .font-blue-link a         {color: #2d89ef;}
.font-blueLight,  .font-blueLight-link a    {color: #eff4ff;}
.font-blueDark,   .font-blueDark-link a     {color: #2b5797;}
.font-green,      .font-green-link a        {color: #00a300;}
.font-greenLight, .font-greenLight-link a   {color: #99b433;}
.font-greenDark,  .font-greenDark-link a    {color: #1e7145;}
.font-red,        .font-red-link a          {color: #b91d47;}
.font-yellow,     .font-yellow-link a       {color: #ffc40d;}
.font-orange,     .font-orange-link a       {color: #e3a21a;}
.font-orangeDark, .font-orangeDark-link a   {color: #da532c;}
.font-pink,       .font-pink-link a         {color: #9f00a7;}
.font-pinkDark,   .font-pinkDark-link a     {color: #7e3878;}
.font-purple,     .font-purple-link a       {color: #603cba;}
.font-darken,     .font-darken-link a       {color: #1d1d1d;}
.font-lighten,    .font-lighten-link a      {color: #d5e7ec;}
.font-white,      .font-white-link a        {color: #ffffff;}
.font-grayDark,   .font-grayDark-link a     {color: #525252;}

.bg-blue       {background-color: #2d89ef;}
.bg-blueLight  {background-color: #eff4ff;}
.bg-blueDark   {background-color: #2b5797;}
.bg-green      {background-color: #00a300;}
.bg-greenLight {background-color: #99b433;}
.bg-greenDark  {background-color: #1e7145;}
.bg-red        {background-color: #b91d47;}
.bg-yellow     {background-color: #ffc40d;}
.bg-orange     {background-color: #e3a21a;}
.bg-orangeDark {background-color: #da532c;}
.bg-pink       {background-color: #9f00a7;}
.bg-pinkDark   {background-color: #7e3878;}
.bg-purple     {background-color: #603cba;}
.bg-darken     {background-color: #1d1d1d;}
.bg-lighten    {background-color: #d5e7ec;}
.bg-white      {background-color: #ffffff;}
.bg-grayDark   {background-color: #525252;}

Pour ajouter des icônes aux widgets nous allons utiliser la pseudoclasse CSS :before pour ajouter un nouvel élément sur notre page et pour définir une image d'arrière-plan pour chacune des icônes que nous voulons ajouter.

Le code suivant va positionner l'icône au centre du widget.

.gridster li a:before{
     display: block;
     height:50px;
     width:100%;
     position: absolute;
     top:35%;
     left:0;
     right:0;
}
.recent:before{ content:''; background:url('img/calendar.png') no-repeat center; }
.twitter:before{ content:''; background:url('img/twitter.png') no-repeat center; }
.facebook:before{ content:''; background:url('img/facebook.png') no-repeat center; }
.about:before{ content:''; background:url('img/about.png') no-repeat center; }
.snippets:before{ content:''; background:url('img/scissors.png') no-repeat center; }
.resources:before{ content:''; background:url('img/library.png') no-repeat center; }
.googleplus:before{ content:''; background:url('img/google.png') no-repeat center; }
.contact:before{ content:''; background:url('img/forward.png') no-repeat center; }
.articles:before{ content:''; background:url('img/folder_open.png') no-repeat center; }
.tutorials:before{ content:''; background:url('img/tutorials.png') no-repeat center; }
.pinterest:before{ content:''; background:url('img/pinterest.png') no-repeat center; }
.archives:before{ content:''; background:url('img/calendar.png') no-repeat center; }

Pour ajouter du texte en bas de notre page nous allons utiliser la pseudoclasse CSS :after afin d'ajouter un élément sur notre page.

L'avantage d'utiliser cette pseudoclasse pour ajouter du contenu au widget est que nous n'avons besoin que de définir l'attribut class sur le widget pour appliquer un style aux icônes et aux contenus.

.gridster li a:after{
     position: absolute;
     bottom: 5px;
     left:0;
     right:0;
}
.recent:after{ content:'Recent Articles'; }
.twitter:after{ content:'Twitter'; }
.facebook:after{ content:'Facebook'; }
.about:after{ content:'About'; }
.snippets:after{ content:'Snippets'; }
.resources:after{ content:'Resources'; }
.googleplus:after{ content:'Google Plus'; }
.contact:after{ content:'Contact'; }
.articles:after{ content:'Articles'; }
.tutorials:after{ content:'Tutorials'; }
.pinterest:after{ content:'Pinterest'; }
.archives:after{ content:'Archives'; }

C'est tout ce dont nous avons besoin pour créer une grille avec le même style que Metro, en utilisant le plugin jQuery Gridster et un peu de CSS.

Dans cet article nous avons vu comment créer un design ressemblant à l'interface Metro de Windows 8. Nous avons vu comment utiliser le plugin jQuery Gridster pour créer notre grille et comment utiliser le CSS afin de personnaliser le style de cette grille. Vous pouvez vous amuser à changer votre grille, changer votre style et créer votre propre design !

• Vous pouvez consulter la démonstration afin d'avoir un aperçu du rendu dans un navigateur.
• Gridster.

Je tiens à remercier Paul Underwood de m'avoir autorisé à traduire son tutoriel.
Je remercie également _Max_ pour sa relecture orthographique.