Au cours de mon stage de 16 semaines chez la Labomedia, j'ai travaillé pour aider à la création d'un site web net-art.

Dans le cadre du projet, il était envisagé des boites pouvant être ouvertes, fermées et déplacées. La structure entière du site devant être basée là-dessus, c'est la première chose que j'ai fait.

Pour faire cela, j'ai utilisé css et jquery. Commençons par observer les règles de CSS:

J'ai commencé en créant une mixin générale pouvant être réutilisée pour la plupart des boites. En effet, étant donné que chaque boites cliquées doivent faire quelque chose de différent (positionnement différent, taille différente, contenu différent etc.) j'avais besoin de les différencier, d'où l'idée de faire une mixin pouvant être réutilisé pour faire des boites répétitives mais au nom différents. Voici un exemple pour les quatres premières boites:

Comme on peut le voir, on a maintenant 4 boites qui sont prêtes à être ouvertes.

Maintenant, il faut pouvoir trouver un moyen de les ouvrir. Pour cela, on va utiliser une fonction de jquery pour changer son css:

Étudions la fonction ligne par ligne:

$( '.box-1' ).on( 'click', function(e){ : Permet simplement de créer l'action quand on clique sur la box-1.

if($.inArray(1, checkActive)==-1 && state==true){ : On utilise cette condition pour ne pas pouvoir ouvrir une deuxieme fois la boite ce qui dupliquerait le contenu. Ici, checkActive est une liste de chiffre qui commence vide. state est une variable dont je parlerais plus tard

$(“<a href='#' class='close' onclick=“closeBox(1)”></a><p>Lorem ipsum do… Vivamus iaculis luctus imperdiet.</p> div class=“box-5”><p id='title-5'>test</p></div>”).appendTo('.box-1'); : Ici, on écrit le contenu qu'on veut ajouter à la boite. <a href='#' class='close' onclick='closeBox(1)'> est simplement une icone qui permettra de fermer la boite à l'aide de la fonction “closeBox”. La div box-5 est une sous-boite dont je parlerais plus tard.

$('.box-5').draggable(); : draggable() est une fonction rajoutée par jquery-ui. Elle permet tout simplement de cliquer sur l'élément affecté et de le déplacer. On se sert donc de ça pour pouvoir déplacer les boites.

$('.box-1').animate({“width”:“50vw”,“height”:“25vw”}, “slow”, false, function(e){$('.box-1').css(“overflow”,“scroll”);}) : permet de changer la règle de css. On utilise la fonction animate pour donner une meilleur impression de fluidité.

checkActive.push(1); et checkActive.remove(5); : permet d'ajouter 1 à la liste de checkActive pour ne pas réactiver la boite grâce à la condition. On enlève le chiffre 5 si il est présent car box-5 est une sous-boite de box-1.

extendSubBox(); : on enclenche la fonction extendSubBox() afin de pouvoir utiliser les nouvelles sous-boites qui ont été créé. Ces dernières ont un code très similaire.

else if($.inArray(5, checkActive)==-1 && state==false) { state=true; } : Enfin, cette partie est plus dédiée au fait de fermer une boite. Pour résumer rapidement, elle permet de ne pas rouvrir la boite pendant qu'elle est en train de se fermer.

Enfin, pour conclure cette partie, voici à quoi ressemble la box-1 lorsqu'elle est ouverte:

On a donc du texte, une image et un croix pour fermer. De plus, on a barre permettant de scroll jusqu'a trouver une seconde box

A présent, il serait intéressant de regarder comment fermer une boite

On a vu que pour fermer une boite, on utilise une balise <a href='#' class='close' onclick='closeBox(chiffre)'></a> dans les box. Mais il serait donc intéressant à présent de voir son fonctionnement

Commençons par regarder son css:

Le CSS est simple, il permet simplement de créer une croix qui change d'opacité lorsqu'elle est cliquée.

Afin de créer la fermeture la fermeture d'une boite, j'ai choisi d'utiliser une fonction prenant un argument un chiffre qui est appelée dans le onclick de la balise <a>:

Comme pour la fonction d'ouverture, étudions cette fonction ligne par ligne:

state=false; : Il y avait à la base un problème avec cette fonction. En effet, la croix permettant de fermer la boite se trouvait dans la même boite ce qui réactivait le onclick de la boite et annulait la fermeture car elle se rouvrait immédiatement… C'est pourquoi j'ai rajouté à la condition d'ouverture une variable “state”. Cette variable est mise à false au début de la fonction closeBox() afin d'empêcher la boite de se rouvrir.

checkActive.remove(x); : On enlève ici le chiffre de la boite qu'on souhaite fermer de la liste checkActive. On fait cela pour pouvoir rouvrir la boite plus tard si on le souhaite. A noter: jquery ne possède pas de méthode permettant d'enlever un objet d'une liste, j'ai donc du utiliser une fonction que j'ai trouvé sur internet:

var saveText= $(“#title-”+x).text(); : Toutes les boites on une balise avec l'id “title” qui correspond au texte quand la boite n'est pas ouverte (pour reprendre l'exemple des 4 boites plus tôt: test, test2, test3 et test4). On stock ce texte dans une var pour le réutiliser plus tard.

$('.box-'+x).empty(); : Cette ligne permet simplement de retirer tout le contenu de la boite qu'on souhaite fermer.

$('.box-'+x).draggable('disable'); : Ensuite, on désactive le fait de pouvoir bouger la boite…

$(“<p id='title-”+x+“'>”+saveText+“</p>”).appendTo('.box-'+x); : … On rajoute le titre qu'on a sauvegardé précédemment.

$('.box-'+x).attr('style',“ ”) : Et enfin, on réinitialise le css de la boite à son état original. Cela assure que la boite se retrouve à la bonne taille et à la bonne position ainsi qu'autre changement de css qui aurait put être fait.